掌握 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。