JS高程 -- chapter11( DOM扩展 )

选择符API

---

核心是 querySelector()、querySelectorAll() 两个方法，可以使用 Document 和 Element 类型元素调用( IE8+ )

 
querySelector： 接收一个 CSS 选择符，返回与选择符匹配的第一个元素，若未找到则返回 null，如果选择符不被支持则抛出错误

例：
	document.querySelector("#app")
	document.querySelector(".app")
	...

querySelectorAll： 同样接收一个 CSS 选择符，但返回一个 NodeList 对象，其底层是类似于一组元素的 快照

 

元素遍历

---

对于元素间的空格，IE9 及之前都不会返回文本节点，但其他浏览器都会返回文本节点，导致了 childNodes 等属性的不一致，所以，定义了一组新的属性来保证获取正确元素( IE9+ )。

 

1. childElementCount： 返回子元素( 不包括文本节点和注释 ) 的个数
2. firstElementChild： 返回第一个是 Element 类型的子元素
3. lastElementChild： 返回最后一个是 Element 类型的子元素
4. previousElementSibling： 前一个 Element 类型的兄弟节点
5. nextElementSibling： 后一个 Element 类型的兄弟节点

 

HTML5 DOM相关

---

classList属性

classList 属性是新集合类型 DOMTokenList 的实例( FF，Chrome )，这个集合包含 length 属性和 取得元素的 item() 方法，并且定义了以下操作 class 的方法：

• add( val )： 添加 val 到 class 中，如果已经存在，则不会 重复 添加
• contains( val )： 判断 class 中是否有 val
• remove( val )： 从 class 中删除 val
• toggle( val )： 若 class 中存在 val，则删除，反之，则添加

 

焦点

document.activeElement： 始终引用当前文档中获得焦点的元素，默认情况下，文档刚加载完成，此属性指向 body，加载期间指向 null

 
document.hasFocus()： 用于确定文档是否获得了焦点

 

HTMLDocument

readyState： document 的这个属性可以表明文档是否加载完成，其有两个值，loading 和 complete

 
兼容模式： 用于检测浏览器当前的 渲染模式，使用 document.compatMode 来获取，CSS1Compat 表示当前是 标准模式，BackCompat 表示是混杂模式

 

自定义数据属性

HTML5 允许可以为元素添加非标准属性，当需要添加 data- 前缀，添加之后，可以使用元素的 dataset 属性来访问所有定义的自定义属性，其是一个 DOMStringMap 的实例( 一个名值对映射 )，其键值为 自定义属性名( 去掉data- )，值为自定义属性的值( FF，chrome )

 

scrollIntoView

该方法可以在所有 HTML 元素上调用，可以接收一个 布尔值 参数，不传或者为 true，则会让元素滚动到 顶部 尽可能与 视口顶部平齐，为false，则会尽量让元素全部显示在页面中