在网页开发中，DOM（文档对象模型）扮演着重要的角色。它是 JavaScript 与网页内容交互的基础，同时也是实现网页动态性和交互性的关键。本文将介绍 DOM 的基本概念、操作方法以及一些实用技巧，帮助读者更好地理解和运用 DOM。
什么是 DOM？
DOM 是文档对象模型（Document Object Model）的缩写，它是一种用于表示和操作网页文档的接口。简单来说，DOM 将网页文档中的每个元素都抽象为一个对象，这些对象构成了一个层次结构，形成了网页文档的逻辑结构。通过 JavaScript，我们可以使用 DOM 提供的方法和属性来访问、创建、修改和删除网页中的元素和内容。
DOM 的结构
DOM 的结构可以用一棵树来描述，称为 DOM 树。在 DOM 树中，每个 HTML 元素都是一个节点（Node），节点之间通过父子关系、兄弟关系等连接起来。HTML 文档的根节点是 document 对象，它代表整个 HTML 文档。
使用 DOM
在 JavaScript 中，可以通过 document 对象来访问和操作 DOM。下面是一些常见的 DOM 操作：
获取元素： 使用 document.getElementById(), document.getElementsByClassName(), document.getElementsByTagName() 等方法获取网页中的元素。
操作元素： 使用 DOM 提供的属性和方法来操作元素，比如修改元素的内容、样式、属性等。
创建元素： 使用 document.createElement() 方法创建新的元素节点，并通过 appendChild()、insertBefore() 等方法将其添加到文档中。
事件处理： 可以通过 DOM 来注册事件监听器，处理用户交互操作，例如点击、鼠标移动等事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DOM Example</title> </head> <body> <div id="container"> <h1>Hello, DOM!</h1> <p>This is a paragraph.</p> <button id="btn">Click Me</button> </div> <script> // 获取元素 var container = document.getElementById('container'); var button = document.getElementById('btn'); // 修改元素内容 container.innerHTML = '<h2>Hello, World!</h2>'; // 注册事件监听器 button.addEventListener('click', function() { alert('Button clicked!'); }); </script> </body> </html>
在这个例子中，我们通过 JavaScript 获取了 id 为 "container" 和 "btn" 的元素，然后修改了 "container" 元素的内容，并为 "btn" 元素添加了点击事件监听器，当按钮被点击时会弹出提示框。
