【Javascript】DOM程式設計學習總結篇

嗨Sirius發表於2020-12-04
JavaScript程式設計

文章目錄

一、基本型別介紹

1.Node型別

  • 所有DOM節點繼承該型別，Node有一個屬性nodeType表示Node的型別，它是一個整數，其數值分別表示相應的Node型別
  • 這些Node型別中，我們最常用的就是element，text，attribute，comment，document，document_fragment這幾種型別

2.Element型別

  • Element提供了對元素標籤名，子節點和特性的訪問，我們常用HTML元素比如div，span，a等標籤就是element中的一種。

  • Element有下面幾條特性：

    • nodeType為1
    • nodeName為元素標籤名，tagName也是返回標籤名
    • nodeValue為null
    • parentNode可能是Document或Element
    • 子節點可能是 Element，Text，Comment，Processing_Instruction，CDATASection 或 EntityReference

3.Text型別

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

4.Attr型別

  • Attr型別表示元素的特性，相當於元素的attributes屬性中的節點，它有下面的特性：
    • nodeType值為2
    • nodeName是特性的名稱
    • nodeValue是特性的值
    • parentNode為null

5.Comment型別

  • Comment表示HTML文件中的註釋，它有下面的幾種特徵：
    • nodeType為8
    • nodeName為#comment
    • nodeValue為註釋的內容
    • parentNode可能是Document或Element
    • 沒有子節點

6.Document

  • Document表示文件，在瀏覽器中，document物件是HTMLDocument的一個例項，表示整個頁面，它同時也是window物件的一個屬性。Document有下面的特性：
    • nodeType為9
    • nodeName為#document
    • nodeValue為 null
    • parentNode為 null
    • 子節點可能是一個DocumentType或Element

HTML中的節點並不只是包括元素節點，它還包括文字節點，註釋節點等等。在這裡我們只是簡單地說明了幾種常見的節點.

二、 DOM提供的幾個屬性

1.childNodes屬性

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

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;

3.nodeValue屬性

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

4.firstChild和lastChild屬性

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

與下面等價

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

三、節點建立型API

1.createElement

  • createElement通過傳入指定的一個標籤名來建立一個元素，如果傳入的標籤名是一個未知的，則會建立一個自定義的標籤，注意：IE8以下瀏覽器不支援自定義標籤
var div = document.createElement("div");
  • 使用createElement要注意：通過createElement建立的元素並不屬於html文件，它只是建立出來，並未新增到html文件中，要呼叫appendChild或insertBefore等方法將其新增到HTML文件樹中

2.createTextNode

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

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>
  • 這樣的話，副本節點同樣會觸發事件

4.createDocumentFragment

  • 我感覺有點類似虛擬DOM，抽象出來一個記憶體空間裝標籤，然後批量進行渲染防止迴流次數多影響效能

  • 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

5.建立型API總結

  • 建立型api主要包括createElement，createTextNode，cloneNode和createDocumentFragment四個方法，需要注意下面幾點：

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

四、頁面修改型API

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

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繫結了事件，被移動時，它依然繫結著該事件

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是必傳的，如果不傳該引數會報錯
    • 如果refNode是undefined或null，則insertBefore會將節點新增到子元素的末尾

3.removeChild

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

var deletedChild = parent.removeChild(node);

  • deletedChild指向被刪除節點的引用，它等於node，被刪除的節點仍然存在於記憶體中，可以對其進行下一步操作。

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

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

4.replaceChild

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

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

5.頁面修改型API總結

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

五、節點查詢型API

1.document.getElementById

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

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

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

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
    • “*”表示所有標籤

3.document.getElementsByName

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

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

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

4.document.getElementsByClassName

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

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

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，也就是說結果不會隨著文件樹的變化而變化

  • 相容性問題：querySelector和querySelectorAll在ie8以下的瀏覽器不支援

  • 小結：

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

六、節點關係型API

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

1.父關係性API

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

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>

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-Ikzbl3oX-1607020588410)(http://7xq6al.com1.z0.glb.clouddn.com/d10.png)]

  • 從截圖中可以看出 這段程式碼中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，子節點都是Element，IE9以下瀏覽器不支援。children子節點列表集合（只讀屬性 推薦使用 ）

  • children 獲取的子節點只包含元素節點

for (var i = 0; i<oUl.children.length; i++){
    oUl.children[i].style.background = 'red';
}

  • firstNode：第一個子節點

  • lastNode：最後一個子節點

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

  • firstChild 、lastChild 和childNodes同樣的存在相容性問題，在低版本ie瀏覽器中只能獲取到元素節點

  • firstElementChild、 lastElementChild 獲取第一個元素子節點，最後一個元素子節點 推薦使用

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方法：可以用來判斷是否包含子節點

七、元素屬性型

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

2.getAttribute

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

表格

樣式操作

大小和便宜

參考文章：FE- interview

相關文章