DOM 实例学习笔记

什么是 DOM

DOM（Document Object Model，文档对象模型）是 HTML 和 XML 文档的编程接口。浏览器将页面解析为一个由节点和对象（如文本、元素等）组成的结构体系，开发者可以通过 DOM 提供的 API 来操作这些节点和对象，实现对页面的动态修改和交互。

DOM 的节点类型

1. 元素节点：HTML 或 XML 中的标签，如<div>、<p>、<a>等。
2. 属性节点：元素的属性，如class、id、src等。
3. 文本节点：元素中的文本内容。
4. 注释节点：HTML 中的注释内容，如<!-- 注释 -->。

DOM 的基本操作

获取元素

通过document.getElementById(id)可以获取指定id的元素节点；通过document.getElementsByClassName(className)可以获取所有拥有指定类名的元素节点；通过document.getElementsByTagName(tagName)可以获取所有指定标签名的元素节点。

javascriptCopy Code
// 获取 id 为 example 的元素节点
const exampleElement = document.getElementById('example');

// 获取 class 名为 example 的元素节点数组
const exampleElements = document.getElementsByClassName('example');

// 获取所有 p 标签的元素节点数组
const pElements = document.getElementsByTagName('p');

修改元素内容

通过修改元素的innerHTML属性可以实现对元素内部 HTML 结构的修改；通过修改元素的innerText或textContent属性可以实现对元素内部文本内容的修改。

javascriptCopy Code
// 修改 id 为 example 的元素的 HTML 内容
exampleElement.innerHTML = '<p>Hello World!</p>';

// 修改 class 名为 example 的元素数组中的所有元素的文本内容
for (let i = 0; i < exampleElements.length; i++) {
  exampleElements[i].innerText = 'Hello World!';
}

添加和删除元素

通过document.createElement(tagName)可以创建指定标签名的元素节点；通过appendChild(node)可以将指定节点添加为当前节点的子节点；通过removeChild(node)可以将当前节点的指定子节点删除。

javascriptCopy Code
// 创建 p 元素节点
const pElement = document.createElement('p');
pElement.innerText = 'Hello World!';

// 将 p 元素节点添加为 id 为 example 的元素的子节点
exampleElement.appendChild(pElement);

// 删除 id 为 example 的元素的第一个子节点
exampleElement.removeChild(exampleElement.firstChild);

DOM 实例

假设有以下 HTML 结构：

htmlCopy Code
<div id="example">
  <p class="text">Hello World!</p>
  <img src="example.jpg" alt="Example Image">
</div>

1. 修改元素样式

通过修改元素的style属性可以实现对元素样式的修改。例如，将<p>元素的字体颜色改为红色：

javascriptCopy Code
const pElement = document.querySelector('#example .text');
pElement.style.color = 'red';

2. 添加点击事件

通过addEventListener(eventType, listener)可以给元素添加指定类型的事件监听器，例如点击事件。

javascriptCopy Code
const imgElement = document.querySelector('#example img');
imgElement.addEventListener('click', () => {
  alert('You clicked the image!');
});

3. 动态创建元素

通过动态创建元素并添加到页面中，可以实现一些动态的 UI 效果。例如，在<div>元素中点击按钮后动态添加一个<p>元素：

htmlCopy Code
<div id="example">
  <button>点击添加</button>
</div>

javascriptCopy Code
const exampleElement = document.querySelector('#example');
const buttonElement = exampleElement.querySelector('button');

buttonElement.addEventListener('click', () => {
  const pElement = document.createElement('p');
  pElement.innerText = 'Hello World!';
  exampleElement.appendChild(pElement);
});

总结

DOM 是 Web 开发中十分重要的概念，熟练掌握 DOM 的基本操作和常用 API 可以大大提高 Web 页面的交互性和动态性。