DOM【JavaScript】

在JavaScript中，DOM (Document Object Model：文档对象模型) 是web页面的编程接口，用于表示和操作 HTML 和 XML 文档。它将文档结构化为一个树形结构，允许开发者通过 JavaScript 访问和修改网页的内容、结构和样式。以下是一些关于DOM的关键概念：

1. 结构

DOM树结构是以节点为单位组织的。常见的节点类型包括：

文档节点（Document）	整个HTML或XML文档。
元素节点（Element）	HTML标签，如<div>, <p>等。
文本节点（Text）	元素中的文本内容。
属性节点（Attribute）	元素的属性，如class和id。

1.1 节点对象的重要属性

在 DOM 中，节点对象有几个重要的属性，以下是三个常用且重要的属性：

1.1.1 nodeName：

const element = document.getElementById('myElement');
console.log(element.nodeName); // 输出：DIV

• 描述节点的名称。
• 对于元素节点，返回标签名称（例如，"DIV"、"P"）；对于文本节点，返回 "#text"。

1.1.2 nodeType：

const element = document.getElementById('myElement');
console.log(element.nodeType); // 输出：1（如果是元素节点）

• 返回节点的类型，值为数字。
• 常用的节点类型：
  • 1：元素节点
  • 2：属性节点
  • 3：文本节点
  • 8：注释节点
  • 9：文档节点

1.1.3 parentNode：

const element = document.getElementById('myElement');
console.log(element.parentNode); // 输出：父节点对象

• 返回节点的父节点。如果节点没有父节点，则返回 null。
• 该属性常用于导航 DOM 结构。

示例代码

<div id="myElement">Hello LuQian</div><script>const element = document.getElementById('myElement');console.log('节点名称:', element.nodeName); // 输出节点名称console.log('节点类型:', element.nodeType); // 输出节点类型console.log('父节点:', element.parentNode); // 输出父节点
</script>

1.2 节点对象的其他常用属性

1.2.1 childNodes

• 返回一个 NodeList，包含指定节点的所有子节点（包括元素节点、文本节点等）。
• 通过索引可以访问特定的子节点。

const element = document.getElementById('myElement');
const children = element.childNodes;
console.log(children); // 输出所有子节点

1.2.2 firstChild / lastChild

• firstChild 返回节点的第一个子节点，lastChild 返回最后一个子节点。如果没有子节点，则返回 null。

const element = document.getElementById('myElement');
console.log(element.firstChild); // 输出第一个子节点
console.log(element.lastChild);  // 输出最后一个子节点

1.2.3 nextSibling / previousSibling

• nextSibling 返回当前节点的下一个兄弟节点，previousSibling 返回上一个兄弟节点。如果没有相应的兄弟节点，则返回 null。

const element = document.getElementById('myElement');
console.log(element.nextSibling); // 输出下一个兄弟节点
console.log(element.previousSibling); // 输出上一个兄弟节点

1.2.4 textContent

• 获取或设置节点的文本内容。对于元素节点，它会返回该节点及其所有子节点的文本内容。

const element = document.getElementById('myElement');
console.log(element.textContent); // 输出节点的文本内容
element.textContent = '新的文本内容'; // 设置新的文本内容

1.2.5 innerHTML

• 获取或设置节点的 HTML 内容。对于元素节点，它会返回该节点内部的 HTML 代码。

const element = document.getElementById('myElement');
console.log(element.innerHTML); // 输出节点的 HTML 内容
element.innerHTML = '<span>新的 HTML 内容</span>'; // 设置新的 HTML 内容

1.2.6 attributes

• 返回一个 NamedNodeMap，包含元素的所有属性，可以通过属性名称或索引访问。

const element = document.getElementById('myElement');
const attrs = element.attributes;
console.log(attrs); // 输出所有属性
console.log(attrs[0].name); // 输出第一个属性的名称

示例代码

<div id="myElement"><p>这是一个段落。</p><span>这是一个 span。</span>
</div><script>const element = document.getElementById('myElement');// childNodesconsole.log('所有子节点:', element.childNodes);// firstChild 和 lastChildconsole.log('第一个子节点:', element.firstChild);console.log('最后一个子节点:', element.lastChild);// nextSibling 和 previousSiblingconsole.log('下一个兄弟节点:', element.nextSibling);console.log('上一个兄弟节点:', element.previousSibling);// textContentconsole.log('文本内容:', element.textContent);// innerHTMLconsole.log('HTML 内容:', element.innerHTML);// attributesconsole.log('所有属性:', element.attributes);
</script>

1.3 动态操作节点的方法

动态操作节点的方法有很多，以下是一些常用的 DOM 操作方法，帮助你在网页中添加、删除和修改节点。

