DOM扩展

[pambassador]

DOM扩展

1. 选择符API

• SelectorsAPILevel 1的两个核心方法，可以通过Document及Element类型的实例调用

  querySelector()方法——返回与该模式匹配的第一个元素

  querySelectorAll()方法——返回一个NodeList实例

• SelectorsAPILevel 2为Element类型新增了matchesSelector()

2. 元素遍历

• childElementCount：返回子元素（不包括文本节点和注释）的个数

• firstElementChild：指向第一个子元素，firstChild的元素版

• lastElementChild：指向最后一个子元素，lastChild的元素版

• previousElementSibling：指向前一个同辈元素，previousSibling的元素版

• nextElementSibling：指向最后一个同辈元素，nextSibling的元素版

3. HTML5

• 与类相关的扩充 getElementsByClassName classList属性

• 焦点管理 document.activeElement属性——引用DOM中当前获得焦点的元素 document.hasFocus()方法——用于确定文档是否获得了焦点

• HTMLDocument的变化 document.readyState有两个可能的值：

  1. loading，正在加载文档

  2. complete，已经加载完文档

     兼容模式 document.compatMode有两个可能的值

  3. CSS1Compat，标准模式

  4. BackCompact，混杂模式

     document.head引用文档的元素

• 字符集属性 document.charset document.defaultCharset

• 自定义数据属性 属性可以任意添加、随便命名，只要以data-开头即可 <div id="MyDIv" data-appId="12345" data-myname="Nicholas"></div>

• 插入标记 innerHTML属性 outerHTML属性 insertAdjacentHTML()方法

• scrollIntoView()方法

4. 专有扩展

• 文档模式

• children属性 只包含元素中同样还是元素的子节点

• contains()方法

• 插入文本 innerText属性 outerText属性

• 滚动 scrollIntoViewIfNeeded(alignCenter) scrollByLines(lineCount) scrollByPages(pageCount)

[ynchuan]

欢迎star https://github.com/ynchuan/blog/issues