JavaScript-文档对象模型（DOM）

<p>DOM详解：网页文档的编程接口

<p>DOM（文档对象模型）是用于网页文档的编程接口，它将HTML或XML文档的结构表示为对象的树。借助DOM，开发者可以使用JavaScript动态地与网页交互并操作网页。HTML DOM允许JavaScript更改HTML元素的内容。

<p>

<p>如何在HTML页面中查找和访问HTML元素？

• 按ID查找HTML元素

<p>示例：

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

• 按标签名查找HTML元素

<p>示例：

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

• 按类名查找HTML元素

<p>示例：

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

• 使用CSS选择器查找HTML元素

<p>使用querySelectorAll()方法查找与指定CSS选择器（ID、类名、类型、属性、属性值等）匹配的所有HTML元素。

<p>示例：查找具有类名“intro”的段落元素：

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

• 使用HTML对象集合查找HTML元素

<p>节点 (Nodes)

<p>DOM中的所有内容都是节点，例如元素、文本、属性。

<p>元素节点 (Element Nodes):

<p>表示HTML或XML元素。例如：<div>、<h1>、<p>、<span>等。

<code class="language-html"><h1>Hello, World!</h1></code>

<p>在上面的例子中，<h1> 是一个元素节点。

<p>文本节点 (Text Node):

<p>表示元素内的文本内容。

<code class="language-html"><h1>Hello, World!</h1></code>

<p><h1> 元素内的文本 "Hello, World!" 是一个文本节点。

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

1. 创建元素: 使用document.createElement()方法创建HTML元素。
2. 创建文本节点: 使用document.createTextNode()方法创建文本节点。
3. 将文本添加到元素: 使用appendChild()方法将文本节点附加到已创建的元素。
4. 创建div元素: 再次使用document.createElement()创建<div>元素。
5. 将元素插入div: 使用appendChild()将前面创建的元素放入div中。
6. 将div插入文档: 最后，将div添加到文档主体（或任何其他所需的父元素）。

<p>示例代码片段（略去完整代码，仅保留关键部分）：

<code class="language-javascript">// 创建一个段落元素
const para = document.createElement("p");
// 创建一个文本节点
const text = document.createTextNode("这是一个新的段落！");
// 将文本节点添加到段落元素
para.appendChild(text);
// ... (后续代码将段落元素添加到页面)</code>

<p>更改HTML样式:

<p>语法：

<code class="language-javascript">document.getElementById(id).style.property = new style;</code>

<p>示例：（略）

<p>

<p>通过以上方法，您可以有效地操作和修改网页内容。

以上是JavaScript-文档对象模型（DOM）的详细内容。更多信息请关注PHP中文网其他相关文章！