javascript--11DOM扩展
二、DOM扩展
1.呈现模式
①document对象的compatMode属性
□值为“CSS1Compat”即标准模式。
□值为“BackCompact”即混杂模式。
②IE8为document对象引入documentMode新属性，返回数值：5（混杂模式）、7（仿真模式）、8（标准模式）
2.滚动
□滚动方法都是作为HTMLElement类型的扩展存在，可再元素节点上使用。
□scrollIntoView(bool)：滚动浏览器窗口或容器元素，以便在视口（viewport）中看到元素。（参数为true或省略，则滚动到顶部）。
□scrollIntoViewIfNeeded(bool)：只在当前元素在视口中不可见的情况下，才滚动浏览器窗口或容器元素，让当前元素可见。（Safari和Chorme实现）。
□scrollByLines(lineCount)：将元素的内容滚动指定的行数的高度，lineCount可为正/负数。（safari和Chrome可用）
3.children属性
□children属性中只包含元素的子节点中那些也是元素的节点。
□作为HTMLCollection对象。
□Firefox不支持，IE中的children集合会包含注释节点。
4.contains()方法
□应在作搜索起点的祖先节点上调用，传入要检测的节点作参数。返回true则传入节点作为当前节点后代。
□Firefox不支持contains()方法，在DOM3级实现替代的compareDocumentPosition()方法，确定两个节点间关系。Safari2.x以下版本不支持。
兼容各浏览器代码：
functioncontains(refNode,otherNode){
if(typeofrefNode.contains=="function"&&(!client.engine.webkit||client.engin.webkit>=552)){
returnrefNode.contains(otherNode);
}elseif(tyepofrefNode.compareDocumentPosition=="function"){
return!!(refNode.compareDocumentPosition(otherNode)&16);
}else{
varnode=otherNode.parentNode;
do{
if(node===refNode){
Returntrue;
}else{
node=node.parentNode;
}
}while(node!==null);
returnfalse;
}
}
5.操作内容
①innerText属性
□可读取节点文档书中由浅入深的所有文本。
□通过inner.Text属性设置节点文本，会移除先前存在的所有子节点，完全改变了DOM树。
□赋给此属性的文本将自动进行HTML编码。
□Firefox不支持innerText，但支持作用类似的textContent属性。
□innerText：支持IE、Safari、Opera、Chrome
□textContent：支持Safari、Firefox、Opera、Chrome
兼容代码：
functiongetInnerText(element){
return(typeofelement.textContent=="string")?element.textContent:element.innerText;
}
functionsetInnerText(element,text){
if(typeofelement.textContent=="string"){
element.textContent=text;
}else{
element.innerText=text;
}
}
②innerHTML属性
□读取信息时，返回当前元素所有子节点的HTML表现。
□写入信息时，会按照指定的值创建新的DOM子树，并以该子树替换当前元素的所有子节点。
□innerHTML限制：插入<script>元素不会被执行。插入<style>也有类似问题。
□并不是所有元素都有innerHTML属性。不支持的元素有<col>、<colgroup>、<frameset>、<head>、<html>、<style>、<table>、<tbody>、<thead>、<tfoot>、<title>和<tr>。
③outerText属性
□与innerText基本相同，区别在于写入信息时，会替换包含节点
□Firefox不支持
□不建议使用。
④outerHTML属性
□与innerHTML基本相同，区别在于写入信息时，会替换包含节点。
□Firefox不支持
□不建议使用
⑤内存与性能问题
□innerText、innerHTML、outerText、outerHTML替换子节点可能会导致浏览器的内存问题。被删除的子树中的元素设置的事件处理程序或具有值为JS对象的属性，依旧存在于内存中。
□插入大量新HTML时，使用HTML要比通过多次DOM操作有效率得多。
三、DOM操作技术
1.动态脚本
①插入外部文件：
functionloadScript(url){
varscript=document.createElement("script");
script.type="text/javascript";
script.src=url;
document.body.appendChild(script);
}
②指定JavaScript代码方式
□IE中将<script>视为一个特殊元素，不允许DOM访问其子节点。
兼容方式：
functionloadScriptString(code){
varscript=document.createElement("script");
script.type="text/javascript";
try{
script.appendChild(document.createTextNode(code));
}catch(ex){
script.text=code;
}
document.body.appendChild(script);
}
2.动态样式
①外部链接
functionloadStyles(url){
varlink=document.createElement("link");
link.rel="stylesheet";
link.href=url;
varhead=document.getElementsByTagName("head")[0];
head.appendChild(link);
}
②使用<style>元素来包含嵌入式CSS
□IE将<style>视为一个特殊的、与<script>类似的节点，不允许访问其子节点。
□在重用一个<style>元素并再次设其styleSheet.cssText属性，有可能导致浏览器崩溃。
fucnctionloadStyleString(css){
varstyle=document.createElement("style");
style.type="text/css";
try{
style.appendChild(document.createTextNode(css));
}catch(ex){
style.styleSheet.cssText=css;
}
varhead=document.getElementsByTagName("head")[0];
head.appendChild(style);
}
3.操作表格
①为<table>元素添加的属性和方法
□caption：保存着对<caption>元素（如果有）地指针；
□tBodies：是一个<tobdy>元素的HTMLCollection;
□tFoot：保存着对<tfoot>元素（如果有）的指针；
□tHead：保存着对<thead>元素（如果有）的指针；
□rows：是一个表格中所有行的HTMLCollection；
□createTHead()：创建<thead>元素，将其放到表格中，返回引用。
□createCaption()：
□deleteTHead()：删除<thead>元素。
□deleteTFoot()：
□deleteCaption()：
□deleteRow(pos)：
□insertRow(pos)：向rows集合中指定位置插入一行。
②为<tbody>元素添加的属性和方法有：
□rows：保存着<tbody>元素中行的HTMLCollection。
□deleteRow(pos)：删除指定位置的行；
□insertRow(pos)：向rows集合中的指定位置插入一行，返回插入行的引用。
③为<tr>元素添加的属性和方法
□cells：保存着<tr>元素中单元格的HTMLCollection；
□deleteCell(pos)：删除指定位置的单元格。
□insertCell(pos)：向cells集合中指定位置插入一单元格，返回插入的单元格引用。
4.使用NodeList
□NodeList及其“近亲”NamedNodeMap（Element类型中的attribute属性）和HTMLCollection，这三个集合都是“动态的”，每当文档结构发生变化时，它们都会得到更新。
□尽量减少访问NodeList的次数。因每次访问NodeList，都会运行一次基于文档的查询。可考虑将从NodeList取得的值缓存起来。
标签：desclassstylelogcomsi使用it代码
1.对DOM的两个主要的扩展是SelectorsAPI（选择符API）和HTML5
2.SelectorsAPILevel1的核心是两个方法：querySelector()和querySelectorAll()。
3.querySelector()：方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。用法如下：
1//取得body元素
2varbody=document.querySelector("body");
3//取得ID为"myDiv"的元素
4varmyDiv=document.querySelector("#myDiv");
5//取得类为"selected"的第一个元素
6varselected=document.querySelector(".selected");
7//取得类为"button"的第一个图像元素
8varimg=document.body.querySelector("img.button");
通过Document类型调用querySelector()方法时，会在文档元素的范围内查找匹配的元素。而通过Element类型调用querySelector()方法时，只会在该元素后代元素的范围内查找匹配的元素。
querySelectorAll()：方法接收的参数与querySelector()方法一样，都是一个CSS选择符，但返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个NodeList的实例（一张快照，不是动态查询的结果）。如果没有找到匹配的元素，NodeList就是空的。
能够调用querySelectorAll()方法的类型包括Document、DocumentFragment和Element。
要取得返回的NodeList中的每一个元素，可以使用item()方法，例如：strongs.item(i)也可以使用方括号语法，例如：strong=strongs[i];
matchesSelector()：适用于Element类型，这个方法接收一个参数，即CSS选择符，如果调用元素与该选择符匹配，返回true；否则，返回false。例如：
1if(document.body.matchesSelector("body.page1")){
2//true
3}
在取得某个元素引用的情况下，使用这个方法能够方便地检测它是否会被querySelector()或querySelectorAll()方法返回。
元素遍历：对于元素间的空格，就会有在使用childNodes和firstChild等属性时的行为不一致。
childElementCount：返回子元素（不包括文本节点和注释）的个数。
firstElementChild：指向第一个子元素；firstChild的元素版。
lastElementChild：指向最后一个子元素；lastChild的元素版。
previousElementSibling：指向前一个同辈元素；previousSibling的元素版。
nextElementSibling：指向后一个同辈元素；nextSibling的元素版。
HTML5中的DOM扩展：
getElementsByClassName()：HTML5添加的getElementsByClassName()方法,接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的NodeList。传入多个类名时，类名的先后顺序不重要。例如：
1//取得所有类中包含"username"和"current"的元素，类名的先后顺序无所谓
2varallCurrentUsernames=document.getElementsByClassName("usernamecurrent");
3//取得ID为"myDiv"的元素中带有类名"selected"的所有元素
4varselected=document.getElementById("myDiv").getElementsByClassName("selected");
在document对象上调用getElementsByClassName()始终会返回与类名匹配的所有元素，在元素上调用该方法就只会返回后代元素中匹配的元素。
classList属性：HTML5新增了一种操作类名的方式，新集合类型DOMTokenList的实例。DOMTokenList有一个表示自己包含多少元素的length属性，而要取得每个元素可以使用item()方法，也可以使用方括号语法。此外，这个新类型还定义如下方法。
add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
remove(value)：从列表中删除给定的字符串。
toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。
使用方法如下：
1//删除"user"类
2//首先，取得类名字符串并拆分成数组
3varclassNames=div.className.split(/\s+/);
4//找到要删的类名
5varpos=-1,
6i,
7len;
8for(i=0,len=classNames.length;i<len;i++){
9if(classNames[i]=="user"){
10pos=i;
11break;
12}
13}
14//删除类名
15classNames.splice(i,1);
16//把剩下的类名拼成字符串并重新设置
17div.className=classNames.join("");
以上代码采用classList只用下面一行就可以了：div.classList.remove("user");
辅助管理DOM焦点的功能：
document.activeElement属性：这个属性始终会引用DOM中当前获得了焦点的元素。
元素获得焦点的方式有页面加载、用户输入（通常是通过按Tab键）和在代码中调用focus()方法。例如：
1varbutton=document.getElementById("myButton");
2button.focus();
3alert(document.activeElement===button);//true
默认情况下，文档刚刚加载完成时，document.activeElement中保存的是document.body元素的引用。文档加载期间，document.activeElement的值为null。
document.hasFocus()方法：新增的方法，这个方法用于确定文档是否获得了焦点。
1varbutton=document.getElementById("myButton");
2button.focus();
3alert(document.hasFocus());//true
文档中的元素button获得了焦点，这样就可以算作文档获得了焦点
HTMLDocument的变化：
readyState属性：Document的readyState属性有两个可能的值：
loading，正在加载文档；
complete，已经加载完文档。
检测页面的兼容模式就成为浏览器的必要功能。IE为此给document添加了一个名为compatMode的属性，这个属性就是为了告诉开发人员浏览器采用了哪种渲染模式。在标准模式下，document.compatMode的值等于"CSS1Compat"，而在混杂模式下，document.compatMode的值等于"BackCompat"。
document.head属性：用来引用文档的<head>元素，可以使用下面的方法，varhead=document.head||document.getElementsByTagName("head")[0];
字符集属性：
charset属性：示文档中实际使用的字符集，也可以用来指定新字符集。默认情况下，这个属性的值为"UTF-16"。但可以通过<meta>元素、响应头部或直接设置charset属性修改这个值。例如：alert(document.charset);//"UTF-16"document.charset="UTF-8";
defaultCharset属性：表示根据默认浏览器及操作系统的设置，当前文档默认的字符集应该是什么。如果文档没有使用默认的字符集，那charset和defaultCharset属性的值可能会不一样。
自定义属性：
HTML5规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以data-开头即可。添加了自定义属性之后，可以通过元素的dataset属性来访问自定义属性的值。dataset属性的值是DOMStringMap的一个实例，也就是一个名值对儿的映射。在这个映射中，每个data-name形式的属性都会有一个对应的属性，只不过属性名没有data-前缀（比如，自定义属性是data-myname，那映射中对应的属性就是myname）。例如：
1<divid="myDiv"data-appid="12345"data-myname="Nicholas"></div>
2vardiv=document.getElementById("myDiv");
3//取得自定义属性的值
4varappId=div.dataset.appId;
5varmyName=div.dataset.myname;
6//设置值
7div.dataset.appId=23456;
8div.dataset.myname="Michael";
插入标记：
innerHTML属性：在读模式下，innerHTML属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的HTML标记。在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。
不要指望所有浏览器返回的innerHTML值完全相同。
在写模式下，innerHTML的值会被解析为DOM子树，替换调用元素原来的所有子节点。因为它的值被认为是HTML，所以其中的所有标签都会按照浏览器处理HTML的标准方式转换为元素（同样，这里的转换结果也因浏览器而异）。
为innerHTML设置的包含HTML的字符串值与解析后innerHTML的值大不相同。例如设置如下：div.innerHTML="Hello&welcome,<b>\"reader\"!</b>";，解析之后的结果如下：<divid="content">Hello&welcome,<b>"reader"!</b></div>原因在于返回的字符串是根据原始HTML字符串创建的DOM树经过序列化之后的结果。
使用innerHTML属性也有一些限制。比如，在大多数浏览器中，通过innerHTML插入<script>元素并不会执行其中的脚本。
outerHTML属性：在读模式下，outerHTML返回调用它的元素及所有子节点的HTML标签。在写模式下，outerHTML会根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用元素。例如：
1<divid="content">
2<p>Thisisa<strong>paragraph</strong>withalistfollowingit.</p>
3<ul>
4<li>Item1</li>
5<li>Item2</li>
6<li>Item3</li>
7</ul>
8</div>
如果在<div>元素上调用outerHTML，会返回与上面相同的代码，包括<div>本身。不过，由于浏览器解析和解释HTML标记的不同，结果也可能会有所不同。
使用outerHTML属性以下面这种方式设置值：div.outerHTML="<p>Thisisaparagraph.</p>";结果，就是新创建的<p>元素会取代DOM树中的<div>元素。
insertAdjacentHTML()方法：接收两个参数：插入位置和要插入的HTML文本。第一个参数必须是下列值之一：
"beforebegin"，在当前元素之前插入一个紧邻的同辈元素；
"afterbegin"，在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；
"beforeend"，在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素；
"afterend"，在当前元素之后插入一个紧邻的同辈元素。
scrollIntoView()方法:scrollIntoView()可以在所有HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。如果给这个方法传入true作为参数，或者不传入任何参数，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。如果传入false作为参数，调用元素会尽可能全部出现在视口中，（可能的话，调用元素的底部会与视口顶部平齐。）不过顶部不一定平齐.
专有扩展：
文档模式
children属性：这个属性是HTMLCollection的实例，只包含元素中（同样还是元素）的子节点。即在元素只包含元素子节点时，children属性与childNodes没有什么区别。
contains()方法：调用contains()方法的应该是祖先节点，也就是搜索开始的节点，这个方法接收一个参数，即要检测的后代节点。如果被检测的节点是后代节点，该方法返回true；否则，返回false。
插入文本：
innertText属性可以操作元素中包含的所有文本内容，包括子文档树中的文本。在通过innerText读取值时，它会按照由浅入深的顺序，将子文档树中的所有文本拼接起来。在通过innerText写入值时，结果会删除元素的所有子节点，插入包含相应文本值的文本节点。例如：
1<divid="content">
2<p>Thisisa<strong>paragraph</strong>withalistfollowingit.</p>
3<ul>
4<li>Item1</li>
5<li>Item2</li>
6<li>Item3</li>
7</ul>
8</div>
9InnerTextExample01.ht
读取这个div的innerText的时候：返回Thisisaparagraphwithalistfollowingit.
Item1
Item2
Item3
使用innerText属性设置这个<div>元素的内容的时候：div.innerText="Helloworld!";，得到的页面的HTML的代码是<divid="content">Helloworld!</div>，设置该属性移除了先前存在的所有子节点，完全改变了DOM子树。
设置innerText永远只会生成当前节点的一个子文本节点，而为了确保只生成一个子文本节点，
就必须要对文本进行HTML编码。利用这一点，可以通过innerText属性过滤掉HTML标签。方法是
将innerText设置为等于innerText，这样就可以去掉所有HTML标签，例如：div.innerText=div.innerText;
outerText属性：作用范围扩大到了包含调用它的节点，在读取文本值时，outerText与innerText的结果完全一样。但在写模式下，outerText就完全不
同了：outerText不只是替换调用它的元素的子节点，而是会替换整个元素（包括子节点）。
滚动
尽管DOM作为API已经非常完善了，但为了实现更多的功能，仍然会有一些标准或专有的扩
展。2008年之前，浏览器中几乎所有的DOM扩展都是专有的。此后，W3C着手将一些已经
成为事实标准的专有扩展标准化并写入规范当中。
对DOM的两个主要的扩展是SelectorsAPI（选择符API）和HTML5。这两个扩展都源自开发社区，
而将某些常见做法及API标准化一直是众望所归。此外，还有一个不那么引人瞩目的ElementTraversal
（元素遍历）规范，为DOM添加了一些属性。虽然前述两个主要规范（特别是HTML5）已经涵盖了大
量的DOM扩展，但专有扩展依然存在。本章也会介绍专有的DOM扩展。
11.1
选择符API
众多JavaScript库中最常用的一项功能，就是根据CSS选择符选择与某个模式匹配的DOM元素。
实际上，jQuery（www.jquery.com）的核心就是通过CSS选择符查询DOM文档取得元素的引用，从而
抛开了getElementById()和getElementsByTagName()。
SelectorsAPI（www.w3.org/TR/selectors-api/）是由W3C发起制定的一个标准，致力于让浏览器原
生支持CSS查询。所有实现这一功能的JavaScript库都会写一个基础的CSS解析器，然后再使用已有的
DOM方法查询文档并找到匹配的节点。尽管库开发人员在不知疲倦地改进这一过程的性能，但到头来
都只能通过运行JavaScript代码来完成查询操作。而把这个功能变成原生API之后，解析和树查询操作
可以在浏览器内部通过编译后的代码来完成，极大地改善了性能。
SelectorsAPILevel1的核心是两个方法：querySelector()和querySelectorAll()。在兼容的浏
览器中，可以通过Document及Element类型的实例调用它们。目前已完全支持SelectorsAPILevel1
的浏览器有IE8+、Firefox3.5+、Safari3.1+、Chrome和Opera10+。
11.1.1querySelector()方法
querySelector()方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹
配的元素，返回null。请看下面的例子。
//取得body元素
varbody=document.querySelector("body");
//取得ID为"myDiv"的元素
varmyDiv=document.querySelector("#myDiv");
//取得类为"selected"的第一个元素
varselected=document.querySelector(".selected");
//取得类为"button"的第一个图像元素
varimg=document.body.querySelector("img.button");
通过Document类型调用querySelector()方法时，会在文档元素的范围内查找匹配的元素。而
通过Element类型调用querySelector()方法时，只会在该元素后代元素的范围内查找匹配的元素。
CSS选择符可以简单也可以复杂，视情况而定。如果传入了不被支持的选择符，querySelector()
会抛出错误。
11.1.2querySelectorAll()方法
querySelectorAll()方法接收的参数与querySelector()方法一样，都是一个CSS选择符，但
返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个NodeList的实例。
具体来说，返回的值实际上是带有所有属性和方法的NodeList，而其底层实现则类似于一组元素
的快照，而非不断对文档进行搜索的动态查询。这样实现可以避免使用NodeList对象通常会引起的大
多数性能问题。
只要传给querySelectorAll()方法的CSS选择符有效，该方法都会返回一个NodeList对象，
而不管找到多少匹配的元素。如果没有找到匹配的元素，NodeList就是空的。
与querySelector()类似，能够调用querySelectorAll()方法的类型包括Document、
DocumentFragment和Element。下面是几个例子。
//取得某<div>中的所有<em>元素（类似于getElementsByTagName("em")）
varems=document.getElementById("myDiv").querySelectorAll("em");
//取得类为"selected"的所有元素
varselecteds=document.querySelectorAll(".selected");
//取得所有<p>元素中的所有<strong>元素
varstrongs=document.querySelectorAll("pstrong");
要取得返回的NodeList中的每一个元素，可以使用item()方法，也可以使用方括号语法，比如：
vari,len,strong;
for(i=0,len=strongs.length;i<len;i++){
strong=strongs[i];//或者strongs.item(i)
strong.classname="important";
}
同样与querySelector()类似，如果传入了浏览器不支持的选择符或者选择符中有语法错误，
querySelectorAll()会抛出错误。
11.1.3matchesSelector()方法
SelectorsAPILevel2规范为Element类型新增了一个方法matchesSelector()。这个方法接收
一个参数，即CSS选择符，如果调用元素与该选择符匹配，返回true；否则，返回false。看例子。
if(document.body.matchesSelector("body.page1")){
//true
}
在取得某个元素引用的情况下，使用这个方法能够方便地检测它是否会被querySelector()或
querySelectorAll()方法返回。
截至2011年年中，还没有浏览器支持matchesSelector()方法；不过，也有一些实验性的实现。
IE9+通过msMatchesSelector()支持该方法，Firefox3.6+通过mozMatchesSelector()支持该方法，
Safari5+和Chrome通过webkitMatchesSelector()支持该方法。因此，如果你想使用这个方法，最
好是编写一个包装函数。
functionmatchesSelector(element,selector){
if(element.matchesSelector){
returnelement.matchesSelector(selector);
}elseif(element.msMatchesSelector){
returnelement.msMatchesSelector(selector);
}elseif(element.mozMatchesSelector){
returnelement.mozMatchesSelector(selector);
}elseif(element.webkitMatchesSelector){
returnelement.webkitMatchesSelector(selector);
}else{
thrownewError("Notsupported.");
}
}
if(matchesSelector(document.body,"body.page1")){
//执行操作
}
DOM的两个主要的扩展是SelectorsAPI(选择符API)和HTML5
11.1选择符API
根据CSS选择符选择与某个模式匹配的DOM元素，从而抛开getElementById(),getElementsByTagName_r()。
querySelector();//(SelectorsAPILevel1)接收一个CSS选择符，返回与该模式匹配的第一元素，如果没有找到匹配的元素就返回null。
querySelectorAll();//(SelectorsAPILevel1)返回的是所有匹配的元素，是一个NodeList的实例，结果不是动态的
matchesSelector();//(SelectorsAPILevel2,目前还没有浏览器支持)，接收一个CSS选择符，如果调用元素与该选择符匹配，返回true,反之false
11.2元素遍历(ElementTraversal)
childElementCount//返回子元素(不包括文本节点和注释)的个数
firstElementChild,lastElementChild,previousElementSibing,nextElementSibling//针对Element类型
11.3HTML5
getElementsByClassName();//通过document或所有HTML元素调用该方法
classList//所有元素新增该属性，是新集合类型DOMTokenList的实例,length,add(value),contains(value),remove(value),toggle(value)
document.activeElement//该属性始终会引用DOM中当前获得了焦点的元素
document.hasFocus()//用于确定文档是否获得了焦点
document.readyState//loading(正在加载文档),complete(已经加载完文档)
document.compatMode//CSS1Compat(标准模式),BackCompat(混杂模式)
document.head//
document.charset//表示文档中实际使用的字符集
document.defaultCharset//根据默认浏览器及操作系统的设置，当前文档默认的字符集
dataset//可为元素添加非标准、前缀为'data-'的属性，通过元素的dataset属性来访问，其为DOMStringMap的实例
innerHTML//调用元素的所有子节点(包括元素、注释和文本节点)对应的HTML标签
outerHTML//调用元素及所有子节点的HTML标签
insertAdjacentHTML()//接收两个参数：插入位置和要插入的HTML文本
scrollIntoView()//可以在所有HTML元素上调用该方法，调用元素出现在视口中。
11.4专有扩展
IE的文档模式,document.documentMode
children属性//元素中还是元素的子节点
contains();//判断某节点是不是另一个节点的后代，document.documentElement.contains(document.body)
compareDocumentPosition();//DOM3,也能确定节点间的关系
innerText,outerText属性,
textContent属性//DOM3，同innerText
scrollIntoViewIfNeeded(alignCenter),scrollByLines(lineCount),scrollByPages(pageCount)