摘要：文本整理了操作的一些常用的，根據(jù)其作用整理成為創(chuàng)建，修改，查詢等多種類型的，主要用于復(fù)習(xí)基礎(chǔ)知識(shí)，加深對(duì)原生的認(rèn)識(shí)。方法主要是用于添加大量節(jié)點(diǎn)到文檔中時(shí)會(huì)使用到。

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

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

DOM1級(jí)定義了一個(gè)Node接口，該接口由DOM中所有節(jié)點(diǎn)類型實(shí)現(xiàn)。這個(gè)Node接口在JS中是作為Node類型實(shí)現(xiàn)的。在IE9以下版本無法訪問到這個(gè)類型，JS中所有節(jié)點(diǎn)都繼承自Node類型，都共享著相同的基本屬性和方法。

每個(gè)節(jié)點(diǎn)都有一個(gè)nodeType屬性，用于表明節(jié)點(diǎn)的類型。節(jié)點(diǎn)類型由在Node類型中定義的下列12個(gè)數(shù)值常量來表示，任何節(jié)點(diǎn)類型必居其一：

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是不是元素，我們可以這樣判斷：

if(someNode.nodeType == 1){
    console.log("Node is a element");
}

開發(fā)人員最常用的就是元素和文本節(jié)點(diǎn)。

這些Node類型中，我們最常用的就是element，text，attribute，comment，document，document_fragment這幾種類型。
我們簡(jiǎn)單來介紹一下這幾種類型：

Element提供了對(duì)元素標(biāo)簽名，子節(jié)點(diǎ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表示文本節(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）沒有子節(jié)點(diǎn)

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

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

Document表示文檔，在瀏覽器中，document對(duì)象是HTMLDocument的一個(gè)實(shí)例，表示整個(gè)頁面，它同時(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是所有節(jié)點(diǎn)中唯一一個(gè)沒有對(duì)應(yīng)標(biāo)記的類型，它表示一種輕量級(jí)的文檔，可能當(dāng)作一個(gè)臨時(shí)的倉庫用來保存可能會(huì)添加到文檔中的節(jié)點(diǎn)。DocumentFragment有下面的特性：
（1）nodeType為11
（2）nodeName為#document-fragment
（3）nodeValue為null
（4）parentNode為null

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

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

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

var div = document.createElement("div");

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

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

var textNode = document.createTextNode("一個(gè)TextNode");

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

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

var parent = document.getElementById("parentElement"); 
var parent2 = parent.cloneNode(true);// 傳入true
parent2.id = "parent2";

這段代碼通過cloneNode復(fù)制了一份parent元素，其中cloneNode的參數(shù)為true，表示parent的子節(jié)點(diǎn)也被復(fù)制，如果傳入false，則表示只復(fù)制了parent節(jié)點(diǎn)。

我們看看這個(gè)例子：

    我是父元素的文本
    

    
        我是子元素
    

復(fù)制

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

這段代碼很簡(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）如果是通過addEventListener或者比如onclick進(jìn)行綁定事件，則副本節(jié)點(diǎn)不會(huì)綁定該事件
（2）如果是內(nèi)聯(lián)方式綁定比如:

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

createDocumentFragment方法用來創(chuàng)建一個(gè)DocumentFragment。在前面我們說到DocumentFragment表示一種輕量級(jí)的文檔，它的作用主要是存儲(chǔ)臨時(shí)的節(jié)點(diǎn)用來準(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);
    }
}

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

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);
}

優(yōu)化后的代碼主要是創(chuàng)建了一個(gè)fragment，每次生成的li節(jié)點(diǎn)先添加到fragment，最后一次性添加到list。

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

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

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

parent.appendChild(child);

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

    要被添加的節(jié)點(diǎn)








    要移動(dòng)的位置
        


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

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

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

parentNode.insertBefore(newNode,refNode);

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

    父節(jié)點(diǎn)
    
                
        子元素
    



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);
}

這段代碼創(chuàng)建了一個(gè)新節(jié)點(diǎn)，然后添加到child節(jié)點(diǎn)之前。
和appendChild一樣，如果插入的節(jié)點(diǎn)是頁面上的節(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顧名思義，就是刪除指定的子節(jié)點(diǎn)并返回，用法如下：

var deletedChild = parent.removeChild(node);

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

if(node.parentNode){
    node.parentNode.removeChild(node);
}

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

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

parent.replaceChild(newChild,oldChild);

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

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

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

這個(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，但并沒有添加到文檔中，則這個(gè)元素是不會(huì)被查找到的

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

div1
div2
        

    

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);
}

這段代碼中有兩個(gè)按鈕，一個(gè)按鈕是顯示HTMLCollection元素的個(gè)數(shù)，另一個(gè)按鈕可以新增一個(gè)div標(biāo)簽到文檔中。前面提到HTMLCollcetion元素是即時(shí)的表示該集合是隨時(shí)變化的，也就是是文檔中有幾個(gè)div，它會(huì)隨時(shí)進(jìn)行變化，當(dāng)我們新增一個(gè)div后，再訪問HTMLCollection時(shí)，就會(huì)包含這個(gè)新增的div。

使用document.getElementsByTagName這個(gè)方法有幾點(diǎn)要注意：

（1）如果要對(duì)HTMLCollection集合進(jìn)行循環(huán)操作，最好將其長(zhǎng)度緩存起來，因?yàn)槊看窝h(huán)都會(huì)去計(jì)算長(zhǎng)度，暫時(shí)緩存起來可以提高效率
（2）如果沒有存在指定的標(biāo)簽，該接口返回的不是null，而是一個(gè)空的HTMLCollection
（3）“*”表示所有標(biāo)簽

