DOM扩展

1. 选择符API

• querySelector()方法
  接收一个css选择符，返回与该模式匹配的第一个元素；通过Element类型调用querySelector()方法，只会在该元素后代范围内查找匹配的元素
• querySelectorAll()方法
  返回所有匹配的元素
• matchesSelector()方法
  接受一个参数，调用的元素与选择符匹配，返回true，否则返回false

2. 元素遍历

childElementCount//返回子元素个数
firstElementChild//指向第一个元素
lastElementChild//指向最后一个子元素
previousElementSibling//指向前一个同辈元素
nextElementSibling//指向后一个同辈元素

3. HTML5
   (1)与类相关的扩充

• getElementsByClassName()方法
• classList属性

add(value)//将给定的字符串列表添加到列表中
contains(value)//列表中是否存在给定的值，返回布尔值
remove(value)//从列表中删除给定字符串
toggle(value)//列表中由则删除，没有则添加

(2) 焦点管理

document.activeElement属性会引用DOM中当前获得了焦点的元素
document.hasFocus()//用于确定文档是否获得了焦点

(3) HTMLDocument的变化

• readyState 属性
  作为文档是否加载完成的指示器
  值为loading 正在加载
  值为complete 加载完成
• 兼容模式
  浏览器采用哪种渲染模式

document.compatMode
值为CSS1Compat标准模式
值为BackCompat混杂模式

• head属性
  引用文档元素

(4)字符集属性
charset

(5) 自定义数据属性
为元素提供与渲染无关的信息或者提供语义信息，以data-作为前缀

//定义
document.dataset.myname

(6)插入标记

innerHTM属性返回并调用元素的所有子节点（包括元素、注释和文本节点）对应的html标记
outerHTML属性返回并调用该元素及所有子节点的html标签
insertAdjacentHTML()方法，两个参数，插入位置和要插入的html文本
第一个参数为：
beforebegin：在当前元素之前插入一个紧邻的同辈元素
afterbegin：在当前元素之下插入一个新的子元素或者在第一个子元素之前再插入新的子元素
beforeend:在当前元素之下插入一个新的子元素或者在最后一个子元素之后再插入新的子元素
afterend:在当前元素之后插入一个紧邻的同辈元素

(7) scrollIntoView()方法
通过滚动浏览器窗口或者某个容器元素，调用元素会出现在视图