dom教程

` 等。 - **属性节点（Attribute）**：元素的属性，如 `class`、`id` 等。 - **文本节点（Text）**：元素内的文本内容。 #### 2. **访问 DOM 元素** - **`document.getElementById('id')`**：通过元素的 ID 获取元素。 - **`document.querySelector('selector')`**：通过 CSS 选择器获取第一个匹配的元素。 - **`document.querySelectorAll('selector')`**：获取所有匹配的元素，返回一个 NodeList。 #### 3. **操作 DOM 元素** - **修改内容**： - **`element.innerHTML`**：获取或设置元素的 HTML 内容。 - **`element.textContent`**：获取或设置元素的文本内容。 - **修改属性**： - **`element.setAttribute('name', 'value')`**：设置元素的属性。 - **`element.getAttribute('name')`**：获取元素的属性值。 - **修改样式**： - **`element.style.property = 'value'`**：直接修改元素的样式。 #### 4. **创建和添加元素** - **`document.createElement('tagName')`**：创建一个新的元素节点。 - **`element.appendChild(newElement)`**：将新元素添加到父元素的末尾。 - **`element.insertBefore(newElement, existingElement)`**：在现有元素前插入新元素。 #### 5. **事件处理** - **`element.addEventListener('event', callback)`**：为元素添加事件监听器。 - **`element.removeEventListener('event', callback)`**：移除事件监听器。 #### 6. **遍历 DOM** - **`element.parentNode`**：获取父节点。 - **`element.childNodes`**：获取所有子节点。 - **`element.nextSibling`** 和 **`element.previousSibling`**：获取相邻的兄弟节点。 #### 7. **性能优化** - **减少 DOM 操作**：频繁的 DOM 操作会影响性能，尽量合并操作。 - **使用事件委托**：将事件监听器添加到父元素，减少事件处理器的数量。 #### 8. **常见问题与调试** - **检查元素是否存在**：在操作元素前，确保元素已加载。 - **使用开发者工具**：通过浏览器的开发者工具查看和调试 DOM。 ### 总结 DOM 是前端开发中不可或缺的一部分，掌握 DOM 操作可以帮助开发者动态地创建、修改和删除网页内容，实现丰富的交互效果。理解 DOM 的基本概念和常用方法，是成为一名合格前端开发者的基础。