1. 程式人生 > >DOM程式設計之API總結篇

DOM程式設計之API總結篇

原文 連結

一、基本型別介紹

1.1 Node型別

  • DOM1級定義了一個Node介面,該介面由DOM中所有節點型別實現。這個Node介面在JS中是作為Node型別實現的。在IE9以下版本無法訪問到這個型別,JS中所有節點都繼承自Node型別,都共享著相同的基本屬性和方法
  • Node有一個屬性nodeType表示Node的型別,它是一個整數,其數值分別表示相應的Node型別

節點型別

Node型別

  • 假設我們要判斷一個Node是不是元素,我們可以這樣判斷
if(someNode.nodeType == 1){
console.log("Node is a element"
); }
  • 這些Node型別中,我們最常用的就是elementtextattributecommentdocumentdocument_fragment這幾種型別
1.2 Element型別

Element型別

  • Element提供了對元素標籤名,子節點和特性的訪問,我們常用HTML元素比如divspana等標籤就是element中的一種。
  • Element有下面幾條特性:

    • nodeType1
    • nodeName為元素標籤名,tagName也是返回標籤名
    • nodeValuenull
    • parentNode可能是DocumentElement
    • 子節點可能是 ElementText
      CommentProcessing_InstructionCDATASectionEntityReference
1.3 Text型別

Text型別

  • Text表示文字節點,它包含的是純文字內容,不能包含html程式碼,但可以包含轉義後的html程式碼。Text有下面的特性:
    • nodeType3
    • nodeName#text
    • nodeValue為文字內容
    • parentNode是一個Element
    • 沒有子節點
1.4 Attr型別

Attr型別

  • Attr型別表示元素的特性,相當於元素的attributes屬性中的節點,它有下面的特性:
    • nodeType值為2
    • nodeName
      是特性的名稱
    • nodeValue是特性的值
    • parentNodenull
1.5 Comment型別
  • Comment表示HTML文件中的註釋,它有下面的幾種特徵:
    • nodeType為8
    • nodeName#comment
    • nodeValue為註釋的內容
    • parentNode可能是DocumentElement
    • 沒有子節點
1.6 Document

Document型別

  • Document表示文件,在瀏覽器中,document物件是HTMLDocument的一個例項,表示整個頁面,它同時也是window物件的一個屬性。Document有下面的特性:
    • nodeType9
    • nodeName#document
    • nodeValuenull
    • parentNodenull
    • 子節點可能是一個DocumentTypeElement
1.7 DocumentFragment型別
  • DocumentFragment是所有節點中唯一一個沒有對應標記的型別,它表示一種輕量級的文件,可能當作一個臨時的倉庫用來儲存可能會新增到文件中的節點。DocumentFragment有下面的特性:

    • nodeType11
    • nodeName#document-fragment
    • nodeValuenull
    • parentNodenull
  • 我們簡單地介紹了幾種常見的Node型別,要記住,HTML中的節點並不只是包括元素節點,它還包括文字節點,註釋節點等等。在這裡我們只是簡單地說明了幾種常見的節點.

二、 DOM提供的幾個屬性

2.1 childNodes屬性

  • 在一棵節點樹上,childNodes屬性可以用來獲取任何一個元素的所有子節點,它是一個包含這個元素全部子元素的陣列
element.childNodes

2.2 nodeType屬性

  • 節點之間的關係構成了節點層次,html 頁面的可以畫出一個以html標籤為根節點的樹形結構
    DOM 會把文件看作是一棵樹,同時定義了很多方法來操作這棵數中的每一個元素(節點)
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <p>hello world!!!</p>
</body>
</html>

  • 每一個節點都有nodeType屬性
node.nodeType
  • nodeType屬性總共有12中可能取值,但其中僅有3種有實用價值
    • 元素節點的nodeType屬性值是1
    • 屬性節點的nodeType屬性值是2
    • 文字節點的nodeType屬性值是3
description.firstChild.nodeValue = text;

2.3 nodeValue屬性

  • nodeValue屬性
    • 如果想改變一個文字節點的值,那就使用DOM提供的nodeValue,它用來得到一個節點的值 node.nodeValue
    • 需要注意:nodeValue屬性獲取物件的值時,得到的並不是包含在這個段落裡的文字
    • nodeValue屬性不僅可以用來檢測節點的值,還可以設定節點的值

2.4 firstChild和lastChild屬性

  • 陣列元素childNodes[0]有個更直觀的同義詞。無論如何,只要訪問childNodes陣列的第一個元素,都可以把它寫成firstChild
node.firstChild

與下面等價

