JS DOM操作（一）-CSDN博客

本文链接：https://blog.csdn.net/m0_74270395/article/details/136632772

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