目錄
- 節點
- 概念
- 節點的屬性
- 節點層級
- 概念
- 節點操作
- 創建新節點
- 增添和洗掉節點
- 復制節點
- 練習
節點
概念
一個頁面就是一個節點樹，頁面中的內容就是節點，
例如：HTML檔案可以看作是一個節點樹，網頁中的所有內容都是節點，
節點的屬性
(1)節點型別(nodeType)
A、1表示為元素節點(即標簽)
B、2表示為屬性節點(標簽的屬性)
C、3表示為文本節點(標簽的內容)，文本節點包括文字、空格、換行等
(2)節點名稱(nodeName)
(3)節點值(nodeValue)
節點層級
概念
一個HTML檔案可以看作是所有元素組成的一個節點樹，各元素節點之間有級別的劃分，
DOM根據HTML中各節點的不同作用，可將其分別劃分為標簽節點（元素節點）、文本節點和屬性節點，
(1)節點之間的層級關系：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>節點層級</title>
</head>
<body>
<p>段落...</p>
<a href="#"></a>
</body>
</html>
根節點：<html>標簽是整個檔案的根節點，有且僅有一個
父節點：指的是某一個節點的上級節點
子節點：指的是某一個節點的下級節點
兄弟節點：兩個節點同屬于一個父節點(p標簽和a標簽就是兄弟節點)
(2)獲取父節點的方式：
parentNode屬性：來獲得離當前元素的最近的一個父節點
(3)獲取子節點、子元素的方式：
A、childNodes屬性：回傳當前節點的所有子節點的集合,回傳的節點包括元素、文本和其他節點
B、children屬性：只回傳子元素節點的集合(標簽的集合)
C、firstChild屬性：回傳第一個子節點(元素節點或文本節點)
D、firstElementChild屬性：回傳第一個子元素（第一個子標簽）
E、lastChild屬性：回傳最后一個子節點(元素節點或文本節點)
F、lastElementChild屬性：回傳最后一個子元素）（最后一個子標簽）
obj.children[0] // 獲取第一個子元素節點
obj.children[obj.children.length - 1] // 獲取最后一個子元素節點
(4)獲取兄弟節點、兄弟元素的方式
A、nextSibling屬性：回傳后一個兄弟節點
B、previousSibling屬性：回傳前一個兄弟節點
C、nextElementSibling屬性：回傳下一個兄弟元素
D、previousElementSibling屬性：回傳前一個兄弟元素
節點操作
創建新節點
(1)通過createElement創建元素節點(創建標簽)；
通過createTextNode創建文本節點
(2)補充：
動態創建元素節點的3種常見方式如下：
document.write()創建元素，如果頁面檔案流加載完畢，再呼叫會導致頁面重繪
element.innerHTML將內容寫入某個DOM節點，不會導致頁面全部重繪
document.createElement()創建多個元素效率稍微低一點，但是結構更加清晰
增添和洗掉節點
appendChild()方法，將一個節點添加到指定父節點的子節點串列末尾
insertBefore(child, 指定元素)方法，將一個節點添加到父節點的指定子節點前面
removeChild(child)用于洗掉節點，該方法從DOM中洗掉一個子節點，回傳洗掉的節點
復制節點
cloneNode(deep)
注意：
deep是邏輯值，true表示深拷貝,即復制當前節點及其所有子節點(默認值)
false表示淺拷貝，只復制當前節點不復制其子節點，
練習
<h3 id="h">插入節點</h3>
<form name="frm">
輸入文本：<input type="text" name="txt">
<input type="button" value="插入節點" onclick="insertNode('h',document.frm.txt.value)">
</form>
<script>
function insertNode(nodeid,str){
//創建一個p標簽
var newNode=document.createElement('p')
//創建一個文本節點
var newTxt=document.createTextNode(str)
//將文本節點插入到p標簽中
newNode.appendChild(newTxt)
var ref=document.querySelector('#'+nodeid)
//判斷ref是否有父節點，若節點沒有父節點，則無法插入節點
if(ref.parentNode){
ref.parentNode.insertBefore(newNode,ref)
}
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/289317.html
標籤：其他