JavaScript 中的節點

Anika Tabassum Era 2022年5月10日
JavaScript 中的節點

JavaScript 使約定能夠跟蹤 HTML 元素父節點和子節點。通常,如果我們在另一個元素下有一個元素,則此模式的整體結構將稱為父子樹

在 JavaScript 中,我們可以更改父元素的任何子元素。此外,我們可以新增和刪除孩子。

在這裡,我們將看到兩個示例,其中一個將解釋我們如何區分多種型別的子元素。另一個示例將描述將新的子元素附加到父元素。

在 JavaScript 中從父節點中選擇子節點

在這種情況下,我們將啟動一個具有多個 p 元素和一個 article 元素的 div 元素。驅動是挑選所有 p 元素並以不同的色調為它們著色以區分 articlep 元素。

讓我們關注程式碼行以便更好地理解。

程式碼片段:

<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
 <article>
   Howdy!
 </article>
<p>Click button to change the color of all p elements.</p>
<button onclick="changeColor()">Hit it</button>
<script>
function changeColor() {
  const Nodelist = document.querySelectorAll("p");
  for (let i = 0; i < Nodelist.length; i++) {
    Nodelist[i].style.color = "blue";
  }
}
</script>
</body>
</html>

輸出:

從父節點中選擇子節點

在 JavaScript 中將新的子節點附加到特定的父節點

在這裡,我們將看到一個例項,我們將在其中附加一個新的子節點。我們將有一個帶有多個 p 元素的 div 元素。

將從指令碼標籤新增一個新節點。首先,我們將執行 createElement 並建立 p 標籤。

稍後我們會將文字新增到 p 元素。下一步將把這個新節點附加到父節點,這個新節點將自動新增到 HTML 預覽

程式碼片段:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="div1">
<p>paragraph 1.</p>
<p>paragraph 2.</p>
</div>
  <script>
const p = document.createElement("p");
const node = document.createTextNode("paragraph 3.");
p.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(p);
  </script>
</body>
</html>

輸出:

將新的子節點附加到特定的父節點

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook