# 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;a
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>
5.1操作节点属性
要操作节点属性，您可以按照以下步骤进行：
-
获取节点：首先，您需要获取要操作的节点。您可以使用适当的选择器（如ID、类名或标签名）来获取节点对象。
-
访问属性：一旦获取了节点对象，您可以通过访问其属性来操作节点。属性通常是节点的特定值，如文本内容、样式、类名等。
-
修改属性：您可以通过将新值分配给属性来修改节点的属性。例如，如果要更改元素的文本内容，您可以将新文本赋给节点的textContent属性。
例如，假设您有一个具有id为"myElement"的元素，您想要修改其文本内容。您可以按照以下方式进行操作：
// 获取节点
var element = document.getElementById("myElement");
// 修改属性
element.textContent = "新的文本内容";
5.1.2创建和插入节点
要创建和插入节点，您可以按照以下步骤进行：
-
创建新节点：首先，您需要使用适当的方法创建一个新的节点。在JavaScript中，您可以使用document.createElement()方法来创建一个新的元素节点，或者使用document.createTextNode()方法创建一个包含文本内容的文本节点。
-
修改新节点属性（可选）：如果需要，您可以修改新节点的属性，如设置文本内容、样式等。
-
插入节点：一旦创建并准备好新节点，您可以使用合适的方法将其插入到文档中的特定位置。常见的方法包括appendChild()、insertBefore()等。
以下是一个简单的示例，演示如何创建一个新的段落元素并将其插入到文档中的body元素中：
// 创建新的段落元素
var newParagraph = document.createElement("p");
// 设置段落文本内容
newParagraph.textContent = "这是一个新的段落。";
// 获取要插入的父节点（例如body）
var parentElement = document.body;
// 将新段落插入到父节点的末尾
parentElement.appendChild(newParagraph);
5.1.3删除和替换节点
要删除和替换节点，您可以按照以下步骤进行：
- 删除节点：要删除节点，您可以使用parentNode.removeChild()方法。首先，选择要删除的节点的父节点，然后调用removeChild()并传入要删除的节点。
// 获取要删除的节点
var nodeToRemove = document.getElementById("myNode");
// 获取父节点并删除子节点
nodeToRemove.parentNode.removeChild(nodeToRemove);
- 替换节点：要替换节点，您可以使用parentNode.replaceChild()方法。首先，选择要插入的新节点以及要替换的旧节点的父节点，然后调用replaceChild()并传入新节点和要被替换的旧节点。
// 创建新节点
var newNode = document.createElement("div");
newNode.textContent = "这是新的内容";
// 获取要替换的旧节点
var oldNode = document.getElementById("oldNode");
// 获取父节点并替换子节点
oldNode.parentNode.replaceChild(newNode, oldNode);
5.2获取元素位置
要获取元素的位置，您可以使用Element.getBoundingClientRect()方法。这个方法返回一个DOMRect对象，提供了元素的位置信息，包括元素的左上角和右下角相对于视口的坐标。
以下是一个简单的示例，演示如何获取元素的位置信息：
// 获取要获取位置的元素
var element = document.getElementById("myElement");
// 获取元素的位置信息
var rect = element.getBoundingClientRect();
// 输出位置信息
console.log("元素的左上角X坐标：" + rect.left);
console.log("元素的左上角Y坐标：" + rect.top);
console.log("元素的右下角X坐标：" + rect.right);
console.log("元素的右下角Y坐标：" + rect.bottom);
在上面的示例中，我们首先获取了要获取位置信息的元素（假设其id为"myElement"），然后使用getBoundingClientRect()方法获取元素的位置信息，并将其存储在rect变量中。最后，我们通过访问DOMRect对象的属性来输出元素的左上角和右下角的坐标信息。
5.2.2 scroll
如果您想要在浏览器中进行滚动操作，可以使用以下方法：
- 滚动到指定位置：
您可以使用 window.scrollTo() 方法将页面滚动到特定位置。示例代码如下所示：
// 将页面滚动到 x 像素和 y 像素的位置
window.scrollTo(x, y);
- 平滑滚动到指定位置：
如果您想要平滑地滚动到指定位置，可以使用 window.scroll() 方法，并设置 behavior: ‘smooth’。示例代码如下：
// 平滑地将页面滚动到 x 像素和 y 像素的位置
window.scroll({
top: x,
left: y,
behavior: 'smooth'
});
- 滚动到某个元素位置：
如果您想要将页面滚动到特定元素的位置，可以使用该元素的 scrollIntoView() 方法。示例代码如下：
// 将元素滚动到可见区域
element.scrollIntoView();
- 获取滚动位置：
您可以使用 window.scrollY 和 window.scrollX 属性来获取页面的垂直和水平滚动位置。示例代码如下：
// 获取垂直滚动位置
var scrollY = window.scrollY;
// 获取水平滚动位置
var scrollX = window.scrollX;
1550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
