雖然DOM為與XML及HTML文檔交互制定了一系列核心API弊仪，但仍然有幾個規(guī)范對標(biāo)準(zhǔn)的DOM進行了擴展汰寓。這些擴展中有很多原來是瀏覽器專有的菊碟，但后來成為了事實標(biāo)準(zhǔn)裕照，于是其他瀏覽器也都提供了相同的實現(xiàn)攒发。
一、選擇符API
眾多JavaScript庫中最常用的一項功能晋南，就是根據(jù)CSS選擇符選擇與某個模式匹配的DOM元素惠猿。jQuery（www.jquery.com）的核心就是通過CSS選擇符查詢DOM文檔取得元素的引用，從而拋開了getElementById()和getElementsByTagName()负间。
所有實現(xiàn)這一功能的JavaScript庫都會寫一個基礎(chǔ)的CSS解析器偶妖，然后再使用已有的DOM方法查詢文檔并找到匹配的節(jié)點。而把這個功能變成原生API之后政溃，解析和樹查詢操作可以在瀏覽器內(nèi)部通過編譯后的代碼來完成趾访，極大地改善了性能。
querySelector()方法
querySelector()方法接收一個CSS選擇符（字符串）董虱，返回與該模式匹配的第一個元素扼鞋，如果沒有找到匹配的元素，返回null。
//取得body 元素
var body = document.querySelector("body");
//取得ID 為"myDiv"的元素
var myDiv = document.querySelector("#myDiv");
//取得類為"selected"的第一個元素
var selected = document.querySelector(".selected");
//取得類為"button"的第一個圖像元素
var img = document.body.querySelector("img.button");
通過Document類型調(diào)用querySelector()方法時藏鹊，會在文檔元素的范圍內(nèi)查找匹配的元素润讥。而通過Element類型調(diào)用querySelector()方法時，只會在該元素后代元素的范圍內(nèi)查找匹配的元素盘寡。如果傳入了不被支持的選擇符楚殿，querySelector()會拋出錯誤。
querySelectorAll()方法
querySelectorAll()方法接收的參數(shù)與querySelector()方法一樣竿痰，都是一個CSS選擇符脆粥，但返回的是所有匹配的元素而不僅僅是一個元素。返回的值實際上是帶有所有屬性和方法的NodeList影涉，而其底層實現(xiàn)則類似于一組元素的快照变隔，而非不斷對文檔進行搜索的動態(tài)查詢，不是動態(tài)的蟹倾。這樣實現(xiàn)可以避免使用NodeList對象通常會引起的大多數(shù)性能問題匣缘。如果沒有找到匹配的元素，NodeList就是空的鲜棠。如果傳入了不被支持的選擇符肌厨，querySelectorAll()會拋出錯誤。
要取得返回的NodeList中的每一個元素豁陆，可以使用item()方法柑爸，也可以使用方括號語法。NodeList[i]或者NodeList.item(i)
二盒音、元素遍歷
對于元素間的空格表鳍，IE9 及之前版本不會返回文本節(jié)點，而其他所有瀏覽器都會返回文本節(jié)點祥诽。這樣譬圣，就導(dǎo)致了在使用childNodes和firstChild等屬性時的行為不一致。為了彌補這一差異原押，而同時又保持DOM規(guī)范不變胁镐，因此新定義了一組屬性，從而可以更方便地查找DOM元素了诸衔。
-
childElementCount：返回子元素（不包括文本節(jié)點和注釋）的個數(shù)盯漂。 -
firstElementChild：指向第一個子元素；firstChild的元素版笨农。 -
lastElementChild：指向最后一個子元素就缆；lastChild的元素版。 -
previousElementSibling：指向前一個同輩元素谒亦；previousSibling的元素版竭宰。 -
nextElementSibling：指向后一個同輩元素空郊；nextSibling的元素版。
三切揭、HTML5與DOM 節(jié)點相關(guān)部分
與類相關(guān)的擴充
1狞甚、getElementsByClassName()方法
該方法接收一個參數(shù)，即一個包含一或多個類名的字符串廓旬，返回帶有指定類的所有元素的NodeList哼审。傳入多個類名時，類名的先后順序不重要孕豹。
//取得所有類中包含"username"和"current"的元素涩盾，類名的先后順序無所謂
var allCurrentUsernames = document.getElementsByClassName("username current");
//取得ID 為"myDiv"的元素中帶有類名"selected"的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected");
在document對象上調(diào)用getElementsByClassName()始終會返回與類名匹配的所有元素，在元素上調(diào)用該方法就只會返回后代元素中匹配的元素励背。因為返回的對象是NodeList春霍，所以使用這個方法與使用getElementsByTagName()以及其他返回NodeList的DOM方法都具有同樣的性能問題。
2叶眉、classList 屬性
在操作類名時址儒，需要通過className屬性添加、刪除和替換類名竟闪。因為className中是一個字符串离福，所以即使只修改字符串一部分杖狼，也必須每次都設(shè)置整個字符串的值炼蛤。
因此，HTML5為所有元素添加了classList屬性蝶涩。這個classList屬性是新集合類型DOMTokenList的實例理朋。與其他DOM集合類似，DOMTokenList有一個表示己包含多少元素的length屬性绿聘，而要取得每個元素可以使用item()方法嗽上，也可以使用方括號語法。此外熄攘，這個新類型還定義如下方法兽愤。
-
add(value)：將給定的字符串值添加到列表中。如果值已經(jīng)存在挪圾，就不添加了浅萧。 -
contains(value)：表示列表中是否存在給定的值，如果存在則返回true哲思，否則返回false洼畅。 -
remove(value)：從列表中刪除給定的字符串。 -
toggle(value)：如果列表中已經(jīng)存在給定的值棚赔，刪除它帝簇；如果列表中沒有給定的值徘郭，添加它。
//刪除"disabled"類
oDiv.classList.remove("disabled");
//添加"current"類
oDiv.classList.add("current");
//切換"user"類
oDiv.classList.toggle("user");
//確定元素中是否包含既定的類名
if (oDiv.classList.contains("bd") && !oDiv.classList.contains("disabled")){
//執(zhí)行操作
)
//迭代類名
for (var i=0, len=div.classList.length; i < len; i++){
doSomething(div.classList[i]);
}
焦點管理
HTML5也添加了輔助管理DOM焦點的功能丧肴。首先就是document.activeElement屬性残揉，這個屬性始終會引用DOM中當(dāng)前獲得了焦點的元素。元素獲得焦點的方式有頁面加載芋浮、用戶輸入（通常是通過按Tab鍵）和在代碼中調(diào)用focus()方法冲甘。
var button = document.getElementById("myButton");
button.focus();
if(document.activeElement === button){
// 當(dāng)前獲取的焦點是button時 需要做的操作
}
默認(rèn)情況下，文檔剛剛加載完成時途样，document.activeElement中保存的是document.body元素的引用江醇。文檔加載期間，document.activeElement的值為null何暇。
另外就是新增了document.hasFocus()方法陶夜，這個方法用于確定文檔(頁面)是否獲得了焦點。
var button = document.getElementById("myButton");
button.focus();
alert(document.hasFocus()); //true
通過檢測文檔是否獲得了焦點裆站，可以知道用戶是不是正在與頁面交互条辟。
HTMLDocument的變化
1、readyState屬性
Document的readyState屬性有兩個可能的值：
-
"loading"宏胯，正在加載文檔羽嫡； -
"complete"，已經(jīng)加載完文檔肩袍。
使用document.readyState的最恰當(dāng)方式杭棵，就是通過它來實現(xiàn)一個指示文檔已經(jīng)加載完成的指示器。在這個屬性得到廣泛支持之前氛赐，要實現(xiàn)這樣一個指示器魂爪，必須借助onload事件處理程序設(shè)置一個標(biāo)簽，表明文檔已經(jīng)加載完畢艰管。document.readyState 屬性的基本用法如下滓侍。
if (document.readyState == "complete"){
//執(zhí)行操作
}
2、兼容模式
自從IE6 開始區(qū)分渲染頁面的模式是標(biāo)準(zhǔn)的還是混雜的牲芋，檢測頁面的兼容模式就成為瀏覽器的必要功能撩笆。IE 為此給document添加了一個名為compatMode的屬性，這個屬性就是為了告訴開發(fā)人員瀏覽器采用了哪種渲染模式缸浦。在標(biāo)準(zhǔn)模式下夕冲，document.compatMode 的值等于"CSS1Compat"，而在混雜模式下餐济，document.compatMode的值等于"BackCompat"耘擂。
3、head 屬性
作為對document.body引用文檔的<body>元素的補充絮姆，HTML5新增了document.head屬性醉冤，引用文檔的<head>元素秩霍。要引用文檔的<head>元素，可以結(jié)合使用這個屬性和另一種后備方法蚁阳。
var head = document.head || document.getElementsByTagName("head")[0];
// 實現(xiàn)document.head 屬性的瀏覽器包括Chrome 和Safari 5铃绒。
字符集屬性
HTML5 新增了幾個與文檔字符集有關(guān)的屬性。其中螺捐，charset屬性表示文檔中實際使用的字符集颠悬，也可以用來指定新字符集。默認(rèn)情況下定血，這個屬性的值為"UTF-16"赔癌，但可以通過<meta>元素、響應(yīng)頭部或直接設(shè)置charset屬性修改這個值澜沟。
alert(document.charset); //"UTF-16"
document.charset = "UTF-8";
自定義數(shù)據(jù)屬性
HTML5規(guī)定可以為元素添加非標(biāo)準(zhǔn)的屬性灾票，但要添加前綴data-，目的是為元素提供與渲染無關(guān)的信息茫虽，或者提供語義信息刊苍。這些屬性可以任意添加、隨便命名濒析，只要以data-開頭即可正什。
添加了自定義屬性之后，可以通過元素的dataset屬性來訪問自定義屬性的值号杏。dataset屬性的值是DOMStringMap的一個實例婴氮，也就是一個名值對兒的映射。在這個映射中馒索，每個data-name形式的屬性都會有一個對應(yīng)的屬性莹妒，只不過屬性名沒有data-前綴（比如，自定義屬性是data-myname，那映射中對應(yīng)的屬性就是myname）堕仔。
HTML
<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>
JS
var div = document.getElementById("myDiv");
//取得自定義屬性的值
var appId = div.dataset.appId;
var myName = div.dataset.myname;
//設(shè)置值
div.dataset.appId = 23456;
div.dataset.myname = "Michael";
//有沒有"myname"值呢喧半？
if (div.dataset.myname){
alert("Hello, " + div.dataset.myname);
}
插入標(biāo)記
1.、innerHTML 屬性
在讀模式下袖瞻，innerHTML 屬性返回與調(diào)用元素的所有子節(jié)點（包括元素、注釋和文本節(jié)點）對應(yīng)的HTML 標(biāo)記。在寫模式下百揭，innerHTML 會根據(jù)指定的值創(chuàng)建新的DOM樹，然后用這個DOM樹完全替換調(diào)用元素原先的所有子節(jié)點蜓席。器一。如果設(shè)置的值僅是文本而沒有HTML標(biāo)簽，那么結(jié)果就是設(shè)置純文本厨内，設(shè)置innerHTML 之后祈秕，可以像訪問文檔中的其他節(jié)點一樣訪問新創(chuàng)建的節(jié)點渺贤。
使用innerHTML屬性也有一些限制。比如请毛，在大多數(shù)瀏覽器中志鞍，通過innerHTML插入<script>元素并不會執(zhí)行其中的腳本。IE8及更早版本是唯一能在這種情況下執(zhí)行腳本的瀏覽器方仿，但必須滿足一些條件固棚。一是必須為<script>元素指定defer屬性，二是<script>元素必須位于（微軟所謂的）“有作用域的元素”（scoped element）之后仙蚜。<script>元素被認(rèn)為是“無作用域的元素”（NoScope element）此洲，也就是在頁面中看不到的元素，與<style>元素或注釋類似委粉。如果通過innerHTML插入的字符串開頭就是一個“無作用域的元素”黍翎，那么IE 會在解析這個字符串前先刪除該元素。換句話說艳丛，以下代碼達(dá)不到目的：
div.innerHTML = "<script defer>alert('hi');<\/script>"; //無效
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>";
第一行代碼會在<script>元素前插入一個文本節(jié)點匣掸。事后，為了不影響頁面顯示氮双，你可能需要移除這個文本節(jié)點div.removeChild(div.firstChild);
第二行代碼采用的方法類似碰酝，只不過使用的是一個包含非換行空格的<div>元素。如果僅僅插入一個空的<div>元素戴差，還是不行送爸；必須要包含一點兒內(nèi)容，瀏覽器才會創(chuàng)建文本節(jié)點暖释。同樣袭厂，為了不影響頁面布局，恐怕還得移除這個節(jié)點球匕。
第三行代碼使用的是一個隱藏的<input>域纹磺，也能達(dá)到相同的效果。不過亮曹，由于隱藏的<input>域不影響頁面布局橄杨，因此這種方式在大多數(shù)情況下都是首選。
但在IE8 及更早版本中照卦，<style>也是一個“沒有作用域的元素”式矫，因此必須像下面這樣給它前置一個“有作用域的元素”：
div.innerHTML = "_<style type=\"text/css\">body {background-color: red; }</style>";
div.removeChild(div.firstChild);
2、outerHTML屬性
在讀模式下役耕，outerHTML返回調(diào)用它的元素(包含調(diào)用元素本身)以及所有子節(jié)點的HTML標(biāo)簽采转。在寫模式下，outerHTML會根據(jù)指定的HTML字符串創(chuàng)建新的DOM子樹瞬痘，然后用這個DOM子樹完全替換調(diào)用元素故慈。
div.outerHTML = "<p>This is a paragraph.</p>";
// p元素會完全替換div元素
等同于
var p = document.createElement("p");
p.appendChild(document.createTextNode("This is a paragraph."));
div.parentNode.replaceChild(p, div);
3板熊、insertAdjacentHTML()方法
將指定的文本解析為HTML或XML，并將結(jié)果節(jié)點插入到DOM樹中的指定位置惯悠。它不會重新解析它正在使用的元素邻邮，因此它不會破壞元素內(nèi)的現(xiàn)有元素。這避免了額外的序列化步驟克婶，使其比直接innerHTML操作更快筒严。
它接收兩個參數(shù)：插入位置和要插入的HTML文本。第一個參數(shù)必須是下列值之一：
-
"beforebegin"情萤，在當(dāng)前元素之前插入一個緊鄰的同輩元素鸭蛙； -
"afterbegin"，在當(dāng)前元素之下插入一個新的子元素或在第一個子元素之前再插入新的子元素筋岛； -
"beforeend"娶视，在當(dāng)前元素之下插入一個新的子元素或在最后一個子元素之后再插入新的子元素； -
"afterend"睁宰，在當(dāng)前元素之后插入一個緊鄰的同輩元素肪获。
//作為前一個同輩元素插入
element.insertAdjacentHTML("beforebegin", "<p>Hello world!</p>");
//作為第一個子元素插入
element.insertAdjacentHTML("afterbegin", "<p>Hello world!</p>");
//作為最后一個子元素插入
element.insertAdjacentHTML("beforeend", "<p>Hello world!</p>");
//作為后一個同輩元素插入
element.insertAdjacentHTML("afterend", "<p>Hello world!</p>");
4、內(nèi)存與性能問題
在刪除帶有事件處理程序或引用了其他JavaScript對象子樹時柒傻，就有可能導(dǎo)致內(nèi)存占用問題孝赫。假設(shè)某個元素有一個事件處理程序（或者引用了一個JavaScript對象作為屬性），在使用前述innerHTML红符、outerHTML屬性將該元素從文檔樹中刪除后青柄，元素與事件處理程序（或JavaScript對象）之間的綁定關(guān)系在內(nèi)存中并沒有一并刪除。如果這種情況頻繁出現(xiàn)预侯，頁面占用的內(nèi)存數(shù)量就會明顯增加致开。因此，在使用innerHTML萎馅、outerHTML 屬性和insertAdjacentHTML()方法時双戳，最好先手工刪除要被替換的元素的所有事件處理程序和JavaScript對象屬性
不可避免地，創(chuàng)建和銷毀HTML解析器也會帶來性能損失校坑，所以最好能夠?qū)⒃O(shè)置innerHTML或outerHTML的次數(shù)控制在合理的范圍內(nèi)拣技，所以要盡量避免下面這種操作。
for (var i=0, len=values.length; i < len; i++){
ul.innerHTML += "<li>" + values[i] + "</li>"; //要避免這種頻繁操作ＫＤ俊！
}
可以先將單獨構(gòu)建字符串徐绑，之后一次把結(jié)果字符串賦值給innerHTML
var itemsHtml = "";
for (var i=0, len=values.length; i < len; i++){
itemsHtml += "<li>" + values[i] + "</li>";
}
ul.innerHTML = itemsHtml;
// 這個例子的效率要高得多邪驮，因為它只對innerHTML 執(zhí)行了一次賦值操作。
scrollIntoView()方法
scrollIntoView()可以在所有HTML元素上調(diào)用傲茄，通過滾動瀏覽器窗口或某個容器元素毅访，調(diào)用元素就可以出現(xiàn)在視口中沮榜。如果給這個方法傳入true作為參數(shù)，或者不傳入任何參數(shù)喻粹，那么窗口滾動之后會讓調(diào)用元素的頂部與視口頂部盡可能平齊蟆融。如果傳入false作為參數(shù)，調(diào)用元素會盡可能全部出現(xiàn)在視口中守呜，（可能的話型酥，調(diào)用元素的底部會與視口頂部平齊。）不過頂部不一定平齊查乒。
//讓元素可見
document.forms[0].scrollIntoView();
四弥喉、專有擴展
雖然所有瀏覽器開發(fā)商都知曉堅持標(biāo)準(zhǔn)的重要性，但在發(fā)現(xiàn)某項功能缺失時玛迄，這些開發(fā)商都會一如既往地向DOM中添加專有擴展由境，以彌補功能上的不足。表面上看蓖议，這種各行其事的做法似乎不太好虏杰，但實際上專有擴展為Web開發(fā)領(lǐng)域提供了很多重要的功能，這些功能最終都在HTML5規(guī)范中得到了標(biāo)準(zhǔn)化勒虾。即便如此纺阔，仍然還有大量專有的DOM擴展沒有成為標(biāo)準(zhǔn)，（并不是說明它們將來不會被寫進標(biāo)準(zhǔn)）
1从撼、文檔模式
IE8引入了一個新的概念叫“文檔模式”（document mode）州弟。頁面的文檔模式?jīng)Q定了可以使用什么功能。換句話說低零，文檔模式?jīng)Q定了你可以使用哪個級別的CSS婆翔，可以在JavaScript中使用哪些API，以及如何對待文檔類型（doctype）掏婶。到了IE9啃奴，總共有以下4 種文檔模式。
-
IE5：以混雜模式渲染頁面（IE5 的默認(rèn)模式就是混雜模式）雄妥。IE8 及更高版本中的新功能都無法使用最蕾。 -
IE7：以IE7 標(biāo)準(zhǔn)模式渲染頁面。IE8 及更高版本中的新功能都無法使用老厌。 -
IE8：以IE8 標(biāo)準(zhǔn)模式渲染頁面瘟则。IE8 中的新功能都可以使用，因此可以使用Selectors API枝秤、更多CSS2 級選擇符和某些CSS3 功能醋拧，還有一些HTML5 的功能。不過IE9 中的新功能無法使用。 -
IE9：以IE9 標(biāo)準(zhǔn)模式渲染頁面丹壕。IE9 中的新功能都可以使用庆械，比如ECMAScript 5、完整的CSS3以及更多HTML5 功能菌赖。這個文檔模式是最高級的模式缭乘。
要強制瀏覽器以某種模式渲染頁面，可以使用HTTP頭部信息X-UA-Compatible琉用，或通過等價的<meta>標(biāo)簽來設(shè)置：
比如堕绩，要想讓文檔模式像在IE7 中一樣，可以使用下面這行代碼：
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
如果不打算考慮文檔類型聲明辕羽，而直接使用IE7 標(biāo)準(zhǔn)模式逛尚，那么可以使用下面這行代碼：
<meta http-equiv="X-UA-Compatible" content="IE=7">
這里IE的版本（IEVersion）有以下一些不同的值。
-
Edge：始終以最新的文檔模式來渲染頁面刁愿。忽略文檔類型聲明绰寞。對于IE8，始終保持以IE8 標(biāo)準(zhǔn)模式渲染頁面铣口。對于IE9滤钱，則以IE9 標(biāo)準(zhǔn)模式渲染頁面。 -
EmulateIE9：如果有文檔類型聲明脑题，則以IE9 標(biāo)準(zhǔn)模式渲染頁面件缸，否則將文檔模式設(shè)置為IE5。 -
EmulateIE8：如果有文檔類型聲明叔遂，則以IE8 標(biāo)準(zhǔn)模式渲染頁面他炊，否則將文檔模式設(shè)置為IE5。 -
EmulateIE7：如果有文檔類型聲明已艰，則以IE7 標(biāo)準(zhǔn)模式渲染頁面痊末，否則將文檔模式設(shè)置為IE5。 -
9：強制以IE9 標(biāo)準(zhǔn)模式渲染頁面哩掺，忽略文檔類型聲明凿叠。 -
8：強制以IE8 標(biāo)準(zhǔn)模式渲染頁面，忽略文檔類型聲明嚼吞。 -
7：強制以IE7 標(biāo)準(zhǔn)模式渲染頁面盒件，忽略文檔類型聲明。 -
5：強制將文檔模式設(shè)置為IE5舱禽，忽略文檔類型聲明炒刁。
通過document.documentMode屬性可以知道給定頁面使用的是什么文檔模式。這個屬性是IE8中新增的誊稚，它會返回使用的文檔模式的版本號（在IE9 中切心，可能返回的版本號為5飒筑、7片吊、8绽昏、9）：
var mode = document.documentMode;
知道頁面采用的是什么文檔模式，有助于理解頁面的行為方式俏脊。無論在什么文檔模式下全谤，都可以訪問這個屬性。
2爷贫、contains()方法
在實際開發(fā)中认然，經(jīng)常需要知道某個節(jié)點是不是另一個節(jié)點的后代。IE為此率先引入了contains()方法漫萄，以便不通過在DOM文檔樹中查找即可獲得這個信息卷员。調(diào)用contains()方法的應(yīng)該是祖先節(jié)點，也就是搜索開始的節(jié)點腾务，這個方法接收一個參數(shù)毕骡，即要檢測的后代節(jié)點。如果被檢測的節(jié)點是后代節(jié)點岩瘦，該方法返回true未巫；否則，返回false启昧。
alert(document.documentElement.contains(document.body)); //true
這個例子測試了<body>元素是不是<html>元素的后代叙凡，在格式正確的HTML頁面中，以上代碼返回true密末。
3握爷、插入文本
前面介紹過，IE 原來專有的插入標(biāo)記的屬性innerHTML和outerHTML已經(jīng)被HTML5納入規(guī)范严里。但另外兩個插入文本的專有屬性則沒有這么好的運氣新啼。這兩個沒有被HTML5看中的屬性是innerText和outerText。
-
innerText屬性
通過innertText屬性可以操作元素中包含的所有文本內(nèi)容田炭，包括子文檔樹中的文本师抄。在通過innerText讀取值時，它會按照由淺入深的順序教硫，將子文檔樹中的所有文本拼接起來叨吮。在通過innerText寫入值時，結(jié)果會刪除元素的所有子節(jié)點瞬矩，插入包含相應(yīng)文本值的文本節(jié)點茶鉴。
設(shè)置innerText屬性移除了先前存在的所有子節(jié)點，完全改變了DOM子樹景用。此外涵叮，設(shè)置innerText屬性的同時惭蹂，也對文本中存在的HTML語法字符（小于號、大于號割粮、引號及和號）進行了編碼盾碗。再看一個例子。
div.innerText = "Hello & welcome, <b>\"reader\"!</b>";
會得到以下dom樹
<div id="content">Hello & welcome, <b>"reader"!</b></div>
設(shè)置innerText永遠(yuǎn)只會生成當(dāng)前節(jié)點的一個子文本節(jié)點舀瓢，而為了確保只生成一個子文本節(jié)點廷雅，就必須要對文本進行HTML編碼（因為可能字符串會包含HTML的標(biāo)簽，這樣可能會生成子元素京髓，所以要進行HTML編碼）航缀。利用這一點，可以通過innerText屬性過濾掉HTML 標(biāo)簽堰怨。方法是將innerText設(shè)置為等于innerText芥玉，這樣就可以去掉所有HTML標(biāo)簽（因為innerText屬性讀的時候會拿到元素中所有的文檔內(nèi)容并拼接起來，這樣即使有HTML標(biāo)簽被插入了备图，在讀的時候也會被過濾掉灿巧，然后在賦值。）
// HTML
<div class="oDiv">
"Hello & welcome, <b>\"reader\"!</b>"
</div>
// JS
var oDiv = document.getElementsByClassName('oDiv')[0];
console.log(oDiv.innerText); // "Hello & welcome, \"reader\"!";
oDiv.innerText = oDiv.innerText; ;
-
outerText屬性
在讀取文本值時诬烹，outerText與innerText的結(jié)果完全一樣砸烦。但在寫模式下，outerText就完全不同了：outerText不只是替換調(diào)用它的元素的子節(jié)點绞吁，而是會替換整個元素（包括子節(jié)點）幢痘。
div.outerText = "Hello world!";
等同于
var text = document.createTextNode("Hello world!");
div.parentNode.replaceChild(text, div);
由于這個屬性會導(dǎo)致調(diào)用它的元素不存在，因此并不常用家破。也建議盡可能不要使用這個屬性颜说。
4、滾動
如前所述汰聋，HTML5之前的規(guī)范并沒有就與頁面滾動相關(guān)的API做出任何規(guī)定门粪。但HTML5在將scrollIntoView()納入規(guī)范之后，仍然還有其他幾個專有方法可以在不同的瀏覽器中使用烹困。下面列出的幾個方法都是對HTMLElement類型的擴展玄妈，因此在所有元素中都可以調(diào)用。
scrollIntoViewIfNeeded(alignCenter)：只在當(dāng)前元素在視口中不可見的情況下髓梅，才滾動瀏覽器窗口或容器元素拟蜻，最終讓它可見。如果當(dāng)前元素在視口中可見枯饿，這個方法什么也不做酝锅。如果將可選的alignCenter參數(shù)設(shè)置為true，則表示盡量將元素顯示在視口中部（垂直方向）奢方。Safari 和Chrome 實現(xiàn)了這個方法搔扁。scrollByLines(lineCount)：將元素的內(nèi)容滾動指定的行高爸舒，lineCount值可以是正值，也可以是負(fù)值稿蹲。Safari 和Chrome 實現(xiàn)了這個方法扭勉。scrollByPages(pageCount)：將元素的內(nèi)容滾動指定的頁面高度，具體高度由元素的高度決定场绿。Safari 和Chrome 實現(xiàn)了這個方法剖效。
希望大家要注意的是，
scrollIntoView()和scrollIntoViewIfNeeded()的作用對象是元素的容器焰盗，而scrollByLines()和scrollByPages()影響的則是元素自身。
//在當(dāng)前元素不可見的時候咒林，讓它進入瀏覽器的視口
document.images[0].scrollIntoViewIfNeeded();
//將頁面主體往回滾動1 頁
document.body.scrollByPages(-1);