node.childNodes[0]
  • DOM還提供了一個與之對應的lastChild屬性
node.lastChild

### 三、節點建立型API

  • 在這裡,我將常用的DOM操作api進行分類,首先要介紹的是建立型的api。這一型別的api,簡而言之就是用來建立節點的

3.1 createElement

  • createElement通過傳入指定的一個標籤名來建立一個元素,如果傳入的標籤名是一個未知的,則會建立一個自定義的標籤,注意:IE8以下瀏覽器不支援自定義標籤

var div = document.createElement("div");
  • 使用createElement要注意:通過createElement建立的元素並不屬於html文件,它只是創建出來,並未新增到html文件中,要呼叫appendChildinsertBefore等方法將其新增到HTML文件樹中

3.2 createTextNode

  • createTextNode用來建立一個文字節點,用法如下

var textNode = document.createTextNode("一個TextNode");
  • createTextNode接收一個引數,這個引數就是文字節點中的文字,和createElement一樣,建立後的文字節點也只是獨立的一個節點,同樣需要appendChild將其新增到HTML文件樹中

3.3 cloneNode

  • cloneNode是用來返回呼叫方法的節點的一個副本,它接收一個bool引數,用來表示是否複製子元素,使用如下:
var parent = document.getElementById("parentElement"); 
var parent2 = parent.cloneNode(true);// 傳入true
parent2.id = "parent2";
  • 這段程式碼通過cloneNode複製了一份parent元素,其中cloneNode的引數為true,表示parent的子節點也被複制,如果傳入false,則表示只複製了parent節點
<div id="parent">
    我是父元素的文字
    <br/>
    <span>
        我是子元素
    </span>
</div>
<button id="btnCopy">複製</button>

var parent = document.getElementById("parent");
document.getElementById("btnCopy").onclick = function(){
    var parent2 = parent.cloneNode(true);
    parent2.id = "parent2";
    document.body.appendChild(parent2);
}
  • 這段程式碼很簡單,主要是繫結button事件,事件內容是複製了一個parent,修改其id,然後新增到文件中

  • 這裡有幾點要注意:

    • createElement一樣,cloneNode建立的節點只是遊離有html文件外的節點,要呼叫appendChild方法才能新增到文件樹中
    • 如果複製的元素有id,則其副本同樣會包含該id,由於id具有唯一性,所以在複製節點後必須要修改其id
    • 呼叫接收的bool引數最好傳入,如果不傳入該引數,不同瀏覽器對其預設值的處理可能不同
  • 除此之外,我們還有一個需要注意的點:

    • 如果被複制的節點綁定了事件,則副本也會跟著繫結該事件嗎?這裡要分情況討論:
      • 如果是通過addEventListener或者比如onclick進行繫結事件,則副本節點不會繫結該事件
      • 如果是內聯方式繫結比如

<div onclick="showParent()"></div>
  • 這樣的話,副本節點同樣會觸發事件

3.4 createDocumentFragment

  • createDocumentFragment方法用來建立一個DocumentFragment。在前面我們說到DocumentFragment表示一種輕量級的文件,它的作用主要是儲存臨時的節點用來準備新增到文件中

  • createDocumentFragment方法主要是用於新增大量節點到文件中時會使用到。假設要迴圈一組資料,然後建立多個節點新增到文件中

<ul id="list"></ul>
<input type="button" value="新增多項" id="btnAdd" />

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);
    }
}
  • 這段程式碼將按鈕綁定了一個事件,這個事件建立了100個li節點,然後依次將其新增HTML文件中。這樣做有一個缺點:每次一建立一個新的元素,然後新增到文件樹中,這個過程會造成瀏覽器的迴流。所謂迴流簡單說就是指元素大小和位置會被重新計算,如果新增的元素太多,會造成效能問題。這個時候,就是使用createDocumentFragment了

  • DocumentFragment不是文件樹的一部分,它是儲存在記憶體中的,所以不會造成迴流問題。我們修改上面的程式碼如下

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);
}
  • 優化後的程式碼主要是建立了一個fragment,每次生成的li節點先新增到fragment,最後一次性新增到list

3.5 建立型API總結

  • 建立型api主要包括createElementcreateTextNodecloneNodecreateDocumentFragment四個方法,需要注意下面幾點:

    • 它們建立的節點只是一個孤立的節點,要通過appendChild新增到文件中
    • cloneNode要注意如果被複制的節點是否包含子節點以及事件繫結等問題
    • 使用createDocumentFragment來解決新增大量節點時的效能問題

