HTML DOM 节点

HTML DOM 节点格式化

基本概念

HTML DOM (文档对象模型) 节点格式化是指通过编程方式控制网页元素的表现形式。DOM 将 HTML 文档表示为节点树结构，每个节点都是对象，可以访问和修改。

主要节点类型

1. 文档节点：整个文档 (document)

2. 元素节点：HTML 标签 (如 <div>, <p>)

3. 属性节点：元素的属性 (如 class, id)

4. 文本节点：元素内的文本内容

5. 注释节点：HTML 注释

常用格式化方法

1. 访问节点

document.getElementById('id') // 通过ID获取
document.getElementsByTagName('p') // 通过标签名获取
document.getElementsByClassName('class') // 通过类名获取
document.querySelector('.class') // CSS选择器获取第一个匹配
document.querySelectorAll('div p') // CSS选择器获取所有匹配

2. 修改节点内容

element.innerHTML = '<b>新内容</b>' // 设置HTML内容
element.textContent = '纯文本内容' // 设置纯文本内容
element.setAttribute('class', 'new-class') // 设置属性

3. 创建和添加节点

var newDiv = document.createElement('div') // 创建新元素
var textNode = document.createTextNode('新文本') // 创建文本节点
parentElement.appendChild(newDiv) // 添加子节点
parentElement.insertBefore(newDiv, existingChild) // 在指定节点前插入

4. 删除节点

parentElement.removeChild(childElement) // 移除子节点
element.remove() // 移除元素自身

CSS 扩展

1. 样式操作

element.style.color = 'blue' // 直接修改样式
element.style.fontSize = '16px'
element.classList.add('new-class') // 添加类
element.classList.remove('old-class') // 移除类
element.classList.toggle('active') // 切换类

2. 获取计算样式

window.getComputedStyle(element).getPropertyValue('color')

实例

示例1：动态创建列表

var ul = document.createElement('ul');
for (var i = 1; i <= 5; i++) {
  var li = document.createElement('li');
  li.textContent = '项目 ' + i;
  ul.appendChild(li);
}
document.body.appendChild(ul);

示例2：响应式样式修改

var button = document.querySelector('button');
button.addEventListener('click', function() {
  var div = document.getElementById('content');
  div.style.backgroundColor = '#f0f0f0';
  div.style.padding = '20px';
  div.classList.add('highlight');
});

功能总结

1. 动态修改网页内容和结构

2. 响应用户交互事件

3. 无需刷新页面更新内容

4. 实现复杂的UI效果和动画

5. 与CSS配合实现丰富的视觉效果