1. 節點之間的關係
1.1 第一種獲取方式
以下獲取節點都會獲取所有的節點類型,不只是包括元素節點,還有文本類型等
獲取一個元素節點的所有子節點
元素節點對象.childNodes
獲取到的是一個類數組 NodeList
獲取一個元素節點的第一個子節點
元素節點對象.firstChild
獲取一個元素節點的最後一個子節點
元素節點對象.lastChild
獲取一個元素節點的下一個節點對象
元素節點對象.nextSibling
獲取一個元素節點的上一個節點對象
元素節點對象.previousSibling
獲取一個元素節點的父節點
元素節點對象.parentNode
1.2 第二種獲取方式
以下獲取節點只會獲取到元素節點類型
獲取一個元素節點的所有子節點
元素節點對象.children
獲取到的是一個類數組HTMLCollection
獲取一個元素節點的第一個元素子節點
元素節點對象.firstElementChild
獲取一個元素節點的最後一個元素子節點
元素節點對象.lastElementChild
獲取一個元素節點的下一個兄弟元素節點
元素節點對象.nextElementSibling
獲取一個元素節點的上一個兄弟元素節點
元素節點對象.previousElementSibling
獲取一個元素節點的元素父節點
元素節點對象.parentElement
獲取一個元素節點的所有子節點個數
元素節點對象.childElementCount
2. 節點的增加,插入,替換,移除,克隆
2.1 增加節點
增加文本節點
var text = document.createTextNode("文本內容")
增加元素節點
var ele = document.createElement("元素名")
2.2 插入子節點
插入節點必須通過父元素進行插入
如把上面的文本節點添加到元素節點中去
追加法
語法: 父元素對象.appendChild(要插入的節點對象名)
ele.appendChild(text);
在某一個子節點前插入節點
語法: 父元素對象.insertBefore(要插入的節點對象名,插入到哪個元素節點前)
ele.insertBefore(text,ele.lastElementChild);
ele.insertBefore(text,null);
ele.insertBefore(text,undefined);
如果第二個參數傳入的是undefined或者null,那麼效果跟appendChild方法一樣
2.3 替換子節點
語法:父元素節點對象.replaceChild(新的節點,舊的節點)
//例: 將第2個li替換成p元素
<ul class="ul1">
<li>第 1 個 li</li>
<li>第 2 個 li</li>
<li>第 3 個 li</li>
</ul>
var ul = document.querySelector(".ul1");
var p = document.createElement("p");
ul.replace(p,ul.firstElement.nextElementSibling);
2.4 移除子節點
語法: 父元素節點對象.removeChild(要移除的子節點對象)
例:
ul.replace(ul.lastElementChild);
2.5 克隆節點
語法: 要複製的節點對象.cloneNode(true/false)
true表示深複製,就是全部複製,子孫之類的全部複製
false表示淺複製,就是隻複製當前的節點,子孫節點不會複製
var ul = document.querySelector(".ul1");
<ul class="ul1">
<li>第 1 個 li</li>
<li>第 2 個 li</li>
<li>第 3 個 li</li>
</ul>
//複製一份ul成爲ul的下一個兄弟
ul.parentElement.insertBefore(ul.cloneNode(true),ul.nextElementSibling);