四、頁面修改型API

  • 前面我們提到建立型api,它們只是建立節點,並沒有真正修改到頁面內容,而是要呼叫appendChild來將其新增到文件樹中。我在這裡將這類會修改到頁面內容歸為一類。
    修改頁面內容的api主要包括:appendChildinsertBeforeremoveChildreplaceChild

4.1 appendChild

  • appendChild我們在前面已經用到多次,就是將指定的節點新增到呼叫該方法的節點的子元素的末尾。呼叫方法如下:
parent.appendChild(child);
  • child節點將會作為parent節點的最後一個子節點

  • appendChild這個方法很簡單,但是還有有一點需要注意:如果被新增的節點是一個頁面中存在的節點,則執行後這個節點將會新增到指定位置,其原本所在的位置將移除該節點,也就是說不會同時存在兩個該節點在頁面上,相當於把這個節點移動到另一個地方

<div id="child">
    要被新增的節點
</div>
<br/>
<br/>
<br/>
<div id="parent">
    要移動的位置
</div>      
<input id="btnMove" type="button" value="移動節點" />

document.getElementById("btnMove").onclick = function(){
    var child = document.getElementById("child");
    document.getElementById("parent").appendChild(child);
}
  • 這段程式碼主要是獲取頁面上的child節點,然後新增到指定位置,可以看到原本的child節點被移動到parent中了。
    這裡還有一個要注意的點:如果child綁定了事件,被移動時,它依然繫結著該事件

4.2 insertBefore

  • insertBefore用來新增一個節點到一個參照節點之前,用法如下

parentNode.insertBefore(newNode,refNode);
  • parentNode表示新節點被新增後的父節點
  • newNode表示要新增的節點
  • refNode表示參照節點,新節點會新增到這個節點之前
<div id="parent">
    父節點
    <div id="child">                
        子元素
    </div>
</div>
<input type="button" id="insertNode" value="插入節點" />

var parent = document.getElementById("parent");
var child = document.getElementById("child");
document.getElementById("insertNode").onclick = function(){
    var newNode = document.createElement("div");
    newNode.textContent = "新節點"
    parent.insertBefore(newNode,child);
}
  • 這段程式碼建立了一個新節點,然後新增到child節點之前
  • appendChild一樣,如果插入的節點是頁面上的節點,則會移動該節點到指定位置,並且保留其繫結的事件。

  • 關於第二個引數參照節點還有幾個注意的地方:

    • refNode是必傳的,如果不傳該引數會報錯
    • 如果refNodeundefinednull,則insertBefore會將節點新增到子元素的末尾

4.3 removeChild

  • removeChild顧名思義,就是刪除指定的子節點並返回,用法如下

var deletedChild = parent.removeChild(node);
  • deletedChild指向被刪除節點的引用,它等於node,被刪除的節點仍然存在於記憶體中,可以對其進行下一步操作。

  • 注意:如果被刪除的節點不是其子節點,則程式將會報錯。我們可以通過下面的方式來確保可以刪除:

if(node.parentNode){
    node.parentNode.removeChild(node);
}
  • 通過節點自己獲取節點的父節點,然後將自身刪除

4.4 replaceChild

  • replaceChild用於使用一個節點替換另一個節點,用法如下

parent.replaceChild(newChild,oldChild);
  • newChild是替換的節點,可以是新的節點,也可以是頁面上的節點,如果是頁面上的節點,則其將被轉移到新的位置
  • oldChild是被替換的節點

4.5 頁面修改型API總結

  • 頁面修改型api主要是這四個介面,要注意幾個特點
    • 不管是新增還是替換節點,如果新增或替換的節點是原本存在頁面上的,則其原來位置的節點將被移除,也就是說同一個節點不能存在於頁面的多個位置
    • 節點本身繫結的事件會不會消失,會一直保留著

五、節點查詢型API

  • 節點查詢型API也是非常常用的

5.1 document.getElementById

  • 這個介面很簡單,根據元素id返回元素,返回值是Element型別,如果不存在該元素,則返回null

  • 使用這個介面有幾點要注意:

    • 元素的Id是大小寫敏感的,一定要寫對元素的id
    • HTML文件中可能存在多個id相同的元素,則返回第一個元素
    • 只從文件中進行搜尋元素,如果建立了一個元素並指定id,但並沒有新增到文件中,則這個元素是不會被查詢到的

5.2 document.getElementsByTagName

  • 這個介面根據元素標籤名獲取元素,返回一個即時的HTMLCollection型別,什麼是即時的HTMLCollection型別呢?
<div>div1</div>
<div>div2</div>

