JavaScript 中的 DOM（文档对象模型）是什么

DOM（文档对象模型）是 Web 文档的编程接口。它将网页的结构表示为对象树，其中每个对象对应于页面的一部分，例如元素、属性和文本内容。

在 JavaScript 中，DOM 允许您以编程方式与 HTML 或 XML 文档进行交互。它使您能够动态修改网页的内容、结构和样式。

DOM 的关键概念：

1. 文档：指整个网页。
2. 元素：表示
   、

   、等HTML标签

3. 节点：DOM树中的基本单元，可以是元素、文本或属性。
4. DOM 树：将网页表示为节点树的分层结构。根节点是文档，每个 HTML 元素都是从它分支的节点。

DOM 表示示例：

对于 HTML 文档，例如：


  
    <title>My Page</title>
  
  
    <div>



<p>The DOM for this document might look like this:<br>
</p>

<pre class="brush:php;toolbar:false">Document
 ├── html
     ├── head
     │    └── title
     └── body
          └── div#content
               ├── h1
               └── p

JavaScript 如何使用 DOM：

1. 访问元素：JavaScript 可以使用 document.getElementById() 或 document.querySelector() 等方法从 DOM 中选择和访问元素。

   let heading = document.getElementById("content");

1. 操作元素：JavaScript 可以修改元素的内容、属性或样式。

   heading.innerHTML = "New Content";
   heading.style.color = "red";

1. 事件处理：JavaScript 可以将事件侦听器附加到 DOM 元素，以响应用户操作，例如单击、按键等。

   document.getElementById("myButton").addEventListener("click", function() {
     alert("Button clicked!");
   });

1. 创建和删除元素：JavaScript 可以动态创建新元素或删除现有元素。

   const newElement = document.createElement("div");
   document.body.appendChild(newElement);

为什么 DOM 很重要：

• 它为 JavaScript 提供了一种与网页的结构和内容交互并操作网页的结构和内容的方法。
• 它允许动态、交互式网页，无需重新加载页面（例如，更新 UI 或处理用户输入）。

DOM 方法：

以下是 JavaScript 中一些常用的 DOM 方法：

• getElementById()：通过 ID 选择元素。
• querySelector()：使用 CSS 选择器选择第一个匹配元素。
• createElement()：创建一个新的 HTML 元素。
• appendChild()：向元素添加新的子节点。
• removeChild()：从元素中删除子节点。
• setAttribute()：设置元素的属性。
• addEventListener()：将事件处理程序附加到元素。

实际应用示例：

  
    <title>My Page</title>
  
  
    <div>



<p>The DOM for this document might look like this:<br>
</p>

<pre class="brush:php;toolbar:false">Document
 ├── html
     ├── head
     │    └── title
     └── body
          └── div#content
               ├── h1
               └── p

在此示例中，选择了 h1 元素，更新了其内容，并附加了一个单击事件侦听器。单击标题时，会显示一条警报。

DOM 是使用 JavaScript 动态操作网页结构的基本概念，也是创建交互式 Web 应用程序的基础。