在 javascript 中使用 dom 可以实现以下操作：获取元素（使用 document.queryselector() 和 document.queryselectorall()）。修改元素（通过属性和方法，如 innerhtml、classlist 和 style）。添加和删除元素（使用 appendchild() 和 removechild()）。处理事件（使用 addeventlistener()）。遍历 dom（使用 parentnode、childnodes 和 nextsibl
在 JavaScript 中使用 DOM
DOM（文档对象模型）是 JavaScript 操作网页内容的主要方式。它提供了一个树形结构的表示，其中 HTML 元素作为节点，而这些节点可以通过 JavaScript 访问和修改。
如何使用 DOM？
- 获取元素：可以使用 document.querySelector() 和 document.querySelectorAll() 方法来获取单个元素或一组元素。
- 修改元素：可以通过各种属性和方法来修改元素，例如 innerHTML、classList 和 style。
- 添加和删除元素：可以使用 appendChild() 和 removeChild() 方法来添加和删除元素。
- 处理事件：可以使用 addEventListener() 方法来侦听元素上的事件，例如 click 或 mouseover。
- 遍历 DOM：可以使用 parentNode、childNodes 和 nextSibling 等属性来遍历 DOM 树。
DOM 的优点
- 提供对网页内容的动态访问和修改。
- 支持各种操作，包括获取、创建、修改和删除元素。
- 允许处理用户交互，例如点击、鼠标悬停和键盘输入。
- 跨浏览器兼容，在大多数主流浏览器中工作良好。
DOM 的示例
下面是一个 JavaScript 代码示例，说明如何使用 DOM：
// 获取一个元素
const button = document.querySelector('button');
// 添加事件侦听器
button.addEventListener('click', () => {
// 修改元素
button.innerHTML = '已点击';
});
在这个示例中，我们获取了一个按钮元素，然后添加一个点击事件侦听器。当按钮被点击时，我们修改了它的 innerHTML 属性以更新其内容。
