dom

Javascript操作DOM常用API總結(jié)

Posted on <time itemprop="dateCreated" datetime="2015-11-30T23:46:59+08:00" content="2015-11-30">2015-11-30 </time> | In Javascript |

</header>

本文地址：http://luopq.com/2015/11/30/javascript-dom/碎节，轉(zhuǎn)載請(qǐng)注明

文本整理了javascript操作DOM的一些常用的api链快，根據(jù)其作用整理成為創(chuàng)建，修改，查詢等多種類型的api爵憎，主要用于復(fù)習(xí)基礎(chǔ)知識(shí)，加深對(duì)原生js的認(rèn)識(shí)魏宽。

基本概念

在講解操作DOM的api之前庶灿，首先我們來(lái)復(fù)習(xí)一下一些基本概念，這些概念是掌握api的關(guān)鍵女阀，必須理解它們宅荤。

Node類型

DOM1級(jí)定義了一個(gè)Node接口，該接口由DOM中所有節(jié)點(diǎn)類型實(shí)現(xiàn)浸策。這個(gè)Node接口在JS中是作為Node類型實(shí)現(xiàn)的冯键。在IE9以下版本無(wú)法訪問(wèn)到這個(gè)類型，JS中所有節(jié)點(diǎn)都繼承自Node類型庸汗，都共享著相同的基本屬性和方法惫确。
Node有一個(gè)屬性nodeType表示Node的類型，它是一個(gè)整數(shù)蚯舱，其數(shù)值分別表示相應(yīng)的Node類型改化，具體如下：
Node.ELEMENT_NODE:1
Node.ATTRIBUTE_NODE:2
Node.TEXT_NODE:3
Node.CDATA_SECTION_NODE:4
Node.ENTITY_REFERENCE_NODE:5
Node.ENTITY_NODE:6
Node.PROCESSING_INSTRUCTION_NODE:7
Node.COMMENT_NODE:8
Node.DOCUMENT_NODE:9
Node.DOCUMENT_TYPE_NODE:10
Node.DOCUMENT_FRAGMENT_NODE:11
Node.NOTATION_NODE:12
假設(shè)我們要判斷一個(gè)Node是不是元素，我們可以這樣判斷

<pre style="overflow: auto; font-family: "PT Mono", Consolas, Monaco, Menlo, monospace; font-size: 13px; background: rgb(29, 31, 33); margin: 0px; padding: 0px; color: rgb(197, 200, 198); line-height: 1.6; border: none;">if(someNode.nodeType == 1){
console.log("Node is a element");
}
</pre>

這些Node類型中枉昏，我們最常用的就是element陈肛，text，attribute兄裂，comment句旱，document，document_fragment這幾種類型晰奖。
我們簡(jiǎn)單來(lái)介紹一下這幾種類型：

Element類型

Element提供了對(duì)元素標(biāo)簽名谈撒，子節(jié)點(diǎn)和特性的訪問(wèn)，我們常用HTML元素比如div匾南，span啃匿，a等標(biāo)簽就是element中的一種。Element有下面幾條特性：
（1）nodeType為1
（2）nodeName為元素標(biāo)簽名，tagName也是返回標(biāo)簽名
（3）nodeValue為null
（4）parentNode可能是Document或Element
（5）子節(jié)點(diǎn)可能是Element溯乒，Text夹厌，Comment，Processing_Instruction橙数，CDATASection或EntityReference

Text類型

Text表示文本節(jié)點(diǎn)尊流，它包含的是純文本內(nèi)容，不能包含html代碼灯帮，但可以包含轉(zhuǎn)義后的html代碼崖技。Text有下面的特性：
（1）nodeType為3
（2）nodeName為#text
（3）nodeValue為文本內(nèi)容
（4）parentNode是一個(gè)Element
（5）沒(méi)有子節(jié)點(diǎn)

Attr類型

Attr類型表示元素的特性，相當(dāng)于元素的attributes屬性中的節(jié)點(diǎn)钟哥，它有下面的特性：
（1）nodeType值為2
（2）nodeName是特性的名稱
（3）nodeValue是特性的值
（4）parentNode為null

Comment類型

Comment表示HTML文檔中的注釋迎献，它有下面的幾種特征：
（1）nodeType為8
（2）nodeName為#comment
（3）nodeValue為注釋的內(nèi)容
（4）parentNode可能是Document或Element
（5）沒(méi)有子節(jié)點(diǎn)

Document

Document表示文檔，在瀏覽器中腻贰，document對(duì)象是HTMLDocument的一個(gè)實(shí)例吁恍，表示整個(gè)頁(yè)面，它同時(shí)也是window對(duì)象的一個(gè)屬性播演。Document有下面的特性：
（1）nodeType為9
（2）nodeName為#document
（3）nodeValue為null
（4）parentNode為null
（5）子節(jié)點(diǎn)可能是一個(gè)DocumentType或Element

DocumentFragment類型

DocumentFragment是所有節(jié)點(diǎn)中唯一一個(gè)沒(méi)有對(duì)應(yīng)標(biāo)記的類型冀瓦，它表示一種輕量級(jí)的文檔，可能當(dāng)作一個(gè)臨時(shí)的倉(cāng)庫(kù)用來(lái)保存可能會(huì)添加到文檔中的節(jié)點(diǎn)写烤。DocumentFragment有下面的特性：
（1）nodeType為11
（2）nodeName為#document-fragment
（3）nodeValue為null
（4）parentNode為null

我們簡(jiǎn)單地介紹了幾種常見(jiàn)的Node類型翼闽，要記住，HTML中的節(jié)點(diǎn)并不只是包括元素節(jié)點(diǎn)洲炊，它還包括文本節(jié)點(diǎn)感局，注釋節(jié)點(diǎn)等等。在這里我們只是簡(jiǎn)單地說(shuō)明了幾種常見(jiàn)的節(jié)點(diǎn)暂衡，想要進(jìn)一步學(xué)習(xí)的同學(xué)可以查找一下相關(guān)資料询微。

節(jié)點(diǎn)創(chuàng)建型api

在這里，我將常用的DOM操作api進(jìn)行分類狂巢，首先要介紹的是創(chuàng)建型的api撑毛。這一類型的api，簡(jiǎn)而言之就是用來(lái)創(chuàng)建節(jié)點(diǎn)的唧领。

createElement

createElement通過(guò)傳入指定的一個(gè)標(biāo)簽名來(lái)創(chuàng)建一個(gè)元素藻雌，如果傳入的標(biāo)簽名是一個(gè)未知的，則會(huì)創(chuàng)建一個(gè)自定義的標(biāo)簽疹吃，注意：IE8以下瀏覽器不支持自定義標(biāo)簽。
使用如下：

使用createElement要注意：通過(guò)createElement創(chuàng)建的元素并不屬于html文檔西雀，它只是創(chuàng)建出來(lái)萨驶，并未添加到html文檔中，要調(diào)用appendChild或insertBefore等方法將其添加到HTML文檔樹中艇肴。

createTextNode

createTextNode用來(lái)創(chuàng)建一個(gè)文本節(jié)點(diǎn)腔呜，用法如下：

<pre style="overflow: auto; font-family: "PT Mono", Consolas, Monaco, Menlo, monospace; font-size: 13px; background: rgb(29, 31, 33); margin: 0px; padding: 0px; color: rgb(197, 200, 198); line-height: 1.6; border: none;">var textNode = document.createTextNode("一個(gè)TextNode");
</pre>

createTextNode接收一個(gè)參數(shù)叁温，這個(gè)參數(shù)就是文本節(jié)點(diǎn)中的文本逗抑，和createElement一樣丘喻，創(chuàng)建后的文本節(jié)點(diǎn)也只是獨(dú)立的一個(gè)節(jié)點(diǎn)，同樣需要appendChild將其添加到HTML文檔樹中

cloneNode

cloneNode是用來(lái)返回調(diào)用方法的節(jié)點(diǎn)的一個(gè)副本策泣，它接收一個(gè)bool參數(shù)谤草，用來(lái)表示是否復(fù)制子元素跟束，使用如下：

<pre style="overflow: auto; font-family: "PT Mono", Consolas, Monaco, Menlo, monospace; font-size: 13px; background: rgb(29, 31, 33); margin: 0px; padding: 0px; color: rgb(197, 200, 198); line-height: 1.6; border: none;">var parent = document.getElementById("parentElement");
var parent2 = parent.cloneNode(true);// 傳入true
parent2.id = "parent2";
</pre>

這段代碼通過(guò)cloneNode復(fù)制了一份parent元素，其中cloneNode的參數(shù)為true丑孩，表示parent的子節(jié)點(diǎn)也被復(fù)制冀宴，如果傳入false，則表示只復(fù)制了parent節(jié)點(diǎn)温学。
我們看看這個(gè)例子

<pre style="overflow: auto; font-family: "PT Mono", Consolas, Monaco, Menlo, monospace; font-size: 13px; background: rgb(29, 31, 33); margin: 0px; padding: 0px; color: rgb(197, 200, 198); line-height: 1.6; border: none;"><div id="parent">
我是父元素的文本

