JavaScript DOM 子節點是指在一個父節點下直接的子元素,它們可以是元素節點、文本節點或屬性節點。當我們需要操作 DOM 樹的時候,了解子節點的相關知識是非常重要的。
下面是一個例子,假設我們有一個段落標簽,其中包含了三個子節點,分別是一個文本節點、一個 span 標簽和另一個文本節點:
<p id="paragraph"> Hello, <span>world</span>! How are you? </p>
我們可以使用 JavaScript 進行以下操作:
子節點的訪問
代碼示例:
var paragraph = document.getElementById("paragraph"); var firstChild = paragraph.firstChild; var lastChild = paragraph.lastChild; console.log(firstChild); // 文本節點 " Hello, " console.log(lastChild); // 文本節點 " How are you?"
上面代碼中,我們使用 getElementById 方法選中了段落標簽,然后使用 firstChild 和 lastChild 分別獲取了第一個子節點和最后一個子節點。需要注意的是,firstChild 和 lastChild 可能不是我們期望的元素節點,如果有沒有子節點,它們會返回 null。
子節點的添加和刪除
代碼示例:
var paragraph = document.getElementById("paragraph"); var newElement = document.createElement("a"); newElement.; newElement.textContent = "Click here"; paragraph.insertBefore(newElement, paragraph.lastChild); paragraph.removeChild(paragraph.firstChild);
上面代碼中,我們首先創建了一個新的 a 標簽,并為其添加了 href 屬性和文本內容。接著,使用 insertBefore 方法將這個新元素插入到了段落標簽的最后一個子節點的前面,形成了如下結構:
<p id="paragraph"> Hello, <span>world</span>! <a >Click here</a> How are you? </p>
之后,我們又使用 removeChild 方法將第一個子節點(即文本節點 " Hello, ")刪除了。
子節點的替換
代碼示例:
var span = document.getElementsByTagName("span")[0]; var newElement = document.createElement("strong"); newElement.textContent = "world"; span.parentNode.replaceChild(newElement, span);
上面代碼中,我們首先選中了文檔中的 span 標簽,并創建了一個新的 strong 標簽,其中的文本內容與原來的 span 標簽相同。接著,我們使用 parentNode 屬性獲取到了 span 標簽的直接父節點,也就是段落標簽。然后使用 replaceChild 方法將 span 標簽替換成了新的 strong 標簽,形成了如下結構:
<p id="paragraph"> Hello, <strong>world</strong>! How are you? </p>
通過上述例子,我們可以看出,掌握 JavaScript DOM 中的子節點操作,對于從一個 DOM 元素向其子元素的遍歷、從其子元素向其父元素的遍歷、從和兄弟元素的遍歷都是非常重要的。