JavaScript DOM 相关知识整理

1. DOM 简介
DOM (Document Object Model) 是一种以树形结构表示 HTML 或 XML 文档的编程接口。它将文档解析为一个由节点和对象组成的结构，使编程语言能够连接和操作文档。

1.1 DOM 树结构
- Document
  - Element (html)
    - Element (head)
      - Element (title)
        - Text
    - Element (body)
      - Element (div)
        - Element (p)
          - Text

2. 节点类型
DOM 树中的每个节点都是一个对象，主要有以下几种类型：
节点类型       Node常量                nodeType 值
元素节点       Node.ELEMENT_NODE            1
属性节点       Node.ATTRIBUTE_NODE            2
文本节点       Node.TEXT_NODE                3
注释节点       Node.COMMENT_NODE            8
文档节点       Node.DOCUMENT_NODE            9

3. 获取 DOM 元素
3.1 基本获取方法
// 通过 ID 获取单个元素
document.getElementById('myId');

// 通过类名获取元素集合 (HTMLCollection)
document.getElementsByClassName('myClass');

// 通过标签名获取元素集合 (HTMLCollection)
document.getElementsByTagName('div');

// 通过 CSS 选择器获取单个元素
document.querySelector('#myId .myClass');

// 通过 CSS 选择器获取所有匹配元素 (NodeList)
document.querySelectorAll('div.className');

3.2 新增获取方法 (HTML5)
// 通过元素 name 属性获取
document.getElementsByName('username');

// 获取第一个匹配的表单元素
document.forms['myForm'];
document.images;
document.links;

4. DOM 操作
4.1 元素创建
// 创建元素节点
const newDiv = document.createElement('div');

// 创建文本节点
const textNode = document.createTextNode('Hello World');

// 创建完整元素 (设置文本内容)
const div = document.createElement('div');
div.textContent = 'Hello World';
// 或者
div.innerHTML = '<span>Hello</span> World';

4.2 元素添加
// 添加子元素 (作为最后一个子元素)
parentElement.appendChild(newElement);

// 在指定位置插入元素
parentElement.insertBefore(newElement, referenceElement);

// 在特定位置插入 HTML (不推荐用于用户内容，有 XSS 风险)
parentElement.insertAdjacentHTML('beforebegin', htmlString);

insertAdjacentHTML 位置参数：

beforebegin: 元素前面
afterbegin: 元素内部第一个子元素前面
beforeend: 元素内部最后一个子元素后面
afterend: 元素后面

4.3 元素移除

// 移除子元素
parentElement.removeChild(childElement);

// 直接移除自身 (现代浏览器)
element.remove();

// 移除所有子元素
element.innerHTML = '';
// 或者
while (element.firstChild) {
    element.removeChild(element.firstChild);
}

4.4 元素替换

parentElement.replaceChild(newElement, oldElement);

4.5 克隆元素

// 浅克隆 (只克隆元素，不克隆子元素)
const shallowClone = element.cloneNode(false);

// 深克隆 (克隆元素及其所有子元素)
const deepClone = element.cloneNode(true);

5. 元素属性与特性
5.1 属性访问
// 获取属性
element.getAttribute('class');

// 设置属性
element.setAttribute('class', 'myClass');

// 移除属性
element.removeAttribute('class');

// 属性存在性检查
element.hasAttribute('class');

5.2 DOM 属性与 HTML 特性
// DOM 属性 (直接访问)
element.id = 'newId';
element.className = 'newClass';
element.value = 'newValue';

// HTML 特性 (通过 attribute 方法)
element.setAttribute('data-value', '123');
const dataValue = element.getAttribute('data-value');

5.3 类名操作

// 检查类名
element.classList.contains('myClass');

// 添加类名
element.classList.add('newClass');

// 移除类名
element.classList.remove('oldClass');

// 切换类名
element.classList.toggle('active');

// 替换类名
element.classList.replace('old', 'new');

6. 元素样式操作

// 直接修改样式 (行内样式)
element.style.color = 'red';
element.style.backgroundColor = '#f0f0f0';
element.style.cssText = 'color: red; background: #f0f0f0;';

// 获取计算样式 (所有最终样式)
const computedStyle = window.getComputedStyle(element);
console.log(computedStyle.color);

7. 元素尺寸与位置
7.1 尺寸
// 内容区域尺寸 (不包括边框和内边距)
element.clientWidth;
element.clientHeight;

// 总尺寸 (包括边框和内边距)
element.offsetWidth;
element.offsetHeight;

// 尺寸 (精确到浮点数)
element.getBoundingClientRect().width;
element.getBoundingClientRect().height;

7.2 位置
// 元素相对于文档的位置 (包括滚动偏移)
element.offsetTop;
element.offsetLeft;

// 元素相对于最近的已定位祖先元素的位置
element.getBoundingClientRect().top;
element.getBoundingClientRect().left;

// 元素相对于视口的位置
const rect = element.getBoundingClientRect();
console.log(rect.top, rect.left, rect.width, rect.height);

8. 事件处理
8.1 事件绑定

// 方式1: 事件属性
element.onclick = function() { /* 处理函数 */ };

// 方式2: addEventListener (推荐)
element.addEventListener('click', function() { 
    /* 处理函数 */ 
});

// 多个事件监听器
element.addEventListener('click', handler1);
element.addEventListener('click', handler2);

// 一次性事件
element.addEventListener('click', function handler() {
    // 执行后自动移除
}, { once: true });

8.2 事件对象

element.addEventListener('click', function(e) {
    console.log(e.type);           // 事件类型 (click)
    console.log(e.target);         // 事件目标元素
    console.log(e.currentTarget);  // 当前处理事件的元素
    console.log(e.eventPhase);     // 事件阶段 (1: 捕获, 2: 目标, 3: 冒泡)
    
    // 鼠标事件
    e.clientX; e.clientY;          // 相对于视口的坐标
    e.pageX; e.pageY;              // 相对于文档的坐标
    
    // 阻止默认行为
    e.preventDefault();
    
    // 阻止事件冒泡
    e.stopPropagation();
});

8.3 事件委托

// 在父元素上监听子元素的事件
document.querySelector('ul').addEventListener('click', function(e) {
    if (e.target.tagName === 'LI') {
        // 处理 li 的点击
    }
});

8.4 常见事件类型
鼠标事件: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave
键盘事件: keydown, keyup, keypress
表单事件: submit, reset, change, focus, blur, input
窗口事件: load, resize, scroll, unload