CH16-DOM元素增刪改

本章目標

掌握如何使用DOM獲取節點時使用的屬性
熟練使用DOM節點進行創建、添加、刪除、替換

一、使用DOM獲取節點時使用的屬性

1.1 首尾子節點

firstChild：獲取當前節點的首個子節點，注意：換行符、空格等也是節點。

lastChild:訪問當前節點的最后一個子節點，是 Node 對象。

注：lastChild 返回的是這些子節點：元素節點、文本節點或注釋節點。元素之間的空白也是文本節點。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>function test1(){//獲取首個子節點var node=document.querySelector("#ul_1").firstChild;alert(node.innerHTML);}function test2(){//獲取尾個子節點var node=document.querySelector("#ul_1").lastChild;alert(node.innerHTML);}</script>
</head><body><ul id="ul_1" class="abc"><li>li-1</li><li>li-2</li><li id="li_3">li-3</li><li>li-4</li><li>li-5</li></ul><button onclick="test1()">獲取首個子節點</button><button onclick="test2()">獲取尾個子節點</button></body></html>

1.2 首尾元素子節點

firstElementChild :訪問當前節點的首個元素子節點，是 Element對象。

lastElementChild :訪問當前節點的尾個元素子節點，是 Element對象。

 	   function test1(){//獲取首個元素子節點var node=document.querySelector("#ul_1").firstElementChild;alert(node.innerHTML);}function test2(){//獲取尾個元素子節點var node=document.querySelector("#ul_1").lastElementChild;alert(node.innerHTML);}

1.3 兄弟節點

previousSibling:返回同一層級中指定節點的前一個節點,是 Node 對象。

previousSibling 屬性是只讀的。

如果沒有 previousSibling 節點，則返回值是 null。

nextSibiling:返回同一層級中指定節點之后緊跟的節點,是Node對象

nextSibling 屬性是只讀的。

如果沒有 nextSibiling節點，則返回值是 null。

function test3() {var node1=document.querySelector("#li_3").previousSibling;var node2=document.querySelector("#li_3").nextSibiling;alert("上一個節點："+node1.innerHTML);alert("下一個節點："+node2.innerHTML);
}

注：nextSibiling 返回下一個同胞節點：元素節點、文本節點或注釋節點。

previousElementSibling :返回同一層級中指定節點之前的元素節點,是Element對象

nextElementSibling :返回同一層級中指定節點之后的元素節點,是Element對象

function test4() {var node1=document.querySelector("#li_3").previousElementSibling ;var node2=document.querySelector("#li_3").nextElementSibling ;alert("上一個元素節點："+node1.innerHTML);alert("下一個元素節點："+node2.innerHTML);
}

1.4 父、子節點

parentNode：訪問當前元素節點的父節點如果指定的節點沒有父節點則返回 null.

childNodes：當前節點的所有子節點返回所有節點的數組,只返回文本和元素節點，對于屬性節點直接無視

function test5(){//獲取父節點var node=document.querySelector("#ul_1").parentNode;alert(node.nodeName);
}

function test6(){//獲取子節點var nodes=document.querySelector("#ul_1").childNodes;  //調試觀察各節點屬性for(var i=0;i<nodes.length;i++){var node=nodes[i];if(node.nodeType==3)continue;alert(node.innerHTML);}  }

1.4 節點屬性

nodeName：節點的名稱

nodeName 是只讀的

元素節點的 nodeName 與標簽名相同，屬性節點的 nodeName 與屬性名相同，文本節點的 nodeName 始終是 #text ，文檔節點的 nodeName 始終是 #document 。

 function test7(){//元素節點的nodeNamealert(document.querySelector("#ul_1").nodeName);//屬性節點的nodeNamevar node= document.getElementById("ul_1").attributes["class"];alert(node.nodeName);//文本節點的nodeNamealert(document.querySelector("#li_3").firstChild.nodeValue);}

注：nodeName 所包含的 XML 元素的標簽名稱永遠是大寫的

nodeValue:節點的值

元素節點的 nodeValue 是 undefined 或 null

文本節點的 nodeValue 是文本本身

屬性節點的 nodeValue 是屬性值

 function test8(){//元素節點的nodeValuealert(document.querySelector("#ul_1").nodeValue);//屬性節點的nodeValuevar node= document.getElementById("ul_1").attributes["class"];alert(node.nodeValue);//文本節點的nodeValuealert(document.querySelector("#li_3").firstChild.nodeValue);}

注：nodeValue 屬性對于文檔節點和元素節點是不可用的。

nodeType：節點類型

? 1：表示當前節點的類型是標簽（元素）

? 2：表示屬性節點

? 3：表示文本節點

nodeType屬性返回選定節點的節點類型，可以讓我們知道、區分文檔中的各個節點。

 function test9(){//元素節點的nodeTypealert(document.querySelector("#ul_1").nodeType);//屬性節點的nodeTypevar node= document.getElementById("ul_1").attributes["class"];alert(node.nodeType);//文本節點的nodeTypealert(document.querySelector("#li_3").firstChild.nodeType);}

二、操作DOM節點

2.1 創建一個節點

createElement、createTextNode

createElement() 方法通過指定名稱創建一個元素

使用createElement創建節點：

例：創建一個p標簽追加到body

在這里插入圖片描述

<h2>createElement() 方法</h2>
<p>創建帶一些文本的 p 元素：</p>
<script>
window.onload=function(){// 用createElement創建元素var c= document.createElement("p");//設置元素的文本c.innerText = "這是一個p標簽";// 追加到 bodydocument.body.appendChild(c);}
</script>

注：1.createElement()創建了一個新的元素，參數是String類型的創建元素的名稱

? 2.createElement()方法常和appendChild()一起用。createElement()方法創建元素后，一般用appendChild()加入內容。

createTextNode() 方法創建文本節點

使用createTextNode創建節點：

例：創建一個節點追加到body里面

效果圖：

在這里插入圖片描述

<script>
window.onload=function(){//使用createTextNode創建文本節點var textNode = document.createTextNode("Hello World");//追加到bodydocument.body.appendChild(textNode);}
</script>

2.2 向頁面加入一個節點

appendChild、insertBefore

例：創建一個li元素在里面創建一個文本節點再添加到已有的子元素前面

效果圖：

在這里插入圖片描述

<ul id="myList"><li id="a">hello</li><li id="b">world</li>
</ul>
<script>
window.onload=function(){// 創建 "li" 元素：var newNode = document.createElement("li");// 創建文本節點：var textNode = document.createTextNode("JQuery");// 向 "li" 元素添加文本節點：newNode.appendChild(textNode);// 在已有子元素之前插入var list = document.getElementById("myList");list.insertBefore(newNode, list.children[0]);}
</script>

案例中的appendChild() 方法，將新元素作為父元素的最后一個子元素進行添加。如果需要將新元素添加到開始位置，可以使用 insertBefore() 方法。

注：1. insertBefore() 方法是在被選元素前插入 HTML 元素。

? 2.如需在被選元素后插入 HTML 元素，使可用 insertAfter() 方法。

? 3.如果參數是已存在的元素，它將從它的當前位置被移除，并被插入在被選元素之前。

2.3 刪除頁面中的某一個節點

removeChild():刪除參數是要刪除的對象。返回值是removeChild前的那個父節點

例：點擊按鈕刪除第一個子節點

刪除前：

在這里插入圖片描述

刪除后：

在這里插入圖片描述

<button onclick="myFunction()">刪除第一個子節點</button>
<ul id="myList"><li id="a">hello</li><li id="b">world</li>
</ul><script>function myFunction() {//獲取idvar list = document.getElementById("myList");//通過id刪除第一個節點list.removeChild(list.firstElementChild);}
</script>

注：1.如需刪除 HTML 元素，您必須清楚該元素的父元素。DOM 需要了解您需要刪除的元素，以及它的父元素，所以無法在不引用父元素的情況下刪除某個元素。

? 2.如果不清楚父元素，可以先找到您需要刪除的子元素，然后使用parentNode屬性來查找其父元素

2.4 修改頁面中的某一個節點

replaceChild() 方法: 替換 HTML DOM 中的元素。

例：點擊替換獲取第一個子元素創建新的文本節點并替換掉第一個子元素的文本

替換前：

在這里插入圖片描述

替換后：

在這里插入圖片描述

<ul id="myList"><li id="a">hello</li><li id="b">world</li>
</ul>
<button onclick="myFunction()">替換</button><script>
function myFunction() {// 選取第一個子元素：var element = document.getElementById("myList").children[0];// 創建新的文本節點：var newNode = document.createTextNode("JavaScript");// 替換文本節點：element.replaceChild(newNode, element.childNodes[0]);            }
</script>

注：1.replaceChild() 方法可將某個子節點替換為另一個。新節點可以是文本中已存在的，或者是你新創建的。

? 2.新節點是要插入的節點對象，括號內第一個。之前的節點是要移除的節點對象，括號內的后一個。

? 3.返回值為替換的新節點。

2.5 復制節點中的某一個節點：

cloneNode() 方法可創建指定的節點的精確拷貝。

cloneNode() 方法拷貝所有屬性和值。

該方法將復制并返回調用它的節點的副本。

cloneNode（true）參數deep是boolean型。true/false

? true：表示深度復制（將節點及其子節點都進行復制）—- 深拷貝

? false：表示淺復制（只復制節點而不復制子節點）—- 淺拷貝

例：點擊按鈕復制最后一個節點追加到對應列表id后面

復制前：

在這里插入圖片描述

復制后：

在這里插入圖片描述

<button onclick="myFunction()">復制</button><ul id="myList1"><li>JS</li><li id="b">JQ</li></ul>
<ul id="myList2"><li>HTML</li><li>Css</li></ul><script>function myFunction() {//獲取列表id的最后一個節點var node = document.getElementById("myList2").lastChild;//將節點復制var clone = node.cloneNode(true);//將節點追加到對應的列表id后面document.getElementById("myList1").appendChild(clone);            }
</script>

2.6 獲取元素的非行間樣式：

getComputedStyle（非IE使用）、currentStyle（IE使用）

例：獲取背景顏色的屬性值賦值到對應的文本

效果圖：

在這里插入圖片描述

<h2 id="test" style="background-color:pink">getComputedStyle() 方法</h2>
<p id="demo"></p>
<script>
window.onload=function(){//獲取idvar get = document.getElementById("test");//獲取id的樣式var cssObj = window.getComputedStyle(get, null);//通過樣式找到對應背景顏色的屬性值var bgColor = cssObj.getPropertyValue("background-color");//將屬性值賦給對應的文本id document.getElementById("demo").innerHTML = bgColor;}
</script>

三、課后作業

預習
完成課堂上機練習
- 練習1：單擊“刪除”按鈕，使用parentNode訪問當前節點的父親節點等，使用removeChild( )刪除當前商品
  
  效果如下；
  
  素材：
- 練習2：完成動態生成表格案例，具體要求如下。
  1. 使用數組把學生數據模擬出來。
  2. 動態創建行、單元格。
  3. 為單元格填充數據。
  4. 提供“刪除”鏈接，可刪除所在的行。
  案例的實現效果如下圖所示。