定义与作用

DOM 是 Document Object Model 的简称，它是一种定义文档结构的接口，允许程序或脚本动态地访问和修改HTML或者XML文档的内容、结构和样式。通过DOM，开发者可以轻松地操作网页元素，实现动态交互和响应式设计。

DOM树结构与节点类型

DOM树结构将整个文档看作是一个树形结构，其中节点是树的组成部分。主要有以下几类节点：

• 元素节点：如<div>、<p>等，是DOM树的重要组成部分。
• 文本节点：包含实际的文本内容。
• 属性节点：表示元素的特定属性，如<div class="main">中的"main"。
• 注释节点：用于开发者注释代码，不会出现在最终的HTML中。
• 文档节点：表示整个HTML文档。
• 文档类型节点：描述文档的类型和版本。

HTML元素选择器

选择器用于从DOM中查找元素。例如，通过document.getElementById或querySelector等方法，可以根据元素的ID、类名或标签名来查找。

实战演练：快速定位网页元素

// 通过ID选择元素
const heading = document.getElementById('page-heading');
console.log(heading.textContent);

// 通过类名选择元素
const paragraphs = document.querySelectorAll('.content p');
paragraphs.forEach(paragraph => {
  console.log(paragraph.textContent);
});

// 通过标签名选择元素
const links = document.getElementsByTagName('a');
for (let link of links) {
  console.log(link.href);
}

获取与设置元素属性

使用getAttribute和setAttribute方法可以分别获取和设置元素属性。

使用DOM事件处理程序

通过addEventListener或attachEvent方法为元素添加事件处理器。

实战示例：动态改变文本颜色

const button = document.getElementById('color-change');
const text = document.getElementById('text-content');

button.addEventListener('click', function() {
  text.style.color = 'red';
});

内容更新技巧

使用innerHTML和innerText属性可以动态更新元素的内容。

实战练习：动态显示不同内容

const section = document.getElementById('dynamic-section');
const contentList = ['Item 1', 'Item 2', 'Item 3'];

contentList.forEach(item => {
  const paragraph = document.createElement('p');
  paragraph.textContent = item;
  section.appendChild(paragraph);
});

添加、删除、复制和移动节点

使用appendChild、removeChild、cloneNode和parentNode等方法实现节点操作。

实例展示：创建动态导航栏

// 创建菜单项元素
const menuItems = ['Home', 'About', 'Contact'];
const menu = document.getElementById('menu');
menuItems.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  menu.appendChild(li);
});

文档片段与克隆节点

使用createDocumentFragment可以创建文档片段，用于组织一组元素，再一次性添加到DOM中。

DOM遍历方法

使用childNodes、getElementsByTagName等方法进行DOM遍历。

实践示例：创建动态布局

// 创建布局元素
const layout = document.getElementById('dynamic-layout');
const sections = ['Section A', 'Section B', 'Section C'];

sections.forEach(section => {
  const div = document.createElement('div');
  div.className = 'section';
  div.textContent = section;
  layout.appendChild(div);
});

总结

DOM提供了强大的工具来操作HTML元素，了解其基本选择器、属性操作、事件处理、内容与节点操作，以及高级技巧，是网页开发中的重要技能。

练习题

1. 创建动态列表：创建一个动态生成的列表，显示用户输入的项目。
2. 动态导航栏：实现一个动态导航栏，点击按钮添加或删除导航项。
3. 动态表格：使用DOM生成动态表格，根据用户输入的数据动态更新表格内容。

通过实践这些练习，可以加深对DOM操作的理解与熟练度。同时，推荐通过慕课网等在线平台进行更深入的DOM学习，获取更多实战经验。