1.3.1 创建节点

• document.createElement(tagName)：创建一个指定标签名的元素节点。

const newDiv = document.createElement('div');
newDiv.textContent = '这是一个新创建的 div';

1.3.2 添加节点

• parentNode.appendChild(childNode)：将一个节点添加到指定父节点的子节点列表的末尾。

const container = document.getElementById('container');
container.appendChild(newDiv);

• parentNode.insertBefore(newNode, referenceNode)：在指定的参考节点之前插入一个新节点。

const referenceNode = container.firstChild;
container.insertBefore(newDiv, referenceNode);

1.3.3 删除节点

parentNode.removeChild(childNode)：从父节点中删除指定的子节点。

container.removeChild(newDiv); // 删除刚才添加的新 div

1.3.4 替换节点

• parentNode.replaceChild(newNode, oldNode)：用新节点替换指定的旧节点。

const replacementDiv = document.createElement('div');
replacementDiv.textContent = '这是替换后的 div';
container.replaceChild(replacementDiv, newDiv);

1.3.5 克隆节点

• node.cloneNode(deep)：克隆一个节点，可以选择是否克隆其子节点。

const clonedDiv = newDiv.cloneNode(true); // deep 为 true 时克隆子节点
container.appendChild(clonedDiv);

1.3.6 修改节点属性

• element.setAttribute(name, value)：设置指定元素的属性值。

newDiv.setAttribute('class', 'my-class');

• element.removeAttribute(name)：移除指定元素的属性。

newDiv.removeAttribute('class');

示例代码

<div id="container"></div><script>// 创建一个新的 divconst newDiv = document.createElement('div');newDiv.textContent = '这是一个新创建的 div';// 将新 div 添加到容器中const container = document.getElementById('container');container.appendChild(newDiv);// 替换新 divconst replacementDiv = document.createElement('div');replacementDiv.textContent = '这是替换后的 div';container.replaceChild(replacementDiv, newDiv);// 克隆替换后的 divconst clonedDiv = replacementDiv.cloneNode(true);container.appendChild(clonedDiv);// 修改克隆 div 的属性clonedDiv.setAttribute('class', 'my-class');
</script>

2. 常用操作

通过JavaScript，开发者可以进行各种DOM操作：

• 选择元素：使用document.getElementById()、document.querySelector()等方法选择元素。
• 创建元素：使用document.createElement()方法创建新元素。
• 添加/删除元素：使用appendChild()、removeChild()等方法进行元素的添加和删除。
• 修改属性和内容：可以通过setAttribute()、innerHTML等修改元素的属性和内容。
• 事件处理：使用addEventListener()方法为元素添加事件监听器。

2.1 选择元素

获取元素节点对象的方式有几种常用的方法，主要使用 JavaScript 提供的 DOM API。以下是一些常见的方法：

2.1.1 getElementById：

根据元素的 ID 获取元素节点。

<div id="myElement">Hello LuQian</div>
<script>const element = document.getElementById('myElement');console.log(element); // 输出：<div id="myElement">Hello LuQian</div>
</script>

 

2.1.2 getElementsByClassName：

根据元素的类名获取元素节点集合。

<div class="myClass">Item 1</div>
<div class="myClass">Item 2</div>
<script>const elements = document.getElementsByClassName('myClass');console.log(elements); // 输出：HTMLCollection(2) [div.myClass, div.myClass]
</script>

 

2.1.3 getElementsByTagName：

根据元素的标签名获取元素节点集合。

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<script>const elements = document.getElementsByTagName('p');console.log(elements); // 输出：HTMLCollection(2) [p, p]
</script>

 

2.1.4 querySelector：

使用 CSS 选择器获取第一个匹配的元素节点。

<div class="myClass">Hello LuQian</div>
<script>const element = document.querySelector('.myClass');console.log(element); // 输出：<div class="myClass">Hello LuQian</div>
</script>

 

2.1.5 querySelectorAll：

使用 CSS 选择器获取所有匹配的元素节点集合。

<div class="myClass">Item 1</div>
<div class="myClass">Item 2</div>
<script>const elements = document.querySelectorAll('.myClass');console.log(elements); // 输出：NodeList(2) [div.myClass, div.myClass]
</script>

 

2.2 创建元素

使用 document.createElement() 方法创建新元素。

// 创建一个新元素
const newDiv = document.createElement('div');
newDiv.textContent = '这是一个新创建的元素'; // 设置新元素的文本内容

 

2.3 添加/删除元素

使用 appendChild() 和 removeChild() 方法进行元素的添加和删除。

2.3.1 appendChild()

