# 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;