<span>
我是子元素
</span>
</div>
<button id="btnCopy">復(fù)制</button>

var parent = document.getElementById("parent");
document.getElementById("btnCopy").onclick = function(){
var parent2 = parent.cloneNode(true);
parent2.id = "parent2";
document.body.appendChild(parent2);
}
</pre>

這段代碼很簡(jiǎn)單略贮，主要是綁定button事件，事件內(nèi)容是復(fù)制了一個(gè)parent仗岖，修改其id逃延，然后添加到文檔中。
這里有幾點(diǎn)要注意：
（1）和createElement一樣轧拄，cloneNode創(chuàng)建的節(jié)點(diǎn)只是游離有html文檔外的節(jié)點(diǎn)揽祥，要調(diào)用appendChild方法才能添加到文檔樹中
（2）如果復(fù)制的元素有id，則其副本同樣會(huì)包含該id紧帕，由于id具有唯一性盔然，所以在復(fù)制節(jié)點(diǎn)后必須要修改其id
（3）調(diào)用接收的bool參數(shù)最好傳入，如果不傳入該參數(shù)是嗜，不同瀏覽器對(duì)其默認(rèn)值的處理可能不同

除此之外愈案，我們還有一個(gè)需要注意的點(diǎn)：
如果被復(fù)制的節(jié)點(diǎn)綁定了事件，則副本也會(huì)跟著綁定該事件嗎鹅搪？這里要分情況討論：
（1）如果是通過(guò)addEventListener或者比如onclick進(jìn)行綁定事件站绪，則副本節(jié)點(diǎn)不會(huì)綁定該事件
（2）如果是內(nèi)聯(lián)方式綁定比如

這樣的話，副本節(jié)點(diǎn)同樣會(huì)觸發(fā)事件丽柿。

createDocumentFragment

createDocumentFragment方法用來(lái)創(chuàng)建一個(gè)DocumentFragment恢准。在前面我們說(shuō)到DocumentFragment表示一種輕量級(jí)的文檔，它的作用主要是存儲(chǔ)臨時(shí)的節(jié)點(diǎn)用來(lái)準(zhǔn)備添加到文檔中甫题。
createDocumentFragment方法主要是用于添加大量節(jié)點(diǎn)到文檔中時(shí)會(huì)使用到馁筐。假設(shè)要循環(huán)一組數(shù)據(jù)，然后創(chuàng)建多個(gè)節(jié)點(diǎn)添加到文檔中坠非，比如示例

document.getElementById("btnAdd").onclick = function(){
var list = document.getElementById("list");
for(var i = 0;i < 100; i++){
var li = document.createElement("li");
li.textContent = i;
list.appendChild(li);
}
}
</pre>

這段代碼將按鈕綁定了一個(gè)事件敏沉，這個(gè)事件創(chuàng)建了100個(gè)li節(jié)點(diǎn)，然后依次將其添加HTML文檔中。這樣做有一個(gè)缺點(diǎn)：每次一創(chuàng)建一個(gè)新的元素盟迟，然后添加到文檔樹中秋泳，這個(gè)過(guò)程會(huì)造成瀏覽器的回流。所謂回流簡(jiǎn)單說(shuō)就是指元素大小和位置會(huì)被重新計(jì)算攒菠，如果添加的元素太多迫皱，會(huì)造成性能問(wèn)題。這個(gè)時(shí)候辖众，就是使用createDocumentFragment了卓起。
DocumentFragment不是文檔樹的一部分，它是保存在內(nèi)存中的赵辕，所以不會(huì)造成回流問(wèn)題既绩。我們修改上面的代碼如下：

<pre style="overflow: auto; font-family: "PT Mono", Consolas, Monaco, Menlo, monospace; font-size: 13px; background: rgb(29, 31, 33); margin: 0px; padding: 0px; color: rgb(197, 200, 198); line-height: 1.6; border: none;">document.getElementById("btnAdd").onclick = function(){
var list = document.getElementById("list");
var fragment = document.createDocumentFragment();

for(var i = 0;i < 100; i++){
var li = document.createElement("li");
li.textContent = i;
fragment.appendChild(li);
}

list.appendChild(fragment);
}
</pre>

優(yōu)化后的代碼主要是創(chuàng)建了一個(gè)fragment，每次生成的li節(jié)點(diǎn)先添加到fragment还惠，最后一次性添加到list饲握，大家可以看示例

創(chuàng)建型API總結(jié)

