HTML | DOM 对象

HTML Document Object Model（DOM）是一份由W3C制定的标准，它定义了处理HTML文档的标准方法，并为开发人员提供了访问、操纵和更新HTML文档的能力。DOM表示HTML文档的树形结构，其中每个元素都是一个节点，以及它们之间的关系和属性都是DOM对象。

DOM 节点

DOM节点是代表HTML文档中的元素、属性或文本的对象。根据节点的类型，它们可以分为三种不同的类型：

1. 元素节点（Element Nodes）：代表HTML标记中的元素，如div、p、h1等。

2. 文本节点（Text Nodes）：代表HTML文本中的文本内容，例如在元素之间的文本。

3. 属性节点（Attribute Nodes）：代表HTML标记中的属性，例如id、class、src等。

通过DOM API，我们可以获取并操作这些节点。例如，可以使用getElementById()方法获取具有给定id的元素节点，并使用nodeValue属性获取文本节点的文本值。

// 获取具有“example” ID的元素节点
const elementNode = document.getElementById('example');

// 获取第一个子元素的文本节点
const textNode = elementNode.childNodes[0];

// 获取文本节点的文本值
const textValue = textNode.nodeValue;

DOM 树

HTML文档可以表示为树形结构，其中每个HTML元素都是树中的一个节点。这个树被称为DOM Tree。DOM Tree的根节点是document对象，它代表整个HTML文档。document对象有许多属性和方法，可以方便地获取和操作HTML文档。例如，可以使用getElementById()方法获取表示元素的对象，使用getElementsByTagName()方法获取文档中的所有特定标签的元素，以及使用createElement()方法创建新元素。

// 获取元素节点并设置其背景颜色属性
const elementNode = document.getElementById('example');
elementNode.style.backgroundColor = 'red';

// 获取所有p元素并向所有p元素添加内容
const pNodes = document.getElementsByTagName('p');
for (let i = 0; i < pNodes.length; i++) {
  pNodes[i].appendChild(document.createTextNode('New Content'));
}

// 创建新元素并添加到文档中
const newElement = document.createElement('div');
newElement.innerHTML = '<p>New Element</p>';
document.body.appendChild(newElement);

DOM 事件

DOM事件是用户和网页交互的重要方式。通过DOM API，可以为元素添加事件，并在事件发生时执行操作。例如，可以使用onclick事件处理程序捕获鼠标单击事件，并使用preventDefault方法阻止默认行为。

// 添加onclick事件处理程序
const elementNode = document.getElementById('example');
elementNode.onclick = function() {
  console.log('Click Event');
};

// 阻止默认行为
const linkNode = document.getElementById('link');
linkNode.onclick = function(event) {
  event.preventDefault();
};

结论

HTML | DOM对象 提供了强大的API，可以方便地访问、操纵和更新HTML文档。通过使用DOM节点、DOM树和DOM事件，您可以创建交互性、动态性和响应式的网页，并帮助用户更好地与您的网站交互。