<input type="button" value="顯示數量" id="btnShowCount"/>
<input type="button" value="新增div" id="btnAddDiv"/> 

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);
}
  • 這段程式碼中有兩個按鈕,一個按鈕是顯示HTMLCollection元素的個數,另一個按鈕可以新增一個div標籤到文件中。前面提到HTMLCollcetion元素是即時的表示該集合是隨時變化的,也就是是文件中有幾個div,它會隨時進行變化,當我們新增一個div後,再訪問HTMLCollection時,就會包含這個新增的div

  • 使用document.getElementsByTagName這個方法有幾點要注意

    • 如果要對HTMLCollection集合進行迴圈操作,最好將其長度快取起來,因為每次迴圈都會去計算長度,暫時快取起來可以提高效率
    • 如果沒有存在指定的標籤,該介面返回的不是null,而是一個空的HTMLCollection
    • “*”表示所有標籤

5.3 document.getElementsByName

  • getElementsByName主要是通過指定的name屬性來獲取元素,它返回一個即時的NodeList物件。一般用於獲取表單元素的·name·屬性

  • 使用這個介面主要要注意幾點:

    • 返回物件是一個即時的NodeList,它是隨時變化的
    • HTML元素中,並不是所有元素都有name屬性,比如div是沒有name屬性的,但是如果強制設定div的name`屬性,它也是可以被查詢到的
    • IE中,如果id設定成某個值,然後傳入getElementsByName的引數值和id值一樣,則這個元素是會被找到的,所以最好不好設定同樣的值給idname

5.4 document.getElementsByClassName

  • 這個API是根據元素的class返回一個即時的HTMLCollection,用法如下
var elements = document.getElementsByClassName(names);
  • 這個介面有下面幾點要注意:
    • 返回結果是一個即時的HTMLCollection,會隨時根據文件結構變化
    • IE9以下瀏覽器不支援
    • 如果要獲取2個以上classname,可傳入多個classname,每個用空格相隔,例如

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

5.5 document.querySelector和document.querySelectorAll

  • 這兩個api很相似,通過css選擇器來查詢元素,注意選擇器要符合CSS選擇器的規則

  • 首先來介紹一下document.querySelector

  • document.querySelector返回第一個匹配的元素,如果沒有匹配的元素,則返回null
  • 注意,由於返回的是第一個匹配的元素,這個api使用的深度優先搜尋來獲取元素
<div>
    <div>
        <span class="test">第三級的span</span>  
    </div>
</div>
<div class="test">          
    同級的第二個div
</div>
<input type="button" id="btnGet" value="獲取test元素" />

document.getElementById("btnGet").addEventListener("click",function(){
    var element = document.querySelector(".test");
    alert(element.textContent);
})
  • 這個例子很簡單,就是兩個class都包含“test”的元素,一個在文件樹的前面,但是它在第三級,另一個在文件樹的後面,但它在第一級,通過querySelector獲取元素時,它通過深度優先搜尋,拿到文件樹前面的第三級的元素

  • document.querySelectorAll的不同之處在於它返回的是所有匹配的元素,而且可以匹配多個選擇符

<div class="test">
    class為test
</div>
<div id="test">
    id為test
</div>
<input id="btnShow" type="button" value="顯示內容" />

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);
    }   
})
  • 這段程式碼通過querySelectorAll,使用id選擇器和class選擇器選擇了兩個元素,並依次輸出其內容。要注意兩點:

    • querySelectorAll也是通過深度優先搜尋,搜尋的元素順序和選擇器的順序無關
    • 返回的是一個非即時的NodeList,也就是說結果不會隨著文件樹的變化而變化
  • 相容性問題querySelectorquerySelectorAllie8以下的瀏覽器不支援

  • 小結

    • document.getElementById返回一個物件
    • document.getElementsByNamedocument.getElementsByClasName返回一個物件陣列

六、節點關係型API

  • html文件中的每個節點之間的關係都可以看成是家譜關係,包含父子關係,兄弟關係等等

6.1 父關係型API

  • parentNode:每個節點都有一個parentNode屬性,它表示元素的父節點。Element的父節點可能是ElementDocumentDocumentFragment
  • parentElement:返回元素的父元素節點,與parentNode的區別在於,其父節點必須是一個Element,如果不是,則返回null

6.2 兄弟關係型API

  • previousSibling:節點的前一個節點,如果該節點是第一個節點,則為null。注意有可能拿到的節點是文字節點或註釋節點,與預期的不符,要進行處理一下
  • previousElementSibling:返回前一個元素節點,前一個節點必須是Element,注意IE9以下瀏覽器不支援

  • nextSibling previousSibling 存在相容性問題

  • nextElementSibling previousElementSibling 推薦使用

<script>
    var oUl = document.getElementById('ul1');

    var firstEle = oUl.firstElementChild;
    var lastEle = oUl.lastElementChild;

    firstEle.nextElementSibling.style.background = 'red';
    lastEle.previousElementSibling.style.background = 'green';

</script>

  • nextSibling:節點的後一個節點,如果該節點是最後一個節點,則為null。注意有可能拿到的節點是文字節點,與預期的不符,要進行處理一下
  • nextElementSibling:返回後一個元素節點,後一個節點必須是Element,注意IE9以下瀏覽器不支援

6.3 子關係型API

  • childNodes
    • 返回一個即時的NodeList,表示元素的子節點列表,子節點可能會包含文字節點,註釋節點等。childNodes子節點列表集合(只讀屬性 有相容性問題 )
<ul id="ul1">
    <li>11111</li>
    <li>22222</li>
    <li>3333</li>
    <li>44444</li>
</ul>
<script>
    var oUl = document.getElementById('ul1');
    console.log(oUl.childNodes);
</script>

  • 從截圖中可以看出 這段程式碼中ul的子節點有9個,這說明使用childNodes獲取的節點包括了文字節點和元素節點

  • childNodes 在低版本的ie 瀏覽器下獲取的節點只包括元素節點,這就導致了相容性問題

  • 如何解決相容性??
    • 根據子節點的nodeType屬性值判斷
for (var i=0; i<oUl.childNodes.length; i++) {

     if ( oUl.childNodes[i].nodeType == 1 ) {
        oUl.childNodes[i].style.background = 'red';
     }

 }
  • children

    • 一個即時的HTMLCollection,子節點都是ElementIE9以下瀏覽器不支援。children子節點列表集合(只讀屬性 推薦使用 )
  • children 獲取的子節點只包含元素節點

for (var i = 0; i<oUl.children.length; i++){
    oUl.children[i].style.background = 'red';
}
  • firstNode:第一個子節點
  • lastNode:最後一個子節點

  • firstChild (firstElementChild) lastChild(lastElementChild) 第一個子節點 最後一個子節點

  • firstChildlastChildchildNodes同樣的存在相容性問題,在低版本ie瀏覽器中只能獲取到元素節點

  • firstElementChildlastElementChild 獲取第一個元素子節點,最後一個元素子節點 推薦使用

var oUl = document.getElementById('ul1');

//    oUl.firstChild.style.background = 'red';//標準瀏覽器 報錯
//    oUl.lastChild.style.background = 'red';//標準瀏覽器 報錯

oUl.firstElementChild.style.background = 'red';
oUl.lastElementChild.style.background = 'red';

  • hasChildNodes方法:可以用來判斷是否包含子節點

七、元素屬性型

7.1 setAttribute

  • setAttribute:它允許我們對元素屬性值做出修改與getAttribute一樣setAttribute也能用於元素節點
  • 通過setAttribute對文件做出修改後,在通過瀏覽器的檢視原始碼選項看到的任然是改變之前的屬性值,也就是說setAttribue做出的修改,不會反應到文件本身的原始碼裡
  • setAttribute優勢在於可以修改文件中的任何一個屬性

element.setAttribute(name, value);
  • 其中name是特性名,value是特性值。如果元素不包含該特性,則會建立該特性並賦值。
  • 如果元素本身包含指定的特性名為屬性,則可以訪問屬性進行賦值,比如下面兩條程式碼是等價

element.setAttribute("id","test");

element.id = "test";
  • 非DOM的解決方案

    • 其實不用setAttribute也可以改變元素的屬性
    • setAttribute方法是第一級DOM的組成部分,它可以設計任何元素節點的任意屬性。在第1級DOM出現之前,你可以通過另外一種辦法設定大部分元素的屬性
element.value = "the new value";

與下面語句等價

element.setAttribute("value","the new value");

7.2 getAttribute

  • getAttribute返回指定的特性名相應的特性值,如果不存在,則返回null或空字串。
  • getAttribute不屬性doucment物件,不能通過document物件呼叫,只能通過元素節點物件呼叫
  • 例如可以與getElementsByTagName方法合用,獲取每個ptitle屬性
var paras = document.getElementsByTagName("p");
for(var i=0;i<para.lenght;i++){
    alert(paras.getAttrtitube("title"));
}

八、表格操作

表格操作

九、樣式操作

樣式操作

十、大小和偏移

大小和偏移

十一、網上的一張思維導圖總結

  • 參考
    • JavaScript DOM程式設計藝術