1.document.querySelector()方法：
接受一个CSS选择符 返回与该模式匹配的第一个元素 如果没有 则返回null
2.document.querySelectorAll()方法：
接受一个CSS选择符 返回与该模式匹配的NodeList的实例. 如果没有 则返回空数组
3.matchesSelector()方法：
接受一个CSS选择符 如果调用的元素与该选择符匹配，则返回true 否则返回false 兼容问题查询288页。
元素遍历：
对于元素之间的空格，IE9之前不会返回文本节点，但其他所有浏览器都会返回文本节点。
因此导致了在使用childNodes和firstChild等属性时的行为不一致。
也为此介绍几个能处理这个问题的API：
childElementCount:返回子元素（不包括文本节点和注释）的个数。
firstElementChild:指向第一个子元素；firstChild的元素版。
lastElementChild：指向最后一个子元素；lastChild的元素版。
PreviousElementSibling：指向前一个同辈元素；previousSibling的元素版。
nextElementSibling：指向后一个同辈元素；nextSibling的元素版。
classList属性（chrome Firefox 3.6+支持）
有length属性 去的每个元素可以用item（）方法 也可以用方括号语法；
此外 还有以下方法：
add（value）：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
contains（value）：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
remove（value）：从列表删除给定的字符串。
toggle（value）：如果列表中存在给定的值 则删除 如果不存在 则添加
HTML5新增焦点管理功能：
document.activeElement属性：这个属性始终引用DOM中当前获得了焦点的元素。
元素获得焦点的方式有加载、用户输入（通常是通过按Tab键） 和在代码中调用focus（）方法
例如：
var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button); //true
默认情况下，
文档刚刚加载完成时，document.activeElement中保存的是document.body元素的引用。
文档加载期间，document.activeElement的值为null
还新增了document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。
var button =document.getElementById('myButton');
button.focus();
alert(document.hasFocus());//true
-----------------------------------------------------------
HTMLDocument的变化
HTML5拓展了HTMLDocument,增加了新的功能。与HTML5中新增的其他DOM拓展类似，这些变化同样基于那些已经得到很多浏览器完美支持的专有拓展。所以，尽管这些拓展被写入标准的时间相对不长，但很多浏览器很早就已经支持这些功能了。
1.readyState 属性
Document的readyState属性有两个可能的值：
loading,正在加载文档;
complete,已经加载完文档。
使用document.readyState的最恰当方式，就是通过它来实现一个指示文档已经加载完成的指示器。在这个属性得到广泛支持之前，要实现这样一个指示器，必须借助onload事件处理程序设置一个标签，表明文档已经加载完毕。
document.readyState属性的基本用法如下:
if(document.readyState == 'complete'){
//执行操作
}
2.兼容模式
从IE6开始区分渲染页面的模式是标准的还是混杂的，检测页面的兼容模式就成为浏览器的必要功能。
document有个属性compatMode，就是为了告诉开发人员浏览器采用了哪种渲染模式。
标准模式下document.compatMode的值等于Css1Compat
混杂模式下document.compatMode的值等于BackCompat
3.head属性
document.body引用文档的<body>元素。
html5新增document.head引用文档的<head>元素。（Chrome和Safari5兼容）
不兼容的话用getElementsByTagName()方法。
重点：自定义数据属性
HTML5规定可以为元素添加非标准的属性，但是要添加前缀data-,目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性任意添加、随便命名，只要奕data-开头即可。
例如该标签：
<div id='myDiv' data-appId='12345' data-myname='nunu'></div>
添加了自定义属性之后，可以通过元素的dataset属性来访问自定义属性的值。dataset属性的值是DOMStringMap的一个实例，也就是一个名值对儿的映射。在这个映射中，每个
data-name形式的属性都会有一个对应的属性，只不过属性名没有data-前缀，比如在上面的例子中，自定义属性data-myname映射对应的属性是myname。
支持该属性的浏览器有Firefox 6+ 和Chrome
插入标记
1.innerHTML属性
在读模式下，innerHTML属性返回与调用元素的所有子节点(包括元素、注释和文本节点)对应的HTML标记。
在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。例如：
<div id='content'>
<p>aaa<strong>bbb</strong>ccc</p>
<ul>
<li>ddd</li>
<li>ddd</li>
</ul>
</div>
对于上面的div元素来说 他的innerHTML属性会返回如下字符串。
<p>aaa<strong>bbb</strong>ccc</p>
<ul>
<li>ddd</li>
<li>ddd</li>
</ul>但是，不同浏览器返回的文本格式会有所不同。
在写模式下，innerHTML的值会被解析为DOM子树，替换调用元素原来的所有子节点。因为它的值被认为是HTML，所以其中的所有标签都会按照浏览器处理 HTML的标准方式替换为元素（转换结果因浏览器而异）。如果设置的值是文本而没有HTML标签 则会被设置成纯文本（与innerText的在写模式输出一样）。
提前解释一个概念：‘无作用域的元素’= 页面中看不到的元素。类似于style元素和注释。
script元素也被认为是‘无作用域的元素’。
如果通过innerHTML插入的字符串开头就是一个无作用域的元素，那么IT会在解析这个字符串之前先删除该元素。
也就是说 如果要用innerHTML插入一段脚本script
需要用类似下面这几种方法：
1.开头添加一个可以被看见的元素(添加之后为了页面美观可能得移除这个文本）
div.innerHTML = '_<script defer>alert('hi');<\/script>';
div.innerHTML = '<div> </div><script defer>alert('hi');<\/script>'
div.innerHTML = '<input type=\"hidden\"><script defer>alert('hi');<\/script>'
关于插入style元素 大多数浏览器都是支持直接插入的，
但是IE8及更早的版本中，<style>也是一个没有作用域的元素，因此也可以用上面的第一种方法前置一个有作用域的元素解决该兼容问题。
有一部分元素不支持innerHTML属性。如：<col><colgroup><frameset><head><html><style><table><tbody><thead><tfoot><tr>.
在IE8及更早的版本中，<title>元素也没有innerHTML属性
为了更可靠的方式处理HTML。
IE8提供了window.toStaticHTML()方法,这个方法接收一个参数，即一个HTML字符串；返回一个经过无害处理后的版本---从源HTML中删除所有脚本节点和事件处理程序属性。比如：
var text = '<a href = \" #\" onclick = \"alert('hi')\">Click me</a>";
var sanitized = window.toStaticHTML(text); //IE8 only
alert(sanitized); //'<a href=\"#\">Click Me</a>' 这个例子将一个HTML链接字符串传给了toStaticHTML()方法，得到的无害版本中去掉了onclick事件属性。只有IE8原生支持这个方法，
2.outerHTML属性
在读模式下，outerHTML返回调用它的元素及所有子节点的HTML标签。
在写模式下，outerHTML会根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用元素。
<div id='content'>
<p>aaa<strong>bbb</strong>ccc</p>
<ul>
<li>ddd</li>
<li>ddd</li>
</ul>
</div>如果在DIV元素上调用outerHTML，会返回与上面相同的代码，包括<div>本身。不过，由于浏览器解析和解释HTML标记的不同，结果也可能会有所不同（这里的不同于使用innerHTML属性时存在的差异性质是一样的。）
使用outerHTML属性以下面这种方式设置值：
div.outerHTML = "<p>aaaaaaaaa</p>";这行代码的操作与下面这些DOM脚本代码一样：
var p = document.createElement('p');
p.appendChild(document.createTextNode('aaaaaaaaa'));
div.parentNode.replaceChild(p,div);结果就是新创建的p元素会取代DOM树中的div元素。
outerHTML基本不需要考虑兼容性问题（firefox7之前版本不支持 其他都不太考虑）
3.insertAdjacentHTML()方法- 插入标记
insertAdjacentHTML()方法接受两个参数：插入位置和要插入的HTML文本。
第一个参数必须是下列值之一：
'beforebegin',在当前元素之前插入一个紧邻的同辈元素；
'afterbegin',在当前元素之下插入一个新的子元素或者在第一个子元素之前再插入新的子元素；
'beforeend",在当前元素之下插入一个新的子元素或者在最后一个子元素之后再插入新的子元素；
'afterend',在当前元素之后插入一个紧邻的同辈元素。
注意这些值都是小写形式。
第二个参数是一个HTML字符串（与innerHTML和outerHTML的值相同），如果浏览器无法解析就会抛出错误。
一下是这个方法的基本用法示例。
//作为前一个同辈元素插入
element.insertAdjacentHTML('beforebegin','<p>HEllo world!</p>");
//作为后一个同辈元素插入
element.insertAdjacentHTML('afterend','<p>HEllo world!</p>");
//作为第一个子元素插入
element.insertAdjacentHTML('afterbegin','<p>HEllo world!</p>");
//作为最后一个子元素插入
element.insertAdjacentHTML('beforeend','<p>HEllo world!</p>");基本不用考虑兼容问题。
4.内存与性能问题
这里介绍的方法替换子节点可能会导致浏览器的内存占用问题，尤其在IE.
1.要注意在使用innerHTML、outerHTML属性和insertAdjacentHTML()方法时，最好先手工删除要被替换的元素的所有事件处理程序和JavaScript对象属性。
2.虽然innerHTML属性比操作DOM效率要高，但也会带来性能损失，所以设置该属性的次数要控制在合理的范围内。
scrollIntoView()滚动页面方法
scrollIntoiew()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。
如果给这个方法传入true作为参数，或者不传入任何参数，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。
如果给这个方法传入false作为参数，调用元素会尽可能全部出现在视口中，（可能的话，调用元素的底部会与视口底部平齐。）不过顶部不一定平齐。
实际上为某个元素设置焦点也会导致浏览器滚动并显示出获得焦点的元素。（focus方法）
children属性
children属性是HTMLCollection的实例，只包含元素中同样还是元素的节点。
IE8及更早版本的children属性中也会包含注释节点，但IE9之后的版本则只返回元素节点。
contains()方法
通过contains()方法，可以不通过在DOM文档树中查找即可获得这个节点是不是另一个节点的后代。
调用contains()方法的应该是祖先节点，接收一个参数，也就是要检测的后代节点，
如果被检测的节点是后代节点则返回true；否则返回false；
使用DOM Level 3 compareDocumentPosition()也能够确定节点间的关系。这个方法用于确定两个节点间的关系，返回一个表示该关系的位掩码。
- 1 - 无关
- 2 - 居前
- 4 - 居后
- 8 - 包含
- 16 - 被包含
插入文本
1.innerText
通过innerText属性可以操作元素中包含的所有文本内容，包含子文档树中的文本。
在通过innerText读取值时，它会按照由浅入深的顺序，将子文档树中的所有文本拼接起来。
在通过innerText写入值时，结果会删除元素的所有子节点，插入包含相应文本值的文本节点。
设置innerText永远只会生成当前节点的一个子文本节点，而为了确保只生成一个子文本节点，就必须要对文本进行HTML编码。利用这一点，可以通过innerText属性过滤掉HTML标签。方法是将innerText设置为等于innerText，这样就可以去掉所有HTML标签。
div.innerText = div.innerText
由于firefox不兼容innerText，所以有必要编写一个函数检测可以使用哪个属性。详情见302。
2.outerText属性
除了作用范围扩大到了包含调用它的节点之外，outerText和innerText没啥区别。
在读取文本值时，outerText和innerText的结果是完全一样的。
在写模式下，outerText就完全不同了：outerText不只是替换调用它的元素的子节点，而是会替换整个元素（包括子节点），相当于执行了一个replace。
由于调用该属性会导致调用它的元素不存在，因此不常用，也不建议尽可能不要用。
滚动
scrollIntoViewIfNeeded(alignCenter):
只在当前元素在视口中不可见的情况下，才滚动浏览器窗口或容器元素，最终让它可见。
如果当前元素在视口中可见，这个方法什么也不做。
如果将可选的alignCenter参数设置为true，则表示尽量将元素显示在视口中部（垂直方向）。
Safari和Chrome实现了这个方法
scrollByLines(lineCount):
将元素的内容滚动指定的行高，lineCount值可以是正值，也可以是负值。
Safari和Chrome实现了这个方法
scrollByPages(pageCount):
将元素的内容滚动指定的页面高度，具体高度由元素的高度决定。
Safari和Chrome实现了这个方法
需要注意的是：scrollIntoView()和scrollIntoViewIfNeeded()的作用对象是元素的容器，而scrollByLines()和scrollByPages()影响的则是元素自身。
DOM扩展笔记结束