参考资料

1. HTML DOM 返回一个锚的名字 实例
2. HTML DOM 被按下的键盘键的keycode？
3. HTML DOM 返回图像映射的某个区域的port 实例
4. HTML DOM 事件
5. HTML DOM document.write() 方法
6. HTML DOM 当点击完button不可用 实例
7. HTML DOM 修改
8. HTML DOM 返回图像映射某个区域的替代文字实例

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配合实现丰富的视觉效果