創(chuàng)建型api主要包括createElement，createTextNode蚕键，cloneNode和createDocumentFragment四個(gè)方法救欧，需要注意下面幾點(diǎn)：
（1）它們創(chuàng)建的節(jié)點(diǎn)只是一個(gè)孤立的節(jié)點(diǎn)，要通過(guò)appendChild添加到文檔中
（2）cloneNode要注意如果被復(fù)制的節(jié)點(diǎn)是否包含子節(jié)點(diǎn)以及事件綁定等問(wèn)題
（3）使用createDocumentFragment來(lái)解決添加大量節(jié)點(diǎn)時(shí)的性能問(wèn)題

頁(yè)面修改型API

前面我們提到創(chuàng)建型api锣光，它們只是創(chuàng)建節(jié)點(diǎn)笆怠，并沒(méi)有真正修改到頁(yè)面內(nèi)容，而是要調(diào)用appendChild來(lái)將其添加到文檔樹中誊爹。我在這里將這類會(huì)修改到頁(yè)面內(nèi)容歸為一類蹬刷。
修改頁(yè)面內(nèi)容的api主要包括：appendChild，insertBefore频丘，removeChild办成，replaceChild。

appendChild

appendChild我們?cè)谇懊嬉呀?jīng)用到多次搂漠，就是將指定的節(jié)點(diǎn)添加到調(diào)用該方法的節(jié)點(diǎn)的子元素的末尾迂卢。調(diào)用方法如下：

child節(jié)點(diǎn)將會(huì)作為parent節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)。
appendChild這個(gè)方法很簡(jiǎn)單桐汤，但是還有有一點(diǎn)需要注意：如果被添加的節(jié)點(diǎn)是一個(gè)頁(yè)面中存在的節(jié)點(diǎn)而克，則執(zhí)行后這個(gè)節(jié)點(diǎn)將會(huì)添加到指定位置，其原本所在的位置將移除該節(jié)點(diǎn)怔毛，也就是說(shuō)不會(huì)同時(shí)存在兩個(gè)該節(jié)點(diǎn)在頁(yè)面上员萍，相當(dāng)于把這個(gè)節(jié)點(diǎn)移動(dòng)到另一個(gè)地方。我們來(lái)看例子

<pre style="overflow: auto; font-family: "PT Mono", Consolas, Monaco, Menlo, monospace; font-size: 13px; background: rgb(29, 31, 33); margin: 0px; padding: 0px; color: rgb(197, 200, 198); line-height: 1.6; border: none;"><div id="child">
要被添加的節(jié)點(diǎn)
</div>

<div id="parent">
要移動(dòng)的位置
</div>
<input id="btnMove" type="button" value="移動(dòng)節(jié)點(diǎn)" />

document.getElementById("btnMove").onclick = function(){
var child = document.getElementById("child");
document.getElementById("parent").appendChild(child);
}
</pre>

這段代碼主要是獲取頁(yè)面上的child節(jié)點(diǎn)拣度，然后添加到指定位置碎绎，可以看到原本的child節(jié)點(diǎn)被移動(dòng)到parent中了蜂莉。
這里還有一個(gè)要注意的點(diǎn)：如果child綁定了事件，被移動(dòng)時(shí)混卵，它依然綁定著該事件。

insertBefore

insertBefore用來(lái)添加一個(gè)節(jié)點(diǎn)到一個(gè)參照節(jié)點(diǎn)之前窖张，用法如下：

parentNode表示新節(jié)點(diǎn)被添加后的父節(jié)點(diǎn)
newNode表示要添加的節(jié)點(diǎn)
refNode表示參照節(jié)點(diǎn)幕随，新節(jié)點(diǎn)會(huì)添加到這個(gè)節(jié)點(diǎn)之前
我們來(lái)看這個(gè)例子

var parent = document.getElementById("parent");
var child = document.getElementById("child");
document.getElementById("insertNode").onclick = function(){
var newNode = document.createElement("div");
newNode.textContent = "新節(jié)點(diǎn)"
parent.insertBefore(newNode,child);
}
</pre>

這段代碼創(chuàng)建了一個(gè)新節(jié)點(diǎn)，然后添加到child節(jié)點(diǎn)之前宿接。
和appendChild一樣赘淮，如果插入的節(jié)點(diǎn)是頁(yè)面上的節(jié)點(diǎn)，則會(huì)移動(dòng)該節(jié)點(diǎn)到指定位置睦霎，并且保留其綁定的事件梢卸。

