读书笔记 - js高级程序设计 - 第十一章 DOM扩展

Posted 2020-09-30 阿里P7之路

 

对DOM的两个主要的扩展	Selectors API html5  Element Traversal 元素遍历规范
querySelector	var body = document.querySelector("body"); var myDiv = document.querySelector("#myDiv"); 取得id为myDiv的元素 var selected = document.querySelector(".selected") 取得类名为 selected 的第一个元素 var img = document.body.querySelector("img.button") 取得类名为button的第一个img元素
querySelectorAll	和上面方法一样，只是能获得所有的元素，返回值是一个NodeList的实例
取得p元素中的所有strong元素	document.querySelectorAll("p strong") ;
matchesSelector	document.documentElement.matchesSelector("body.page1");
Element Traversal	1 childElementCount 2 firstElementChild 3 lastElementChild 4 previousElementSibling 5 nextElementSibling
HTML5	1 getElementByClassName() 可能通过document和所有HTML元素调用这个方法，因为返回的是NodeList，所以和getElementByTagName（）和NodeList的其它DOM方法 都具有同样的性能问题 2 classList    因为className是一个字符串，所以即使只修改字符串一部分，也必须每次都设置整个字符串的值 所有有了以下方法 div.classList.add() div.classList.remove() div.classList.toggle()
焦点管理
找DOM中获得焦点的元素	document.activeElement
元素获得焦点的方法有3种	页面加载 用户输入  在代码中调用focus()方法
判断文档中是否有焦点	document.hasFocus()
HTMLDocument的变化	1 readyState 有两个值 loading 和 complete  要借助onload方法 2 兼容模式 document.compatMode == "CSS1Compat" 而在混杂模式下 docuement.compatMode == "BackCompat"; 3 head 属性  var head = document.head || document.getElementByTagName("head")[0] ;
字符集属性	document.charset = "UTF-8" ;
自定义数据属性	要以 data-开头 比如 <div id="myDiv" data-appId="123" data-myname="jeff" ></div> 取得自定义属性 var appId = div.dataset.appId ; 设置值 div.dataset.appId = "4" ;
innerHTML	返回调用它的元素的子节点标签
outerHTML	outerHTML 返回调用它的元素及所有子节点的HTML标签
inserAdjacentHTML方法	element.insertAdjacentHTML("beforebegin", <p>); beforebegin afterbegin beforeend afterend
内存和性能问题	innerHTML 比多次操作DOM强 但innterHTML也不要操作太多次
scrollIntoView	可在所有HTML元素上调用，通过滚动浏览器窗口或某个容器元素 调用元素就可以出现在视口中 如果传 true, 或者不传参，那么窗口滚动之后 会让调用元素的顶部与视口顶部尽可能平齐 如果传 false 调用元素会尽可能全部出现在视口中，不过项部不一定平齐   别的方法: 为某个元素设置焦点，也会导致浏览器滚动 并显示出获得焦点的元素
children属性
contains方法
滚动	scrollIntoViewIfNeeded scrollByLines scrollByPages