第11章：
DOM作为ECMAScript中API的扩展存在于JavaScript中，但是很多的DOM操作方法并未写入标准，而是很多的浏览器各自为战，所以使用DOM的时候需要注意其使用范围。
选择符API：
QuerySelector()方法，接收一个标准的CSS选择符，返回与该模式匹配的第一个元素。也就是通过tagName/className/idName获取到一个元素，这里需要注意的是该方法仅接收第一个元素，其他的不接收。
该方法通过Document类型调用时，会在该元素的范围内查找，也就是同级元素查找，而使用Element类型调用时，会在该元素的后代元素范围内寻找。
QuerySelectorAll()方法，接收的参数与上面相同，但是这个方法返回的是一个携带全部属性和方法NodeList实例，是一组元素的快照，并非实时动态的。
该方法可以被Document、DocumentFragment、Element调用。
（个人不建议使用这种方法，太过于麻烦，远不如DOM中直接使用By方法来的迅速）
元素遍历：
ChildElementCount属性：返回子元素的个数(不包含文本节点和注释节点)
FirstElementChild属性：返回第一个子元素
LastElementChild属性：返回最后一个子元素
PreviousElementSibling：返回前一个兄弟元素
NextElementSibling：返回后一个兄弟元素
（ 注意这里说的全部都是返回“元素”，而非节点。这里相当于是加强了前面这些属性的基础版本，去掉了容易出现混淆的文本节点和注释节点，将能作用的节点改称为元素 ）
类扩充：
使用Document类型中的getElementsByClassName()方法获取类，这种方法支持连写，也就是一个属性获得多个类，直接在参数部分用空格间隔开就行。
新增操作类的属性classList，这个属性能直接获取到该标签的所有类名，且给出了四种方法操作：
- add()方法，增加类，如果存在就不添加了
- contains()方法，判断是否存在该类
- remove()方法，删除类
- toggle()方法，存在该类则删除，不存在则添加
(支持该属性的有chrome8.0、IE10.0、Firefox3.6、safari5.1、opera11.5）
焦点管理：
HTML5中添加了辅助焦点管理的功能，使用document.activeElement属性，该属性始终指向获得焦点的元素。
元素获得焦点的方式：页面加载、用户输入(尤其是输入框)，以及代码中加入focus()方法获得焦点。
默认情况下文档刚加载完成时，document.activeElement属性获取的是body元素的引用，而文档加载期间获取到的值是null。
还有一种方法是判断文档是否获得了焦点，document.hasFocus()方法
使用document.readyState属性判断文档是否加载完成，该属性存在两个值：loading正在加载文档，complete加载完成
使用document.compatMode属性判断采用哪种文档模式，两个值：CSS1Compat标准模式，BackCompat混杂模式
引用文档中的标签，直接使用document.head属性，这里最好少用这个属性，很多时候不兼容
设置文档中的字符集，一般在HTML文档中直接使用标签，写入charset属性设置即可，也可以使用document.chatset属性设置，或者使用defaultCharset属性设置使用浏览器默认的字符集。
自定义数据属性：
HTML文档中写入：
<div id = “abc” data-name = “DivName” data-DivId = “123”>内容</div>
Js脚本中写入：
var name = div.dataset.name; //DivName
var divId = div.dataset.DivId; //123
（ 这种自定义的写法并没有什么实际意义，但是在对元素上添加一个不可见数据时，可以起到很大的作用 ）
插入标记使用innerHTML属性，这里使用该属性的时候需要注意几点：
- 不同的浏览器返回的标签不一样，有的大写，有的小写，所以使用时需要进行一个转换
- 不能用于写入script标签，除非添加defer属性或者前面添加一个有作用域的元素（有作用域指的是能被看到）
- Col、colgroup、frameset、head、html、table、tbody、thead、tfoot、tr不能用innerHTML插入
还有替换标记的outerHTML属性，使用outerHTML属性可以将引用该属性的标签全部替换掉
插入标签insertAdjacentHTML()方法，接收两个参数：插入位置和要插入的HTML文本，且第一个参数必须是：
- beforebegin，前一个同级元素
- afterbegin，在最前面插入一个子元素
- beforeend，在最后插入一个子元素
- afterend，后一个同级元素
查询节点直接的关系：
contains()方法，调用该方法确定参数节点是否为调用节点的后代节点
使用comparsDocumentPosition()方法，确定节点关系，但返回的是表示关系的掩码：1表示无关，2表示为同级节点且在该节点之前，4表示为同级节点且在该节点之后，8表示包含关系，16表示被包含关系
插入文本信息使用innerText属性，同时也存在一个替换属性outerText，不过不建议使用该属性。
页面滚动：
使用scrollIntoView()方法，控制页面滚动效果，该方法有个参数true/false，当参数为true时，元素的顶部与视图窗口平齐，当参数为false时，元素的底部与窗口平齐
（这里这个方法类似于使用a标签作为锚点跳转的方法，只不过该方法主要用在整个页面部分，使用a标签可以进行模拟，该方法用于页面设计出现本页跳转情况）