学习笔记：DOM

什么是 DOM

DOM 是文档对象模型（Document Object Model）的缩写，是一种表示和操作 HTML、XML 文档的标准 API。通过 DOM，我们可以动态地创建、修改、删除 HTML 元素和属性，以及响应用户的事件。

DOM 的基本概念

节点

DOM 中的所有元素和文本都被称为节点（Node）。节点有多种类型，最常见的有：

• 元素节点（Element）
• 文本节点（Text）
• 属性节点（Attribute）
• 注释节点（Comment）

树形结构

DOM 中的所有节点都形成了一棵树形结构，称为文档树（Document Tree）。每个节点都有一个父节点和零个或多个子节点，顶层节点是文档节点（Document）。

节点属性

DOM 中的每个节点都有可能拥有属性（Attribute），属性是键值对形式的一组数据，可以用来描述节点的各种特征，例如元素的 id、class、href 等等。

节点操作

DOM 提供了一些方法和属性来操作节点，最常见的操作包括：

• 创建新节点：createElement、createTextNode、createAttribute 等等。
• 添加、删除、替换节点：appendChild、insertBefore、removeChild、replaceChild 等等。
• 查找节点：getElementById、getElementsByClassName、getElementsByTagName 等等。
• 修改节点属性和内容：setAttribute、getAttribute、innerHTML、innerText 等等。
• 响应用户事件：addEventListener、removeEventListener 等等。

DOM 的实例

创建新节点

javascriptCopy Code
const newElement = document.createElement('div');
newElement.innerText = 'Hello, World!';
document.body.appendChild(newElement);

添加、删除、替换节点

javascriptCopy Code
const oldElement = document.getElementById('old');
const newElement = document.createElement('div');
newElement.innerText = 'New Content!';
oldElement.parentNode.replaceChild(newElement, oldElement);

查找节点

htmlCopy Code
<ul id="list">
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>

javascriptCopy Code
const list = document.getElementById('list');
const items = list.getElementsByClassName('item');
for (let i = 0; i < items.length; i++) {
  console.log(items[i].innerText);
}

修改节点属性和内容

htmlCopy Code
<a id="link" href="#">Click Me</a>

javascriptCopy Code
const link = document.getElementById('link');
link.setAttribute('href', 'https://www.google.com/');
link.innerText = 'Google';

响应用户事件

htmlCopy Code
<button id="btn">Click Me</button>

javascriptCopy Code
const btn = document.getElementById('btn');
btn.addEventListener('click', function() {
  alert('Button Clicked!');
});