關(guān)于第二個(gè)參數(shù)參照節(jié)點(diǎn)還有幾個(gè)注意的地方：
（1）refNode是必傳的，如果不傳該參數(shù)會(huì)報(bào)錯(cuò)
（2）如果refNode是undefined或null副女，則insertBefore會(huì)將節(jié)點(diǎn)添加到子元素的末尾

removeChild

removeChild顧名思義蛤高，就是刪除指定的子節(jié)點(diǎn)并返回，用法如下：

deletedChild指向被刪除節(jié)點(diǎn)的引用碑幅，它等于node戴陡，被刪除的節(jié)點(diǎn)仍然存在于內(nèi)存中，可以對(duì)其進(jìn)行下一步操作沟涨。
注意：如果被刪除的節(jié)點(diǎn)不是其子節(jié)點(diǎn)恤批，則程序?qū)?huì)報(bào)錯(cuò)。我們可以通過(guò)下面的方式來(lái)確惫埃可以刪除：

通過(guò)節(jié)點(diǎn)自己獲取節(jié)點(diǎn)的父節(jié)點(diǎn)喜庞，然后將自身刪除。

replaceChild

replaceChild用于使用一個(gè)節(jié)點(diǎn)替換另一個(gè)節(jié)點(diǎn)棋返，用法如下

newChild是替換的節(jié)點(diǎn)延都，可以是新的節(jié)點(diǎn)，也可以是頁(yè)面上的節(jié)點(diǎn)懊昨，如果是頁(yè)面上的節(jié)點(diǎn)窄潭，則其將被轉(zhuǎn)移到新的位置
oldChild是被替換的節(jié)點(diǎn)

頁(yè)面修改型API總結(jié)

頁(yè)面修改型api主要是這四個(gè)接口，要注意幾個(gè)特點(diǎn)：
（1）不管是新增還是替換節(jié)點(diǎn)酵颁，如果新增或替換的節(jié)點(diǎn)是原本存在頁(yè)面上的嫉你，則其原來(lái)位置的節(jié)點(diǎn)將被移除，也就是說(shuō)同一個(gè)節(jié)點(diǎn)不能存在于頁(yè)面的多個(gè)位置
（2）節(jié)點(diǎn)本身綁定的事件會(huì)不會(huì)消失躏惋，會(huì)一直保留著幽污。

節(jié)點(diǎn)查詢型API

節(jié)點(diǎn)查詢型API也是非常常用的api，下面我們分別說(shuō)明一下每一個(gè)api的使用簿姨。

document.getElementById

這個(gè)接口很簡(jiǎn)單距误，根據(jù)元素id返回元素簸搞，返回值是Element類型，如果不存在該元素准潭，則返回null趁俊。
使用這個(gè)接口有幾點(diǎn)要注意：
（1）元素的Id是大小寫敏感的，一定要寫對(duì)元素的id
（2）HTML文檔中可能存在多個(gè)id相同的元素刑然，則返回第一個(gè)元素
（3）只從文檔中進(jìn)行搜索元素寺擂，如果創(chuàng)建了一個(gè)元素并指定id，但并沒(méi)有添加到文檔中泼掠，則這個(gè)元素是不會(huì)被查找到的

document.getElementsByTagName

這個(gè)接口根據(jù)元素標(biāo)簽名獲取元素怔软，返回一個(gè)即時(shí)的HTMLCollection類型，什么是即時(shí)的HTMLCollection類型呢择镇？我們來(lái)看看這個(gè)示例

var divList = document.getElementsByTagName("div");
document.getElementById("btnAddDiv").onclick = function(){
var div = document.createElement("div");
div.textContent ="div" + (divList.length+1);
document.body.appendChild(div);
}

document.getElementById("btnShowCount").onclick = function(){
alert(divList.length);
}
</pre>

這段代碼中有兩個(gè)按鈕挡逼，一個(gè)按鈕是顯示HTMLCollection元素的個(gè)數(shù)，另一個(gè)按鈕可以新增一個(gè)div標(biāo)簽到文檔中腻豌。前面提到HTMLCollcetion元素是即時(shí)的表示該集合是隨時(shí)變化的家坎，也就是是文檔中有幾個(gè)div，它會(huì)隨時(shí)進(jìn)行變化吝梅，當(dāng)我們新增一個(gè)div后乘盖，再訪問(wèn)HTMLCollection時(shí)，就會(huì)包含這個(gè)新增的div憔涉。
使用document.getElementsByTagName這個(gè)方法有幾點(diǎn)要注意：
（1）如果要對(duì)HTMLCollection集合進(jìn)行循環(huán)操作订框，最好將其長(zhǎng)度緩存起來(lái)，因?yàn)槊看窝h(huán)都會(huì)去計(jì)算長(zhǎng)度兜叨，暫時(shí)緩存起來(lái)可以提高效率
（2）如果沒(méi)有存在指定的標(biāo)簽穿扳，該接口返回的不是null，而是一個(gè)空的HTMLCollection
（3）“*”表示所有標(biāo)簽

