在 JavaScript 中獲取子元素

Muhammad Muzammil Hussain 2022年5月5日
在 JavaScript 中獲取子元素

本文解釋瞭如何使用 JavaScript 從 HTML 中的網頁正文中獲取子節點。

使用 JavaScript 從 HTML 中的網頁正文中獲取子節點

使用 JavaScript 獲取節點的子節點意味著訪問整個頁面並將其放入陣列中。請務必記住,空格被視為網頁中的文字節點。

在空格的情況下,過時的瀏覽器會以不同的方式處理它。其中一些被認為是 childNodes,而另一些則被認為是小於版本 8 的 Internet Explorer 之類的子節點。

<!DOCTYPE html>
<html>
<body>
<!-- we are writing a comment node! -->

<p>Click GET NODES button to get child nodes.</p>

<button onclick="getMyWebPageChildNodes()">GET NODES</button>

<p id="results"></p>

<script>
function getMyWebPageChildNodes() {
var myChildsNode = document.body.childNodes;
var textMessages = "";
var i;
for (i = 0; i < myChildsNode.length; i++) {
textMessages = textMessages + myChildsNode[i].nodeName + "<br>";
}

document.getElementById("results").innerHTML = textMessages;
}
</script>
</body>
</html>

在上面的程式碼中,我們建立了一個按鈕並在該按鈕上設定了一個名為 onClick 的偵聽器。

我們對名為 getMyWebPageChildNodesonclick 進行了操作。我們建立了一個名為 myChildsNode 的陣列,並將所有子節點儲存在此函式中。

之後,我們建立一個變數 textMessages,我們在其中儲存節點,完全沒有註釋。建立一個 counter 變數來迭代 myChildsNode 陣列。

我們建立了一個 for 迴圈,在其中我們獲取網頁上所有節點的名稱,然後將其儲存在 textMessages 變數中。完成後,你將獲得所有節點名稱,for 迴圈將終止。

在這裡,我們將這些節點分配給我們的段落標籤 id=results。最後,我們得到一個段落標籤中的所有子節點。

相關文章 - JavaScript Element