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

 
对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
 
 
posted @ 2017-07-27 18:33  jason_xiao  阅读(206)  评论(0编辑  收藏  举报