JavaScript中的Child指的是DOM樹中的子節點,這些節點可以是元素節點、文本節點、注釋節點等。子節點可以通過parentNode、childNodes、firstChild、lastChild、previousSibling和nextSibling等屬性和方法進行訪問和操作。
比如有以下HTML代碼:
<div id="parent"> <p>我是子節點1</p> <span>我是子節點2</span> <!-- 我是注釋節點 --> <p>我是子節點3</p> 我是文本節點 </div>其中,div元素有4個子節點,分別是3個元素節點(p、span、p)和1個文本節點。注釋節點不會被認為是子節點。 我們可以通過以下方式獲取父節點和子節點:
var parent = document.getElementById('parent'); var children = parent.childNodes;這里要注意的是,childNodes返回的是NodeList對象,包含了所有子節點,包括文本節點和注釋節點。 我們可以通過以下方式獲取第一個和最后一個子節點:
var firstChild = parent.firstChild; var lastChild = parent.lastChild;此時,firstChild是
我是子節點1
元素節點,而lastChild則是一個文本節點。因為div元素中最后一個節點并不是我是子節點3
,而是文本節點“我是文本節點”。 我們也可以通過previousSibling和nextSibling屬性獲取前面和后面的兄弟節點:var secondChild = firstChild.nextSibling; var thirdChild = secondChild.nextSibling; var previousChild = thirdChild.previousSibling;secondChild即是我是子節點2元素節點,thirdChild則是注釋節點。previousChild即是secondChild節點。 另一種獲取子節點的方式是使用children屬性,這個屬性只包含元素節點,而不包含文本節點和注釋節點:
var children = parent.children;這時候children數組中只有
我是子節點1
和我是子節點2兩個元素節點。 我們還可以動態地添加、刪除節點,比如:var newChild = document.createElement('p'); newChild.innerHTML = '我是新的子節點'; parent.appendChild(newChild);這樣就在div元素最后面添加了一個新的子節點。 最后要注意的是,childNodes、children、firstChild、lastChild、previousSibling、nextSibling等屬性和方法都是只讀的,不能直接賦值。若需要添加、刪除節點,需要使用appendChild、removeChild等方法。
上一篇php 5.6 語句