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：

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

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

1.1.2 nodeType：

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

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

1.1.3 parentNode：

javascript">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，包含指定节点的所有子节点（包括元素节点、文本节点等）。
通过索引可以访问特定的子节点。

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

1.2.2 firstChild / lastChild

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

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

1.2.3 nextSibling / previousSibling

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

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

1.2.4 textContent

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

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

1.2.5 innerHTML

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

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

1.2.6 attributes

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

javascript">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)：创建一个指定标签名的元素节点。

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

1.3.2 添加节点

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

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

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

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

1.3.3 删除节点

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

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

1.3.4 替换节点

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

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

1.3.5 克隆节点

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

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

1.3.6 修改节点属性

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

javascript">newDiv.setAttribute('class', 'my-class');

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

javascript">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() 方法创建新元素。

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

2.3 添加/删除元素

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

2.3.1 `appendChild()`

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

javascript">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() 方法用于从父节点中删除指定的子节点。语法如下：

javascript">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()方法用于设置元素的属性值。语法如下：

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

javascript">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() 方法。记得使用相同的函数引用来移除监听器。

javascript">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 事件在整个页面，包括所有依赖的资源（如图像、样式等）都加载完成后触发。

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

2.5.7.2 `DOMContentLoaded`

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

javascript">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 类来改变样式，更加优雅且易于管理，尤其是在需要复用样式时。

javascript"><!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>

DOM【JavaScript】

1. 结构

1.1 节点对象的重要属性

1.1.1 nodeName：

1.1.2 nodeType：

1.1.3 parentNode：

示例代码

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

1.2.1 childNodes

1.2.2 firstChild / lastChild

1.2.3 nextSibling / previousSibling

1.2.4 textContent

1.2.5 innerHTML

1.2.6 attributes

示例代码

1.3 动态操作节点的方法

1.3.1 创建节点

1.3.2 添加节点

1.3.3 删除节点

1.3.4 替换节点

1.3.5 克隆节点

1.3.6 修改节点属性

示例代码

2. 常用操作

2.1 选择元素

2.1.1 getElementById：

2.1.2 getElementsByClassName：

2.1.3 getElementsByTagName：

2.1.4 querySelector：

2.1.5 querySelectorAll：

2.2 创建元素

2.3 添加/删除元素

2.3.1 appendChild()

示例：

2.3.2 removeChild()

示例：

综合示例:

2.4 修改属性和内容

2.4.1 setAttribute()

示例：

2.4.2 innerHTML

示例：

2.5 事件处理

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

2.5.2 监听多个事件

2.5.3 移除事件监听器

2.5.4 鼠标移入和移出事件

2.5.5 键盘事件

2.5.6 表单事件

2.5.7 窗口加载事件

2.5.7.1 window.onload

2.5.7.2 DOMContentLoaded

示例：

2.6 动态操作样式

2.6.1 直接操作样式：

2.6.2 通过类名控制样式：

相关文章

`2.1.1 getElementById`：

`2.1.2 getElementsByClassName`：

`2.1.3 getElementsByTagName`：

`2.1.4 querySelector`：

`2.1.5 querySelectorAll`：

2.3.1 `appendChild()`

2.3.2 `removeChild()`

`2.4.1 setAttribute()`

2.4.2 `innerHTML`

2.5.7.1 `window.onload`

2.5.7.2 `DOMContentLoaded`