appendChild() 方法用于将一个节点添加到指定父节点的子节点列表的末尾。语法如下：

parentNode.appendChild(newChild);

示例：

<div id="container"></div><script>const container = document.getElementById('container');const newElement = document.createElement('p');newElement.textContent = '这是一个新添加的段落。';container.appendChild(newElement);
</script>

2.3.2 removeChild()

removeChild() 方法用于从父节点中删除指定的子节点。语法如下：

parentNode.removeChild(childNode);

示例：

<div id="container"><p id="toRemove">这个段落将被删除。</p>
</div><script>const container = document.getElementById('container');const elementToRemove = document.getElementById('toRemove');container.removeChild(elementToRemove);
</script>

 

综合示例:

下面是一个综合示例，展示了如何添加和删除元素：

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>DOM 示例</title></head><body><div id="container"></div><button id="addButton">添加段落</button><button id="removeButton">删除段落</button><script>const container = document.getElementById('container');const addButton = document.getElementById('addButton');const removeButton = document.getElementById('removeButton');addButton.addEventListener('click', () => {const newElement = document.createElement('p');newElement.textContent = '这是一个新添加的段落。';container.appendChild(newElement);});removeButton.addEventListener('click', () => {const lastChild = container.lastChild;if (lastChild) {container.removeChild(lastChild);}});</script></body>
</html>

在这个示例中，点击“添加段落”按钮会在容器中添加一个新的段落，而点击“删除段落”按钮会删除最后添加的段落。

2.4 修改属性和内容

使用 setAttribute() 和 innerHTML 修改元素的属性和内容。

2.4.1 setAttribute() 

setAttribute()方法用于设置元素的属性值。语法如下：

element.setAttribute(name, value);

这里，name 是你要设置的属性的名称，value 是该属性的值。

示例：

<div id="myElement"></div><script>const element = document.getElementById('myElement');// 为元素添加 "href" 属性，值为 "https://www.example.com"element.setAttribute('href', 'https://www.example.com');// 为元素添加 "class" 属性，值为 "myClass"element.setAttribute('class', 'myClass');
</script>

 

2.4.2 innerHTML

innerHTML 属性用于设置元素内部的内容（HTML 标记）。语法如下：

element.innerHTML = html;

这里，html 是你想要设置的内容的 HTML 字符串。

示例：

<div id="contentDiv"></div><script>const contentDiv = document.getElementById('contentDiv');// 设置 div 内容为一个简单的字符串contentDiv.innerHTML = '这是新的内容。';// 设置 div 内容为一个复杂的 HTML 字符串contentDiv.innerHTML = '<div><p>这是嵌套的内容。</p></div>';
</script>

注意：innerHTML 属性会将你指定的 HTML 字符串完全替换掉原来的内容，意味着如果你有多个子元素，使用 innerHTML 将会把整个内容替换成一个新的大段 HTML 代码。如果你的内容仅限于文本，那么使用 textContent 或 innerText 属性可能是更好的选择。

2.5 事件处理

使用addEventListener() 方法用于为指定的元素添加事件监听器。这允许你对特定事件（如点击、鼠标移动、键盘输入等）做出反应。语法如下：

element.addEventListener(event, function, useCapture);

• event：要监听的事件类型（如 'click'、'mouseover' 等）。
• function：当事件发生时调用的函数（事件处理程序）。
• useCapture（可选）：布尔值，指示是否在捕获阶段执行事件处理程序，默认为 false。

2.5.1 为按钮添加点击事件监听器

下面是一个简单的示例，展示如何为按钮添加点击事件监听器：

<button id="myButton">点击我</button><script>const button = document.getElementById('myButton');// 添加点击事件监听器button.addEventListener('click', () => {alert('按钮被点击了！');});
</script>

 

2.5.2 监听多个事件

你也可以为同一个元素添加多个事件监听器：

<button id="myButton">点击我</button><script>const button = document.getElementById('myButton');// 点击事件button.addEventListener('click', () => {alert('按钮被点击了！');});// 鼠标悬停事件button.addEventListener('mouseover', () => {button.style.backgroundColor = 'lightblue';});// 鼠标离开事件button.addEventListener('mouseout', () => {button.style.backgroundColor = '';});
</script>

在这个示例中，当鼠标悬停在按钮上时，按钮的背景颜色会改变，离开时颜色会恢复，点击按钮时会弹出提示框。

2.5.3 移除事件监听器

如果你需要在某个时刻移除事件监听器，可以使用 removeEventListener() 方法。记得使用相同的函数引用来移除监听器。

function handleClick() {alert('按钮被点击了！');
}// 添加事件监听器
button.addEventListener('click', handleClick);// 移除事件监听器
button.removeEventListener('click', handleClick);

