关键要点
- DOM 元素 (节点) 是 HTML 文档中可被 JavaScript 操作的基本单位。
- 研究表明，DOM 树由元素节点、文本节点等组成，适合动态网页开发。
- 常见操作包括创建、插入、删除和替换节点，使用方法如
createElement()和appendChild()。
什么是 DOM 元素 (节点)？
DOM (Document Object Model) 是 HTML 文档的对象模型，允许 JavaScript 访问和修改网页内容。每个 HTML 元素都被视为一个节点，组成树状结构。例如，<div> 是元素节点，里面的文本是文本节点。
常见操作
- 创建新元素：用
document.createElement()创建元素，再用appendChild()添加到页面。 - 插入元素：用
insertBefore()在指定位置插入新元素。 - 删除元素：用
remove()或removeChild()删除节点，注意旧浏览器可能不支持remove()。 - 替换元素：用
replaceChild()替换旧节点。
示例
以下是创建新元素的代码：
var para = document.createElement("p");
var node = document.createTextNode("新段落");
para.appendChild(node);
document.getElementById("div1").appendChild(para);详细报告
JavaScript HTML DOM 元素 (节点) 是现代网页开发中不可或缺的一部分，允许开发者通过 JavaScript 动态操作 HTML 文档。本报告基于多个可靠的中文来源（如菜鸟教程、w3ccoo 和 w3school）提供全面的讲解，涵盖 DOM 元素的基本概念、常见操作以及实际示例。
DOM 元素 (节点) 的基本概念
根据 JavaScript HTML DOM 元素 (节点) | 菜鸟教程，DOM (Document Object Model) 是 HTML 文档的对象模型表示，它将文档视为一个树状结构，每个 HTML 元素都被视为一个节点 (node)。这些节点包括：
- 元素节点 (Element Node)：如
<div>、<p>、<button>等 HTML 标签。 - 文本节点 (Text Node)：元素内的文本内容。
- 其他节点：如注释节点 (Comment Node) 等。
研究表明，DOM 树由这些节点组成，开发者可以通过 JavaScript 访问和操作这些节点，从而实现动态网页功能。
常见操作
以下是 JavaScript 中对 DOM 元素 (节点) 的常见操作，基于 JavaScript HTML DOM 节点 （元素） | JavaScript 教程 和 JavaScript HTML DOM 元素（节点）：
- 创建新元素
- 使用
document.createElement("tagname")创建一个新的 HTML 元素。 - 使用
document.createTextNode("text")创建一个文本节点。 - 将文本节点添加到元素中，使用
appendChild()方法。 - 将新元素添加到文档中，通常通过
appendChild()将其附加到已存在的元素上。 示例：
// 创建一个新的 <p> 元素
var para = document.createElement("p");
// 创建一个文本节点
var node = document.createTextNode("这是一个新段落。");
// 将文本节点添加到 <p> 元素中
para.appendChild(node);
// 将 <p> 元素添加到文档中的 <div> 元素中
var element = document.getElementById("div1");
element.appendChild(para);尝试：亲自试一试
- 插入元素
- 使用
insertBefore(newElement, existingElement)在指定的现有元素之前插入新元素。 示例：
// 在 <p id="p1"> 之前插入新元素
var newPara = document.createElement("p");
var node = document.createTextNode("这是插入的段落。");
newPara.appendChild(node);
var parent = document.getElementById("div1");
var existing = document.getElementById("p1");
parent.insertBefore(newPara, existing);尝试：亲自试一试
- 删除元素
- 使用
element.remove()删除元素（注意：旧版浏览器不支持）。 - 对于旧版浏览器，使用
parent.removeChild(child)。 示例：
// 删除 <p id="p1"> 元素
var element = document.getElementById("p1");
element.remove(); // 或 element.parentNode.removeChild(element);尝试：亲自试一试
- 替换元素
- 使用
parent.replaceChild(newElement, oldElement)将旧元素替换为新元素。 示例：
// 用新元素替换 <p id="p1">
var newPara = document.createElement("p");
var node = document.createTextNode("这是替换后的段落。");
newPara.appendChild(node);
var parent = document.getElementById("div1");
var oldPara = document.getElementById("p1");
parent.replaceChild(newPara, oldPara);尝试：亲自试一试
方法和示例总结
以下表格总结了常见的 DOM 元素操作方法及其用途：
| 操作 | 方法/函数 | 描述 | 示例 URL |
|---|---|---|---|
| 创建新元素 | document.createElement("p") | 创建一个新的 <p> 元素节点 | 亲自试一试 |
| 添加文本 | document.createTextNode("text") | 创建文本节点以追加到元素 | 亲自试一试 |
| 追加元素 | appendChild() | 将新元素作为父元素的最后一个子节点添加 | 亲自试一试 |
| 插入元素 | insertBefore() | 在指定子元素之前插入新元素 | 亲自试一试 |
| 删除元素 | remove() | 删除元素（旧浏览器不支持） | 亲自试一试 |
| 删除子元素 | removeChild() | 使用父元素删除子元素（适用于旧浏览器） | 亲自试一试 |
| 替换元素 | replaceChild() | 用新元素替换旧元素 | 亲自试一试 |
注意事项
- 浏览器兼容性：
remove()方法在旧版浏览器中可能不支持，需使用removeChild()。根据 JavaScript HTML DOM 节点 （元素） | JavaScript 教程，对于不支持remove()的浏览器，必须找到父节点才能删除元素。 - DOM 树结构：DOM 是一个树状结构，操作节点时需注意父子关系。例如，删除一个元素需要先获取其父元素。
- 文本节点：文本节点是元素内的文本内容，通常需要先创建文本节点，然后将其添加到元素中。
实际应用与示例
以上操作在实际开发中非常常见，例如动态生成表单、添加列表项或更新页面内容。基于 DOM 树，DOM 节点之间的关系（如父节点、子节点）决定了操作的顺序和结果。例如，空格和换行符也可能形成文本节点，成为 DOM 的一部分。
总结
JavaScript HTML DOM 元素 (节点) 是创建交互式网页的关键机制，通过创建、插入、删除和替换节点，开发者可以动态操作网页内容。这些操作是现代网页开发的基础，理解这些概念和方法可以帮助开发者更好地控制网页内容。