JavaScript-文档对象模型（DOM）

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

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

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

• 按ID查找HTML元素

示例：

const element = document.getElementById("intro");

• 按标签名查找HTML元素

示例：

const element = document.getElementsByTagName("p");

• 按类名查找HTML元素

示例：

const x = document.getElementsByClassName("intro");

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

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

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

const x = document.querySelectorAll("p.intro");

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

节点 (Nodes)

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

元素节点 (Element Nodes):

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

<h1 id="Hello-World">Hello, World!</h1>

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

文本节点 (Text Node):

表示元素内的文本内容。

<h1 id="Hello-World">Hello, World!</h1>

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

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

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

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

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

更改HTML样式:

语法：

document.getElementById(id).style.property = new style;

示例：（略）



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