2.5.4 鼠标移入和移出事件

当鼠标移入或移出某个元素时触发的事件。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>鼠标事件示例</title><style>#hoverDiv {width: 200px;height: 100px;background-color: lightblue;text-align: center;line-height: 100px;}</style>
</head>
<body><div id="hoverDiv">将鼠标移入我</div><p id="hoverMessage"></p><script>const hoverDiv = document.getElementById('hoverDiv');const hoverMessage = document.getElementById('hoverMessage');hoverDiv.addEventListener('mouseenter', () => {hoverMessage.textContent = '鼠标已移入！';});hoverDiv.addEventListener('mouseleave', () => {hoverMessage.textContent = '鼠标已移出！';});</script>
</body>
</html>

2.5.5 键盘事件

当用户在键盘上按下或松开某个键时触发的事件。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>键盘事件示例</title>
</head>
<body><input type="text" id="textInput" placeholder="输入内容" /><p id="keyMessage"></p><script>const input = document.getElementById('textInput');const keyMessage = document.getElementById('keyMessage');input.addEventListener('keyup', (event) => {keyMessage.textContent = `你输入了：${event.key}`;});</script>
</body>
</html>

2.5.6 表单事件

处理表单提交事件。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>表单事件示例</title>
</head>
<body><form id="myForm"><input type="text" id="nameInput" placeholder="输入你的名字" required /><button type="submit">提交</button></form><p id="formMessage"></p><script>const form = document.getElementById('myForm');const formMessage = document.getElementById('formMessage');form.addEventListener('submit', (event) => {event.preventDefault(); // 防止表单默认提交const name = document.getElementById('nameInput').value;formMessage.textContent = `你好，${name}！`;});</script>
</body>
</html>

2.5.7 窗口加载事件

窗口加载事件通常用于在网页完全加载后执行特定的JavaScript代码。这个事件可以确保所有的HTML元素、样式表和图像都已经加载完毕。

常用的加载事件有 window.onload 和 DOMContentLoaded。

如果你只关心DOM结构，并希望在DOM构建完成后立即执行代码，使用 DOMContentLoaded 更合适.

如果你需要确保所有资源都已加载（例如，图像），则使用 window.onload。

2.5.7.1 window.onload

window.onload 事件在整个页面，包括所有依赖的资源（如图像、样式等）都加载完成后触发。

window.onload = function() {console.log('页面完全加载！');// 这里可以放置其他代码
};

2.5.7.2 DOMContentLoaded

DOMContentLoaded 事件在文档的初始 HTML 被完全加载和解析后触发，不需要等待样式表、图像等其他资源加载完成。这使得它通常更快，适用于需要在文档加载后立即执行的代码。

document.addEventListener('DOMContentLoaded', function() {console.log('DOM内容已加载！');// 这里可以放置其他代码
});

示例：

下面是一个完整的示例，展示如何使用这两个事件：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>窗口加载事件示例</title>
</head>
<body><h1>欢迎来到我的网页</h1><script>// 使用 window.onloadwindow.onload = function() {console.log('整个页面（包括所有资源）已加载！');};// 使用 DOMContentLoadeddocument.addEventListener('DOMContentLoaded', function() {console.log('DOM内容已加载！');});</script>
</body>
</html>

2.6 动态操作样式

2.6.1 直接操作样式：

通过 element.style 直接修改样式属性，适合需要精确控制单个样式的场景。

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>直接操作样式</title><style>#myElement {width: 100px;height: 100px;background-color: lightblue;transition: all 0.5s ease;/* 添加过渡效果 */}</style></head><body><div id="myElement">直接修改样式</div><button id="changeStyleBtn">改变样式</button><script>const element = document.getElementById('myElement');const button = document.getElementById('changeStyleBtn');button.addEventListener('click', () => {// 直接修改样式属性element.style.backgroundColor = 'coral';element.style.width = '200px';element.style.height = '200px';});</script></body>
</html>

2.6.2 通过类名控制样式：

通过添加或移除 CSS 类来改变样式，更加优雅且易于管理，尤其是在需要复用样式时。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>DOM 类名控制样式示例</title><style>.highlight {background-color: yellow; /* 高亮背景 */color: red; /* 字体颜色为红色 */font-weight: bold; /* 加粗字体 */}</style>
</head>
<body><div id="myElement">Hello LuQian</div><button id="toggleButton">切换样式</button><script>const element = document.getElementById('myElement');const button = document.getElementById('toggleButton');// 为按钮添加点击事件button.addEventListener('click', () => {// 切换类名element.classList.toggle('highlight');});</script>
</body>
</html>