HTML DOM 方法

HTML DOM 方法

HTML DOM（文档对象模型）方法是 JavaScript 提供的用于操作和处理 HTML 文档的一组函数。通过使用这些方法，我们可以对 HTML 元素进行增删改查，以实现动态的网页效果和交互。

以下是一些常见的 HTML DOM 方法：

• getElementById(id)：根据给定的 ID 值获取对应的元素节点。
• getElementsByClassName(className)：根据给定的类名获取所有具有该类名的元素节点。
• getElementsByTagName(tagName)：根据给定的标签名获取所有具有该标签名的元素节点。
• querySelector(selector)：根据 CSS 选择器获取匹配的第一个元素节点。
• querySelectorAll(selector)：根据 CSS 选择器获取匹配的所有元素节点。
• createElement(tagName)：创建一个指定标签名的新元素节点。
• appendChild(node)：将一个节点添加为另一个节点的子节点。
• removeChild(node)：从其父节点中移除一个子节点。
• setAttribute(attribute, value)：设置元素的指定属性及其对应的值。
• getAttribute(attribute)：获取元素的指定属性的值。

通过使用这些方法，我们可以实现对 HTML 元素的选择、创建、添加、删除和属性操作等功能。这些方法使得 JavaScript 能够与 HTML 文档进行紧密的交互，从而实现丰富的网页功能。

下面是一个简单的示例，演示如何使用 HTML DOM 方法创建一个新的 <p> 元素并将其添加到文档中：

// 创建新元素节点
const paragraph = document.createElement('p');

// 设置元素属性和内容
paragraph.textContent = '这是一个新的段落。';
paragraph.setAttribute('class', 'highlight');

// 将元素添加到文档中
document.body.appendChild(paragraph);

通过灵活运用 HTML DOM 方法，我们可以实现各种复杂的动态网页效果和交互功能。

希望这篇文章对你有所帮助！如果还有其他问题，请随时提问。