document.getElementsByName

getElementsByName主要是通過(guò)指定的name屬性來(lái)獲取元素国旷，它返回一個(gè)即時(shí)的NodeList對(duì)象矛物。
使用這個(gè)接口主要要注意幾點(diǎn)：
（1）返回對(duì)象是一個(gè)即時(shí)的NodeList，它是隨時(shí)變化的
（2）在HTML元素中跪但，并不是所有元素都有name屬性履羞，比如div是沒(méi)有name屬性的，但是如果強(qiáng)制設(shè)置div的name屬性屡久，它也是可以被查找到的
（3）在IE中忆首，如果id設(shè)置成某個(gè)值，然后傳入getElementsByName的參數(shù)值和id值一樣被环，則這個(gè)元素是會(huì)被找到的糙及，所以最好不好設(shè)置同樣的值給id和name

document.getElementsByClassName

這個(gè)API是根據(jù)元素的class返回一個(gè)即時(shí)的HTMLCollection，用法如下

這個(gè)接口有下面幾點(diǎn)要注意：
（1）返回結(jié)果是一個(gè)即時(shí)的HTMLCollection筛欢，會(huì)隨時(shí)根據(jù)文檔結(jié)構(gòu)變化
（2）IE9以下瀏覽器不支持
（3）如果要獲取2個(gè)以上classname浸锨，可傳入多個(gè)classname唇聘，每個(gè)用空格相隔，例如

<pre style="overflow: auto; font-family: "PT Mono", Consolas, Monaco, Menlo, monospace; font-size: 13px; background: rgb(29, 31, 33); margin: 0px; padding: 0px; color: rgb(197, 200, 198); line-height: 1.6; border: none;">var elements = document.getElementsByClassName("test1 test2");
</pre>

document.querySelector和document.querySelectorAll

這兩個(gè)api很相似柱搜，通過(guò)css選擇器來(lái)查找元素迟郎，注意選擇器要符合CSS選擇器的規(guī)則。
首先來(lái)介紹一下document.querySelector聪蘸。
document.querySelector返回第一個(gè)匹配的元素谎亩，如果沒(méi)有匹配的元素，則返回null宇姚。
注意，由于返回的是第一個(gè)匹配的元素夫凸，這個(gè)api使用的深度優(yōu)先搜索來(lái)獲取元素浑劳。我們來(lái)看這個(gè)例子：

<pre style="overflow: auto; font-family: "PT Mono", Consolas, Monaco, Menlo, monospace; font-size: 13px; background: rgb(29, 31, 33); margin: 0px; padding: 0px; color: rgb(197, 200, 198); line-height: 1.6; border: none;"><div>
<div>
<span class="test">第三級(jí)的span</span>
</div>
</div>
<div class="test">
同級(jí)的第二個(gè)div
</div>
<input type="button" id="btnGet" value="獲取test元素" />

document.getElementById("btnGet").addEventListener("click",function(){
var element = document.querySelector(".test");
alert(element.textContent);
})
</pre>

這個(gè)例子很簡(jiǎn)單，就是兩個(gè)class都包含“test”的元素夭拌，一個(gè)在文檔樹的前面魔熏，但是它在第三級(jí)，另一個(gè)在文檔樹的后面鸽扁，但它在第一級(jí)蒜绽，通過(guò)querySelector獲取元素時(shí)，它通過(guò)深度優(yōu)先搜索桶现，拿到文檔樹前面的第三級(jí)的元素躲雅。

document.querySelectorAll的不同之處在于它返回的是所有匹配的元素，而且可以匹配多個(gè)選擇符骡和，我們來(lái)看看下面這個(gè)例子

<pre style="overflow: auto; font-family: "PT Mono", Consolas, Monaco, Menlo, monospace; font-size: 13px; background: rgb(29, 31, 33); margin: 0px; padding: 0px; color: rgb(197, 200, 198); line-height: 1.6; border: none;"><div class="test">
class為test
</div>
<div id="test">
id為test
</div>
<input id="btnShow" type="button" value="顯示內(nèi)容" />

