在 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：
<code class="javascript">// 获取一个元素
const button = document.querySelector('button');
// 添加事件侦听器
button.addEventListener('click', () => {
// 修改元素
button.innerHTML = '已点击';
});</code>在这个示例中，我们获取了一个按钮元素，然后添加一个点击事件侦听器。当按钮被点击时，我们修改了它的 innerHTML 属性以更新其内容。
