. # 1.DOM操作分类
1.1DOM core（核心操作）
- document：表示整个文档，可以用于访问文档的各个部分和属性。
- Element：表示 HTML 元素，提供了访问和操作元素的方法和属性。
- Node：表示文档中的节点，包括元素、文本节点、注释等，提供了节点通用的方法和属性。
1.2HTML-DOM
- 获取元素：通过 ID、类名、标签名等方式获取 HTML 元素。
- 修改内容：修改元素的文本内容、HTML 内容等。
- 操作属性：设置和获取元素的属性值。
- 创建元素：动态创建新的 HTML 元素并添加到文档中。
1.3CSS-DOM
- 访问样式：获取元素的计算样式、内联样式等。
- 修改样式：动态修改元素的样式，如改变颜色、大小、位置等。
- 创建样式：动态创建新的样式表并应用到文档中的元素。
2 节点和节点之间的关系
2.1节点和节点之间的关系
整个文档是一个文档节点
每个HTML标签是一个元素节点
包含在HTML元素中的文本是文本节点
每一个HTML属性是一个属性节点
注释属于注释节点
使用父节点(parent)，子节点(child),兄弟节点(sibling)等术语来描述节点的层次关系，父节点拥有子节点，同级的子节点被称为同胞或者兄弟节点
在DOM树中，顶部节点被称为根(root),< html>节点。
每一个节点都有父节点，除了根，如< head>和< body>的父节点都是< html>节点，文本节点“DOM应用”的父节点是< title>节点
一个节点可以拥有任意数量的子节点，如< body>节点的子节点有< h1>,< p>和< ul>节点。
兄弟节点是拥有相同父元素的节点。例如，两个< li>就是兄弟节点，它们的父节点均为< ul>节点
2.2重要的节点类型
- 元素节点 (Node.ELEMENT_NODE, 值为 1):
- 代表注释内容，如
。
属性节点 (Node.ATTRIBUTE_NODE, 值为 2): - 代表 HTML 元素，如 < div>, < p>, < a> 等。
文本节点 (Node.TEXT_NODE, 值为 3): - 代表元素或属性中的文本内容。
注释节点 (Node.COMMENT_NODE, 值为 8): - 代表元素的属性，如 id, class 等。
文档节点 (Node.DOCUMENT_NODE, 值为 9):
var node = document.getElementById('myElement');
if (node.nodeType === Node.ELEMENT_NODE) {
console.log('这是一个元素节点');
} else if (node.nodeType === Node.TEXT_NODE) {
console.log('这是一个文本节点');
} else if (node.nodeType === Node.COMMENT_NODE) {
console.log('这是一个注释节点');
}
2.3 节点属性
node.parentNode：获取节点的父节点。
node.parentNode：获取节点的父节点：
var childNode = document.getElementById(‘child’);
var parentNode = childNode.parentNode;
console.log(parentNode.id); // 输出：parent`
node.childNodes：获取节点的所有子节点列表。
node.firstChild / node.lastChild：获取节点的第一个 / 最后一个子节点。
node.nextSibling / node.previousSibling：获取节点的下一个 / 上一个同级节点。**
node.parentNode：获取节点的父节点：
html
<div id="parent">
<p id="child">子节点</p>
</div>
javascript
var childNode = document.getElementById('child');
var parentNode = childNode.parentNode;
console.log(parentNode.id); // 输出：parent
node.childNodes：获取节点的所有子节点列表：
html
<ul id="parent">
<li>子节点 1</li>
<li>子节点 2</li>
<li>子节点 3</li>
</ul>
javascript
var parentNode = document.getElementById('parent');
var childNodes = parentNode.childNodes;
childNodes.forEach(function(child) {
console.log(child.textContent);
});
node.firstChild / node.lastChild：获取节点的第一个 / 最后一个子节点：
html
<div id="parent">
<p>第一个子节点</p>
<p>中间子节点</p>
<p>最后一个子节点</p>
</div>
javascript
var parentNode = document.getElementById('parent');
var firstChild = parentNode.firstChild;
var lastChild = parentNode.lastChild;
console.log(firstChild.textContent); // 输出：第一个子节点
console.log(lastChild.textContent); // 输出：最后一个子节点
node.nextSibling / node.previousSibling：获取节点的下一个 / 上一个同级节点：
html
<ul>
<li>节点 1</li>
<li>节点 2</li>
<li id="target">目标节点</li>
<li>节点 3</li>
</ul>
javascript
var targetNode = document.getElementById('target');
var nextNode = targetNode.nextSibling;
var previousNode = targetNode.previousSibling;
console.log(nextNode.textContent); // 输出：节点 3
console.log(previousNode.textContent); // 输出：节点 2
2.4 element常用属性
- firstElementChild / lastElementChild：获取元素的第一个子元素节点和最后一个子元素节点。
- nextElementSibling /previousElementSibling 获取当前元素之后的下一个兄弟元素节点/获取当前元素之前的上一个兄弟元素节点
var parentElement = document.getElementById('parent');
var firstElement = parentElement.firstElementChild;
var lastElement = parentElement.lastElementChild;
<body>
<div id="first">First Div</div>
<div id="second">Second Div</div>
<div id="third">Third Div</div>
<script>
// 获取第一个 div 元素
var firstDiv = document.getElementById('first');
// 获取第一个 div 元素之后的下一个兄弟元素节点
var nextElement = firstDiv.nextElementSibling;
if (nextElement) {
console.log(nextElement.id); // 输出下一个兄弟元素节点的 id
} else {
console.log('No next element sibling found.');
}
// 获取第二个 div 元素
var secondDiv = document.getElementById('second');
// 获取第二个 div 元素之前的上一个兄弟元素节点
var previousElement = secondDiv.previousElementSibling;
if (previousElement) {
console.log(previousElement.id); // 输出上一个兄弟元素节点的 id
} else {
console.log('No previous element sibling found.');
}
</script>
</body>