谈谈dom方式的用法

文档对象模型（DOM）是一种基于树的 API。 它允许程序访问和操作 HTML 或 XML 文档的内容和结构。 在浏览器中，JavaScript 通过 DOM 来操作 HTML 或 XML 文档。

const header = document.getElementById("header"); // 获取 id 为 header 的元素
header.innerHTML = "Hello World"; // 修改元素内容

通过 DOM 可以遍历文档中的所有节点，可以使用以下属性和方法进行节点遍历：

• parentNode：获取当前节点的父节点
• childNodes：获取当前节点的子节点列表
• firstChild：获取当前节点的第一个子节点
• lastChild：获取当前节点的最后一个子节点
• nextSibling：获取当前节点的下一个兄弟节点
• previousSibling：获取当前节点的上一个兄弟节点

const list = document.getElementsByTagName("li");
for (let i = 0; i < list.length; i++) {
    console.log(list[i].innerHTML); // 打印 li 元素的内容
}

通过 DOM 可以操作文档中的节点，可以使用以下方法和属性进行节点操作：

• createElement：创建一个新的节点
• appendChild：在节点的子节点列表末尾添加新的子节点
• insertBefore：在节点的子节点列表中插入新的子节点
• removeChild：从节点的子节点列表中删除一个子节点
• setAttribute：设置指定名称的属性
• getAttribute：获取指定名称的属性值

const p = document.createElement("p"); // 创建一个新的 p 元素
p.innerHTML = "Hello World";
const parent = document.getElementById("content"); // 获取 id 为 content 的元素
parent.appendChild(p); // 将 p 元素添加到 content 元素的子节点列表末尾

通过 DOM 可以添加事件处理程序来响应用户的事件，可以使用以下方法进行事件处理：

• addEventListener：在节点上添加事件处理程序
• removeEventListener：从节点上删除事件处理程序

const button = document.getElementById("button"); // 获取 id 为 button 的元素
button.addEventListener("click", function() { // 为 button 元素添加 click 事件处理程序
    console.log("Hello World");
});