document.getElementById("btnShow").addEventListener("click",function(){
var elements = document.querySelectorAll("#test,.test");
for(var i = 0,length = elements.length;i<length;i++){
alert(elements[i].textContent);
}
})
</pre>

這段代碼通過(guò)querySelectorAll相赁，使用id選擇器和class選擇器選擇了兩個(gè)元素，并依次輸出其內(nèi)容慰于。要注意兩點(diǎn)：
（1）querySelectorAll也是通過(guò)深度優(yōu)先搜索钮科，搜索的元素順序和選擇器的順序無(wú)關(guān)
（2）返回的是一個(gè)非即時(shí)的NodeList，也就是說(shuō)結(jié)果不會(huì)隨著文檔樹的變化而變化

兼容性問(wèn)題：querySelector和querySelectorAll在ie8以下的瀏覽器不支持婆赠。

節(jié)點(diǎn)關(guān)系型api

在html文檔中的每個(gè)節(jié)點(diǎn)之間的關(guān)系都可以看成是家譜關(guān)系绵脯，包含父子關(guān)系，兄弟關(guān)系等等休里，下面我們依次來(lái)看看每一種關(guān)系蛆挫。

父關(guān)系型api

parentNode：每個(gè)節(jié)點(diǎn)都有一個(gè)parentNode屬性，它表示元素的父節(jié)點(diǎn)妙黍。Element的父節(jié)點(diǎn)可能是Element璃吧，Document或DocumentFragment。
parentElement：返回元素的父元素節(jié)點(diǎn)废境，與parentNode的區(qū)別在于畜挨，其父節(jié)點(diǎn)必須是一個(gè)Element筒繁，如果不是，則返回null

兄弟關(guān)系型api

previousSibling：節(jié)點(diǎn)的前一個(gè)節(jié)點(diǎn)巴元，如果該節(jié)點(diǎn)是第一個(gè)節(jié)點(diǎn)毡咏，則為null。注意有可能拿到的節(jié)點(diǎn)是文本節(jié)點(diǎn)或注釋節(jié)點(diǎn)逮刨，與預(yù)期的不符呕缭，要進(jìn)行處理一下。
previousElementSibling：返回前一個(gè)元素節(jié)點(diǎn)修己，前一個(gè)節(jié)點(diǎn)必須是Element恢总，注意IE9以下瀏覽器不支持。

nextSibling：節(jié)點(diǎn)的后一個(gè)節(jié)點(diǎn)睬愤，如果該節(jié)點(diǎn)是最后一個(gè)節(jié)點(diǎn)片仿，則為null。注意有可能拿到的節(jié)點(diǎn)是文本節(jié)點(diǎn)尤辱，與預(yù)期的不符砂豌，要進(jìn)行處理一下。
nextElementSibling：返回后一個(gè)元素節(jié)點(diǎn)光督，后一個(gè)節(jié)點(diǎn)必須是Element阳距，注意IE9以下瀏覽器不支持。

子關(guān)系型api

childNodes：返回一個(gè)即時(shí)的NodeList结借，表示元素的子節(jié)點(diǎn)列表筐摘，子節(jié)點(diǎn)可能會(huì)包含文本節(jié)點(diǎn)，注釋節(jié)點(diǎn)等船老。
children：一個(gè)即時(shí)的HTMLCollection蓄拣，子節(jié)點(diǎn)都是Element，IE9以下瀏覽器不支持努隙。
firstNode：第一個(gè)子節(jié)點(diǎn)
lastNode：最后一個(gè)子節(jié)點(diǎn)
hasChildNodes方法：可以用來(lái)判斷是否包含子節(jié)點(diǎn)球恤。

元素屬性型api

setAttribute

setAttribute：根據(jù)名稱和值修改元素的特性，用法如下荸镊。

其中name是特性名咽斧，value是特性值。如果元素不包含該特性躬存，則會(huì)創(chuàng)建該特性并賦值张惹。
如果元素本身包含指定的特性名為屬性，則可以世界訪問(wèn)屬性進(jìn)行賦值岭洲，比如下面兩條代碼是等價(jià)的：

element.id = "test";
</pre>

getAttribute

getAttribute返回指定的特性名相應(yīng)的特性值宛逗，如果不存在，則返回null或空字符串盾剩。用法如下：

元素樣式型api

window.getComputedStyle

window.getComputedStyle是用來(lái)獲取應(yīng)用到元素后的樣式雷激，假設(shè)某個(gè)元素并未設(shè)置高度而是通過(guò)其內(nèi)容將其高度撐開(kāi)替蔬，這時(shí)候要獲取它的高度就要用到getComputedStyle，用法如下：

