|
对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
|
|
|
|