DOM扩展

Selectors API

Level 1的核心是两个方法：querySelector()和querySelectorAll()

Level 2规范在Element类型上新增了更多方法，matches()、find()和findAll()

querySelector()

返回匹配该模式的第一个后代元素，如果没有返回null。

参数可以为：标签名，如div、ID名，如#myDiv、类名，如.select

querySelectorAll()

返回所有匹配的节点，而不止一个。这个方法返回的是一个NodeList的静态实例。

matches()

接收一个CSS选择符参数，如果元素匹配则该选择符返回true，否则返回false。

使用这个方法可以方便地检测某个元素会不会被querySelector()或querySelectorAll()方法返回。

元素遍历

Element Traversal API为DOM元素添加了5个属性：

  • childElementCount，返回子元素数量（不包含文本节点和注释）。
  • firstElementChild，指向第一个Element类型的子元素；
  • lastElementChild，指向最后一个Element类型的子元素
  • previousElementSibling，指向前一个Element类型的同胞元素
  • nextElementSibling，指向后一个Element类型的同胞元素

CSS类扩展

getElementsByClassName()

此方法暴露在document对象和HTML元素上。该方法接收一个参数，即包含一个或多个类名的字符串，返回类名中包含相应类的元素的NodeList。

这个方法只会返回以调用它的对象为根元素的子树中所有匹配的元素。

在document上调用此方法返回文档中所有匹配的元素，而在特定元素上调用此方法则返回该元素后代中匹配的元素。

classList属性

classList是一个新的集合类型DOMTokenList实例。与其他DOM集合类型一样，DOMTokenList也有length属性表示自己包含多少项，也可以通过item()或中括号取得个别的元素。

此外DOMTokenList还增加了一下方法：

  • add(value)，向类名列表中添加指定的字符串值value，如果这个值已经存在，则什么也不做。
  • Contains(value)，返回布尔值，表示给定的value是否存在。
  • Remove(value)，从类名列表中删除指定的字符串值value。
  • Toggle(value)，如果类名列表中已经存在指定的value，则删除。如果不存在则添加。
焦点管理

Document.activeElement，始终包含当前拥有焦点的DOM元素。

默认情况下，document.activeElement在页面刚加载完之后会设置为document.body。而在页面完全加载之前，值为null。

Document.hasFocus()，该方法返回布尔值，表示文档是否拥有焦点。

HTMLDocument扩展
readyState属性

document.readyState属性有两个可能的值：

  • loading，表示文档正在加载
  • complete，表示文档加载完成
compatMode属性

表示渲染模式，标准模式下值为“CSS1Compat”，混杂模式下值为“BackCompat”。