《从零到全栈：JavaScript入门指南（二）》

DOM操作

1、 DOM 基础概念

• 定义：文档对象模型（Document Object Model），将 HTML/XML 文档解析为树形结构，提供操作页面元素的接口。

• 核心作用：通过 JavaScript 动态操作网页内容（增删改查元素、样式、属性、事件等）。

• 节点类型：

  • 元素节点（如

    ）

  • 文本节点（如标签内的文字）

  • 属性节点（如 class="box"）

---

2、document 对象

• 入口对象：代表整个文档，提供访问和操作页面的属性和方法。

• 常用属性：

  document.body      // 获取元素
  document.title     // 获取/设置标题文本
  document.head      // 获取元素
  document.documentElement // 获取元素

---

3、获取页面元素

方法	返回值类型	示例
document.getElementsByTagName('div')	HTMLCollection	获取所有 元素伪数组
document.getElementsByClassName('box')	HTMLCollection	获取类名为 box 的元素伪数组
document.getElementById('header')	单个 Element	获取 ID 为 header 的元素
document.querySelector('.box')	单个 Element	获取第一个匹配选择器的元素
document.querySelectorAll('li')	NodeList	获取所有 元素伪数组

---

4、操作元素样式

• 直接修改行内样式：

  element.style.backgroundColor = 'blue';  // 驼峰命名
  element.style.marginLeft = '20px';

• 批量修改样式：

  element.style.cssText = 'width: 100px; height: 100px;';

• 通过类名控制样式：

  element.className = 'box active';      // 替换所有类名
  element.classList.add('active');       // 添加类名
  element.classList.remove('active');    // 移除类名
  element.classList.toggle('active');     // 切换类名

---

5、操作元素内容

• 文本内容：

  element.innerText = 'Hello';    // 设置纯文本（不解析HTML）
  console.log(element.innerText); // 获取可见文本

• HTML内容：

  element.innerHTML = 'Hi'; // 设置可解析的HTML
  console.log(element.innerHTML); // 获取包含标签的HTML

---

6、事件绑定

• 基本语法：

  button.onclick = function() { 
    console.log('Clicked!'); 
  };

• 推荐方式（支持多事件）：

  button.addEventListener('click', function() {
    console.log('Event handled!');
  });

• 事件对象：

  element.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认行为
    console.log(e.target); // 触发事件的元素
  });

---

7、元素属性操作

• 通用方法：

  element.setAttribute('data-id', '123'); // 设置属性
  var id = element.getAttribute('data-id'); // 获取属性
  element.removeAttribute('data-id');      // 删除属性