element是要獲取的元素屎暇，pseudoElt指定一個(gè)偽元素進(jìn)行匹配承桥。
返回的style是一個(gè)CSSStyleDeclaration對(duì)象。
通過(guò)style可以訪問(wèn)到元素計(jì)算后的樣式

getBoundingClientRect

getBoundingClientRect用來(lái)返回元素的大小以及相對(duì)于瀏覽器可視窗口的位置根悼，用法如下：

clientRect是一個(gè)DOMRect對(duì)象凶异，包含left，top挤巡，right剩彬，bottom，它是相對(duì)于可視窗口的距離矿卑，滾動(dòng)位置發(fā)生改變時(shí)喉恋，它們的值是會(huì)發(fā)生變化的。除了IE9以下瀏覽器粪摘，還包含元素的height和width等數(shù)據(jù)，具體可查看鏈接

總結(jié)

本文主要總結(jié)了原生js中常用的操作DOM的api接口绍坝，主要為了復(fù)習(xí)基礎(chǔ)知識(shí)徘意。平時(shí)開(kāi)發(fā)用多了jQuery等類庫(kù)，對(duì)基礎(chǔ)知識(shí)的了解可能就漸漸地遺忘轩褐，但這些基礎(chǔ)知識(shí)才是我們立足的根本椎咧，只有掌握原生的js，才能真正做好js的開(kāi)發(fā)把介。

#dom

</footer>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末勤讽，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子拗踢，更是在濱河造成了極大的恐慌脚牍，老刑警劉巖，帶你破解...
沈念sama閱讀 211,265評(píng)論 6贊 490
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件巢墅，死亡現(xiàn)場(chǎng)離奇詭異诸狭，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)君纫，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,078評(píng)論 2贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門驯遇，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人蓄髓，你說(shuō)我怎么就攤上這事叉庐。” “怎么了会喝？”我有些...
開(kāi)封第一講書人閱讀 156,852評(píng)論 0贊 347
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵陡叠，是天一觀的道長(zhǎng)玩郊。經(jīng)常有香客問(wèn)我，道長(zhǎng)匾竿，這世上最難降的妖魔是什么瓦宜？我笑而不...
開(kāi)封第一講書人閱讀 56,408評(píng)論 1贊 283
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮岭妖，結(jié)果婚禮上临庇，老公的妹妹穿的比我還像新娘。我一直安慰自己昵慌，他們只是感情好假夺，可當(dāng)我...
茶點(diǎn)故事閱讀 65,445評(píng)論 5贊 384
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著斋攀，像睡著了一般已卷。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上淳蔼，一...
開(kāi)封第一講書人閱讀 49,772評(píng)論 1贊 290
城市分裂傳說(shuō)
那天侧蘸，我揣著相機(jī)與錄音，去河邊找鬼鹉梨。笑死讳癌，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的存皂。我是一名探鬼主播晌坤，決...
沈念sama閱讀 38,921評(píng)論 3贊 406
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼旦袋！你這毒婦竟也來(lái)了骤菠？” 一聲冷哼從身側(cè)響起，我...
開(kāi)封第一講書人閱讀 37,688評(píng)論 0贊 266
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤疤孕，失蹤者是張志新（化名）和其女友劉穎商乎，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體祭阀，經(jīng)...
沈念sama閱讀 44,130評(píng)論 1贊 303
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡截亦，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 36,467評(píng)論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了柬讨。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片崩瓤。...
茶點(diǎn)故事閱讀 38,617評(píng)論 1贊 340
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖踩官，靈堂內(nèi)的尸體忽然破棺而出却桶，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 34,276評(píng)論 4贊 329
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布颖系，位于F島的核電站嗅剖，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏嘁扼。R本人自食惡果不足惜信粮，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,882評(píng)論 3贊 312
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望趁啸。院中可真熱鬧强缘，春花似錦、人聲如沸不傅。這莊子的主人今日做“春日...
開(kāi)封第一講書人閱讀 30,740評(píng)論 0贊 21
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)访娶。三九已至商虐，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間崖疤，已是汗流浹背秘车。一陣腳步聲響...
開(kāi)封第一講書人閱讀 31,967評(píng)論 1贊 265
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留劫哼，地道東北人叮趴。一個(gè)月前我還...
沈念sama閱讀 46,315評(píng)論 2贊 360
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像沦偎，于是被迫代替她去往敵國(guó)和親疫向。傳聞我的和親對(duì)象是個(gè)殘疾皇子咳蔚，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 43,486評(píng)論 2贊 348

dom