DOM拓展

Selectors API

querySelector()方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。

querySelectorAll()方法接收的参数与querySelector()方法一样，都是一个CSS选择符，但返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个NodeList的实例。

matchesSelector()
Selectors API Level 2 规范为Element类型新增了一个方法matchesSelector()。这个方法接收一个参数，即CSS选择符，如果调用元素与该选择符匹配，返回true；否则，返回false。

element新属性（方便排除文本节点和注释节点的干扰）
childElementCount：返回子元素（不包括文本节点和注释）的个数。
firstElementChild：指向第一个子元素；firstChild的元素版。
lastElementChild：指向最后一个子元素；lastChild的元素版。
previousElementSibling：指向前一个同辈元素；previousSibling的元素版。
nextElementSibling：指向后一个同辈元素；nextSibling的元素版。

H5新增
getElementsByClassName()
getElementsByClassName()方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的NodeList。传入多个类名时，类名的先后顺序不重要。来看下面的例子。

classList属性
方法
add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
remove(value)：从列表中删除给定的字符串。
toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它

11.3.2 焦点管理
document.activeElement 这个属性始终会引用DOM中当前获得了焦点的元素
document.hasFocus()方法，这个方法用于确定文档是否获得了焦点 返回true
element.focus() 使元素获得焦点

11.3.3 HTMLDocument的变化
document.readyState
就是通过它来实现一个指示文档已经加载完成的指示器
返回两个值：
loading，正在加载文档；
complete，已经加载完文档。

document.compatMode
在标准模式下，document.compatMode的值等于"CSS1Compat"，而在混杂模式下，document.compatMode的值等于"BackCompat"。

document.head 引用head元素
var head = document.head || document.getElementsByTagName("head")[0];

document.charset //字符集设置
document.defaultCharset //查看默认字符集

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

var div = document.getElementById("myDiv");
var appId = div.dataset.appid;
var myName = div.dataset.myname;

可以通过.dataset.属性名访问,注意chorme浏览器中.dataset返回的键值都是小写，即appID变成了appid

11.3.6 插入标记

innerHTML
读模式：只返回所有子节点的HTML标签
写模式：如果包含特殊字符，应该转义
注意：在大多数浏览器中，通过innerHTML插入<script>元素并不会执行其中的脚本
大多数浏览器都支持以直观的方式通过innerHTML插入<style>元素

outerHTML
读模式：返回调用它的元素及所有子节点的HTML标签
写模式： 可以完全替换该元素节点的html标签

insertAdjacentHTML("beforebegin", "<p>Hello world!</p>")
"beforebegin"，在当前元素之前插入一个紧邻的同辈元素；
"afterbegin"，在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；
"beforeend"，在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素；
"afterend"，在当前元素之后插入一个紧邻的同辈元素。

scrollIntoView()
scrollIntoView()可以在所有HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。如果给这个方法传入true作为参数，或者不传入任何参数，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。如果传入false作为参数，调用元素会尽可能全部出现在视口中，（可能的话，调用元素的底部会与视口顶部平齐。）不过顶部不一定平齐

document.documentMode
属性可以知道给定页面使用的是什么文档模式

children
只包含元素子节点的HTMLCollection实例

contains()
传入元素节点，判断传入的元素节点是不是调用该方法节点的后代

compareDocumentPosition()也能够确定节点间的关系
返回各种数字来表示节点关系

给元素节点增加文本节点
innerText
outerText

isSameNode()和isEqualNode()
isSameNode() //是不是同一个
isEqualNode() //是不是相等的元素