getElementsByName主要是通過指定的name屬性來獲取元素，它返回一個(gè)即時(shí)的NodeList對(duì)象。
使用這個(gè)接口主要要注意幾點(diǎn)：

（1）返回對(duì)象是一個(gè)即時(shí)的NodeList，它是隨時(shí)變化的
（2）在HTML元素中，并不是所有元素都有name屬性，比如div是沒有name屬性的，但是如果強(qiáng)制設(shè)置div的name屬性，它也是可以被查找到的
（3）在IE中，如果id設(shè)置成某個(gè)值，然后傳入getElementsByName的參數(shù)值和id值一樣，則這個(gè)元素是會(huì)被找到的，所以最好不好設(shè)置同樣的值給id和name

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

var elements = document.getElementsByClassName(names);

這個(gè)接口有下面幾點(diǎn)要注意：

（1）返回結(jié)果是一個(gè)即時(shí)的HTMLCollection，會(huì)隨時(shí)根據(jù)文檔結(jié)構(gòu)變化
（2）IE9以下瀏覽器不支持
（3）如果要獲取2個(gè)以上classname，可傳入多個(gè)classname，每個(gè)用空格相隔，例如：

var elements = document.getElementsByClassName("test1 test2");

這兩個(gè)api很相似，通過css選擇器來查找元素，注意選擇器要符合CSS選擇器的規(guī)則。
首先來介紹一下document.querySelector。
document.querySelector返回第一個(gè)匹配的元素，如果沒有匹配的元素，則返回null。
注意，由于返回的是第一個(gè)匹配的元素，這個(gè)api使用的深度優(yōu)先搜索來獲取元素。我們來看這個(gè)例子：

    

        第三級(jí)的span    
    

            
    同級(jí)的第二個(gè)div



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

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

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

    class為test


    id為test



document.getElementById("btnShow").addEventListener("click",function(){
    var elements = document.querySelectorAll("#test,.test");    
    for(var i = 0,length = elements.length;i
這段代碼通過querySelectorAll，使用id選擇器和class選擇器選擇了兩個(gè)元素，并依次輸出其內(nèi)容。要注意兩點(diǎn)：
（1）querySelectorAll也是通過深度優(yōu)先搜索，搜索的元素順序和選擇器的順序無關(guān)
（2）返回的是一個(gè)非即時(shí)的NodeList，也就是說結(jié)果不會(huì)隨著文檔樹的變化而變化
兼容性問題：querySelector和querySelectorAll在ie8以下的瀏覽器不支持。
節(jié)點(diǎn)關(guān)系型api
在html文檔中的每個(gè)節(jié)點(diǎn)之間的關(guān)系都可以看成是家譜關(guān)系，包含父子關(guān)系，兄弟關(guān)系等等，下面我們依次來看看每一種關(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以下瀏覽器不支持。
firstChild：第一個(gè)子節(jié)點(diǎn)。
lastChild：最后一個(gè)子節(jié)點(diǎn)。
hasChildNodes方法：可以用來判斷是否包含子節(jié)點(diǎn)。
元素屬性型api
setAttribute
setAttribute：根據(jù)名稱和值修改元素的特性，用法如下：
element.setAttribute(name, value);
其中name是特性名，value是特性值。如果元素不包含該特性，則會(huì)創(chuàng)建該特性并賦值。
如果元素本身包含指定的特性名為屬性，則可以世界訪問屬性進(jìn)行賦值，比如下面兩條代碼是等價(jià)的：
element.setAttribute("id","test");

element.id = "test";
getAttribute
getAttribute返回指定的特性名相應(yīng)的特性值，如果不存在，則返回null或空字符串。用法如下：
var value = element.getAttribute("id");
元素樣式型api
直接修改元素的樣式
elem.style.color = "red";
elem.style.setProperty("font-size", "16px");
elem.style.removeProperty("color");
動(dòng)態(tài)添加樣式規(guī)則
var style = document.createElement("style");
style.innerHTML = "body{color:red} #top:hover{background-color: red;color: white;}";
document.head.appendChild(style);
window.getComputedStyle
通過element.sytle.xxx只能獲取到內(nèi)聯(lián)樣式，借助window.getComputedStyle可以獲取應(yīng)用到元素上的所有樣式，IE8或更低版本不支持此方法。
var style = window.getComputedStyle(element[, pseudoElt]);
element是要獲取的元素，pseudoElt指定一個(gè)偽元素進(jìn)行匹配。
返回的style是一個(gè)CSSStyleDeclaration對(duì)象。
通過style可以訪問到元素計(jì)算后的樣式
getBoundingClientRect
getBoundingClientRect用來返回元素的大小以及相對(duì)于瀏覽器可視窗口的位置，兼容性非常好(IE6+)，用法如下：
var clientRect = element.getBoundingClientRect();
clientRect是一個(gè)DOMRect對(duì)象，包含left，top，right，bottom，它是相對(duì)于可視窗口的距離，滾動(dòng)位置發(fā)生改變時(shí)，它們的值是會(huì)發(fā)生變化的。除了IE9以下瀏覽器，還包含元素的height和width等數(shù)據(jù),具體可查看鏈接。
參考
轉(zhuǎn)載地址：http://luopq.com/2015/11/30/j...
參考地址：http://blog.liuxianan.com/jav...