掌握 JavaScript 中的 DOM 操作：綜合指南

JavaScript 中的 DOM 操作

DOM 操作 是現代 Web 開發的一個基本面，它允許開發人員動態修改網頁的內容、結構和樣式。文件物件模型 (DOM) 以樹狀格式表示網頁的 HTML 結構。

---

1.什麼是 DOM？

DOM 是瀏覽器提供的接口，允許 JavaScript 與 HTML 和 CSS 互動。它將頁面表示為節點樹，其中每個元素、屬性或文字都是一個節點。

例子：

對於以下 HTML：

<div>



<p>The DOM structure looks like this:</p>

<ul>
<li>Document

<ul>
<li>HTML</li>
<li>Body

<ul>
<li>Div (id="container")</li>
<li>Paragraph ("Hello, World!")</li>
</ul>


</li>

</ul>

</li>

</ul>


<hr>

<h3>
  
  
  <strong>2. Selecting DOM Elements</strong>
</h3>

<h4>
  
  
  <strong>A. Using getElementById</strong>
</h4>

<p>Select an element by its ID.<br>
</p>

<pre class="brush:php;toolbar:false">const container = document.getElementById("container");
console.log(container); // Output: <div>



<h4>
  
  
  <strong>B. Using querySelector</strong>
</h4>

<p>Select the first matching element.<br>
</p>

<pre class="brush:php;toolbar:false">const paragraph = document.querySelector("p");
console.log(paragraph); // Output: <p>Hello, World!</p>

C.使用 querySelectorAll

選擇所有符合的元素作為 NodeList。

const allParagraphs = document.querySelectorAll("p");
console.log(allParagraphs); // Output: NodeList of <p> elements
</p>

---

3.修改 DOM 元素

A.更改內容

使用textContent或innerHTML屬性來修改內容。

const paragraph = document.querySelector("p");
paragraph.textContent = "Hello, JavaScript!";
// Changes <p>Hello, World!</p> to <p>Hello, JavaScript!</p>

B.更改屬性

使用 setAttribute 或直接屬性賦值。

const image = document.querySelector("img");
image.setAttribute("src", "new-image.jpg");
image.alt = "A descriptive text";

C.改變風格

修改樣式屬性以套用內聯樣式。

const container = document.getElementById("container");
container.style.backgroundColor = "lightblue";
container.style.padding = "20px";

---

4.新增和刪除元素

A.建立新元素

使用createElement方法。

const newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
document.body.appendChild(newParagraph);

B.刪除元素

使用remove方法或removeChild。

const paragraph = document.querySelector("p");
paragraph.remove(); // Removes the paragraph from the DOM

---

5.新增事件監聽器到元素

您可以使用事件偵聽器為元素新增互動性。

const button = document.createElement("button");
button.textContent = "Click Me";

button.addEventListener("click", function() {
  alert("Button clicked!");
});

document.body.appendChild(button);

---

6.遍歷 DOM

瀏覽父元素、子元素和兄弟元素。

A.家長與孩子

const child = document.querySelector("p");
const parent = child.parentElement;
console.log(parent); // Output: Parent element of <p>

const children = parent.children;
console.log(children); // Output: HTMLCollection of child elements
</p>

B.兄弟姊妹

const sibling = child.nextElementSibling;
console.log(sibling); // Output: Next sibling element

---

7.效能最佳化

1. 使用 documentFragment 進行批次更新： 透過對 DOM 更新進行分組，最大限度地減少回流和重繪。

   const fragment = document.createDocumentFragment();
   for (let i = 0; i 




最小化直接 DOM 操作:

快取元素並批量修改。 
使用虛擬 DOM 函式庫:

對於複雜的應用程序，請考慮像 React 或 Vue 這樣的程式庫。 






  
  
  8.實際範例：待辦事項清單




<div>



<p>The DOM structure looks like this:</p>

<ul>
<li>Document

<ul>
<li>HTML</li>
<li>Body

<ul>
<li>Div (id="container")</li>
<li>Paragraph ("Hello, World!")</li>
</ul>


</li>

</ul>

</li>

</ul>


<hr>

<h3>
  
  
  <strong>2. Selecting DOM Elements</strong>
</h3>

<h4>
  
  
  <strong>A. Using getElementById</strong>
</h4>

<p>Select an element by its ID.<br>
</p>

<pre class="brush:php;toolbar:false">const container = document.getElementById("container");
console.log(container); // Output: <div>



<h4>
  
  
  <strong>B. Using querySelector</strong>
</h4>

<p>Select the first matching element.<br>
</p>

<pre class="brush:php;toolbar:false">const paragraph = document.querySelector("p");
console.log(paragraph); // Output: <p>Hello, World!</p>








  
  
  9.總結



DOM Manipulation 讓開發者動態修改網頁。 
使用 getElementById、querySelector 和 createElement 等方法進行有效操作。 
最小化直接 DOM 操作以獲得更好的效能。 


掌握 DOM 操作對於建立動態、互動式和使用者友善的 Web 應用程式至關重要。 

嗨，我是 Abhay Singh Kathayat！ 

我是一名全端開發人員，擁有前端和後端技術的專業知識。我使用各種程式語言和框架來建立高效、可擴展且用戶友好的應用程式。 

請隨時透過我的商務電子郵件與我聯繫：kaashshorts28@gmail.com。