在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');
// childNodes
console.log('所有子节点:', element.childNodes);
// firstChild 和 lastChild
console.log('第一个子节点:', element.firstChild);
console.log('最后一个子节点:', element.lastChild);
// nextSibling 和 previousSibling
console.log('下一个兄弟节点:', element.nextSibling);
console.log('上一个兄弟节点:', element.previousSibling);
// textContent
console.log('文本内容:', element.textContent);
// innerHTML
console.log('HTML 内容:', element.innerHTML);
// attributes
console.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>
// 创建一个新的 div
const newDiv = document.createElement('div');
newDiv.textContent = '这是一个新创建的 div';
// 将新 div 添加到容器中
const container = document.getElementById('container');
container.appendChild(newDiv);
// 替换新 div
const replacementDiv = document.createElement('div');
replacementDiv.textContent = '这是替换后的 div';
container.replaceChild(replacementDiv, newDiv);
// 克隆替换后的 div
const 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.onload
window.onload = function() {
console.log('整个页面（包括所有资源）已加载！');
};
// 使用 DOMContentLoaded
document.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>