JavaScript-文档对象模型（DOM）

dom（文档对象模型）是web文档的编程接口，它将html或xml文档的结构表示为对象树。借助dom，开发者可以使用javascript与网页交互并操作网页内容。html dom允许javascript更改html元素的内容、属性和样式。

在HTML页面中查找和访问HTML元素的方法：

• 通过ID查找: 例如，ID为"intro"的元素：

<code class="javascript">const element = document.getElementById("intro");</code>

• 通过标签名查找: 例如，查找所有<p></p>标签：

<code class="javascript">const elements = document.getElementsByTagName("p");</code>

• 通过类名查找: 例如，类名为"intro"的元素：

<code class="javascript">const elements = document.getElementsByClassName("intro");</code>

• 使用CSS选择器查找: querySelectorAll()方法可以查找匹配指定CSS选择器的所有HTML元素。例如，查找类名为"intro"的<p></p>标签：

<code class="javascript">const elements = document.querySelectorAll("p.intro");</code>

• 通过HTML集合遍历查找:

DOM中的所有内容都是节点，包括元素、文本和属性。

• 元素节点: 代表HTML或XML元素，例如：<div>、<code><p></p>、<h1></h1>等。 例如：

  <code class="html"><h1>Hello, world!</h1></code>

  • 文本节点: 代表元素内的文本内容。在上面的例子中，“Hello, world!”就是一个文本节点。

  创建新的HTML元素（节点）：

  

  海鲸AI

  多模型AI写作聚合平台，集成豆包、文心一言、通义千问等AI模型，支持AI对话、AI文档解析，AI翻译等，是你办公学习的得力助手

  下载

  立即学习“Java免费学习笔记（深入）”；

  1. 创建元素: 使用document.createElement()方法创建HTML元素。
  2. 创建文本节点: 使用document.createTextNode()方法创建文本节点。
  3. 将文本添加到元素: 使用appendChild()方法将文本节点添加到新创建的元素。
  4. 将元素添加到文档: 使用appendChild()方法将新创建的元素添加到文档中的某个父元素（例如，）。

  示例：

  <code class="html"><div id="para"></div>
  <script>
      const elem = document.createElement("h1");
      const text = document.createTextNode("Payilagam");
      elem.appendChild(text);
      document.getElementById("para").appendChild(elem);
  </script></code>

  更改HTML样式:

  语法：document.getElementById(id).style.property = newStyle;

  示例：

  <code class="html"><div id="para" onclick="change()"><h1>Payilagam</h1></div>
  <script>
      function change() {
          para.style.color = "red";
      }
  </script></code>

  (图片描述：点击前后的样式变化)