【JavaScript进阶部分——DOM操作（节点获取，节点属性修改，节点创建与插入，CSS样式的修改）】

标签：属性 console 进阶元素修改 document 节点 log

‌DOM操作‌是指对文档对象模型（Document Object Model，简称DOM）进行增删改查等操作的过程。DOM是一种表示和操作HTML、XML等文档的标准编程接口，它将文档解析为一个由节点和对象（包含属性和方法）组成的集合，开发者可以通过DOM提供的接口来访问和操作文档的各个部分，包括元素、属性、文本等‌。

HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

一、节点

概念： 网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示。

DOM节点可以分为以下几种类型：

元素节点（Element Node）：表示HTML文档中的HTML元素，如<div>、<p>等。元素节点可以有子节点和属性。通过标签名来访问元素节点。
文本节点（Text Node）：表示HTML文档中的文本内容，如文本节点内的文字、空格等。文本节点是元素节点的子节点，通过textContent属性来访问文本节点的内容。
属性节点（Attribute Node）：表示HTML元素的属性，如class、id、src等。属性节点是元素节点的属性，通过getAttribute()和setAttribute()方法来获取和设置属性的值。
文档节点（Document Node）：表示整个HTML文档，即根节点。文档节点是最顶层的节点，可以通过document对象来访问。

二、节点的获取

常见的方法：

在htm页面l<body>标签下创建三个p标签，接下来通过操作JS来展示方法：

 <!-- 在body标签下创建三个p标签 -->
    <p class="kk">我是段落1</p >
    <p class="kk">我是段落2</p >
    <p class="kk" id="p3">我是段落3</p >

1. getElementsByTagName(tagName)：通过元素的标签名获取节点。该方法返回一个节点列表，表示所有具有指定标签名的元素（若有多个相同标签，返回含有多个节点的类数组对象）。

 // 1. getElementsByTagName(tagName)
        const pTags = document.getElementsByTagName('p');
        console.log('通过getElementsByTagName获取的所有p标签节点：', pTags);
        console.log('第一个p标签节点：', pTags[0]);
        console.log('第二个p标签节点：', pTags[1]);

2. getElementsByClassName(className)：通过元素的类名获取节点。该方法返回一个节点列表，表示所有具有指定类名的元素（若有多个相同class，返回含有多个节点的类数组对象）。

// 2. getElementsByClassName(className)
        const kkClasses = document.getElementsByClassName('kk');
        console.log('通过getElementsByClassName获取的类名为kk的节点：', kkClasses);
        console.log('第一个类名为kk的节点：', kkClasses[0]);
        console.log('第二个类名为kk的节点：', kkClasses[1]);
        console.log('第三个类名为kk的节点：', kkClasses[2]);

3. getElementById(id)：通过元素的id属性获取节点。该方法返回一个节点对象，该对象表示具有指定id的元素。

// 3. getElementById(id)
        const k3ById = document.getElementById('k3');
        console.log('通过getElementById获取id为k3的节点：', k3ById);

4. querySelector(selector)：通过CSS选择器获取单个节点。该方法返回一个节点对象，表示匹配指定CSS选择器的第一个元素（返回第一个匹配上的节点）。

// 4. querySelector(selector)
        const firstPp = document.querySelector('.kk');
        console.log('通过querySelector获取的第一个类名为kk的节点：', firstPp);

5. querySelectorAll(selector)：通过CSS选择器获取多个节点。该方法返回一个节点列表(NodeList对象)，表示匹配指定CSS选择器的所有元素（包含所有匹配给定选择器的节点）。

 // 5. querySelectorAll(selector)
        const allPp = document.querySelectorAll('.kk');
        console.log('通过querySelectorAll获取的所有类名为kk的节点：', allPp);
        console.log('第一个类名为kk的节点：', allPp[0]);
        console.log('第二个类名为kk的节点：', allPp[1]);
        console.log('第三个类名为kk的节点：', allPp[2]);

6. parentNode：通过节点的parentNode属性获取其父节点。

 // 6. parentNode
        const k3 = document.getElementById('k3');
        const k3Parent = k3.parentNode;
        console.log('id为k3的节点的父节点：', k3Parent);
        // 修改父节点的样式
        k3Parent.style.backgroundColor = 'lightblue';

7. childNodes：通过节点的childNodes属性获取其子节点列表。

// 7. childNodes
        const body = document.body;
        const bodyChildNodes = body.childNodes;
        console.log('body节点的子节点：', bodyChildNodes);

三、节点的属性修改（以下都是由控制台输出）

（1）查看属性和修改属性

首先在htm页面l<body>标签下创建节点以便操作

 <p class="kk" id="p3">我是段落3</p>

1.根据id获取节点

     
 const p3ById = document.getElementById('p3');
 console.log('通过getElementById获取id为p3的节点：', p3ById);

2.查看标签节点的属性

console.log(p3ById.id);
console.log(p3ById.className);

3.修改节点的id属性

p3ById.id = "_p_3ById";
console.log(p3ById.id);

4.修改节点的class属性

（2） classList对象的操作

首先在htm页面l<body>标签下创建节点以便操作

1.根据id获取节点

通过getElementById方法获取了一个id为"p4"的节点对象

 const p4ById = document.getElementById('p4');
        console.log('通过getElementById获取id为p4的节点：', p4ById);
		        
        console.log(p4ById.classList);
        console.log(p4ById.classList[0]);

2.为classList添加一个新的class名

p4ById.classList.add("zz");
console.log(p4ById.classList);

3.为classList移除一个class名

p4ById.classList.remove("pp");
console.log(p4ById.classList);

4. 检查classList中是否存在某个class名，返回布尔值。

console.log(p4ById.classList.contains("yy"));
console.log(p4ById.classList.contains("xx"));

（3）其他属性的查看与修改（以<img>标签为例）

首先在htm页面l<body>标签下创建节点以便操作

<img src="logo.png" alt="图片加载失败" id="img1">

通过getElementById方法获取了一个id为"img1"的节点对象，

然后使用 i.src = "logo.png"修改

     const img = document.getElementById("img1");
		 img.src = 'logo.jpg';   // 修改src属性

运行前

运行后

四、节点的创建与插入

创建节点

1. createElement(tagName): 创建一个具有指定标签名的元素节点。

原理
- createElement(tagName)是DOM操作中的一个方法，它允许创建一个具有指定标签名（如'div'、'p'等）的元素节点。这个新创建的元素节点最初是孤立的，需要通过其他方法（如appendChild）添加到文档中才能显示。
示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial - height = 1.0">
    <title>创建元素节点示例</title>
</head>

<body>
    <script>
        // 创建一个 <div> 元素节点
        const newDiv = document.createElement('div');
        // 给新创建的 <div> 元素添加一些内容（这里通过创建文本节点并添加的方式）
        const textNode = document.createTextNode('这是新创建的div中的内容');
        newDiv.appendChild(textNode);
        // 将新创建的 <div> 元素添加到 <body> 节点中
        document.body.appendChild(newDiv);
    </script>
</body>

</html>

在这个示例中：
- 首先使用document.createElement('div')创建了一个<div>元素节点，将其存储在newDiv变量中。
- 然后使用document.createTextNode('这是新创建的div中的内容')创建了一个包含指定文本的文本节点，存储在textNode变量中。
- 通过newDiv.appendChild(textNode)将文本节点添加到<div>元素节点中。
- 最后使用document.body.appendChild(newDiv)将包含文本内容的<div>元素节点添加到<body>节点中，这样在浏览器中就可以看到新创建的<div>元素及其内容。

2. createTextNode(text): 创建一个包含指定文本内容的文本节点。

原理
- createTextNode(text)方法用于创建一个文本节点，这个文本节点可以包含任意的文本内容。文本节点通常会被添加到元素节点内部，以提供元素的文本内容。
示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial - height = 1.0">
    <title>创建文本节点示例</title>
</head>

<body>
    <p id="existingP">这是原有的段落内容</p>
    <script>
        const existingP = document.getElementById('existingP');
        // 创建一个新的文本节点
        const newText = document.createTextNode(' 新添加的文本内容');
        // 将新的文本节点添加到已有的 <p> 元素节点中
        existingP.appendChild(newText);
    </script>
</body>

</html>

在这个示例中：
- 首先通过document.getElementById('existingP')获取到页面中已有的<p>元素节点，存储在existingP变量中。
- 然后使用document.createTextNode(' 新添加的文本内容')创建一个新的文本节点，存储在newText变量中。
- 最后通过existingP.appendChild(newText)将新创建的文本节点添加到已有的<p>元素节点中，这样在浏览器中就可以看到原有的段落内容后面添加了新的文本内容。

3. createAttribute(attribute)：用于创建一个属性节点。 setAttributeNode(node)：将一个属性节点添加到元素节点中。

原理
- createAttribute(attribute)用于创建一个属性节点，其中attribute是要创建的属性名称（如'class'、'id'等）。创建后的属性节点是孤立的，需要使用setAttributeNode(node)方法将其添加到元素节点中。
示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial - height = 1.0">
    <title>创建和添加属性节点示例</title>
</head>

<body>
    <p id="p1">这是一个段落</p>
    <script>
        const p1 = document.getElementById('p1');
        // 创建一个名为 'class' 的属性节点
        const newClassAttr = document.createAttribute('class');
        newClassAttr.value = 'new - class';
        // 将创建的属性节点添加到 <p> 元素节点中
        p1.setAttributeNode(newClassAttr);
        console.log(p1);
    </script>
</body>

</html>

在这个示例中：
- 首先通过document.getElementById('p1')获取到页面中的<p>元素节点，存储在p1变量中。
- 然后使用document.createAttribute('class')创建一个名为'class'的属性节点，存储在newClassAttr变量中，并通过newClassAttr.value = 'new - class'设置属性节点的值为'new - class'。
- 最后通过p1.setAttributeNode(newClassAttr)将创建并设置好值的属性节点添加到<p>元素节点中，在控制台输出p1可以看到<p>元素节点已经添加了新的'class'属性。

插入节点

1. appendChild(node): 将一个节点插入到另一个节点的子节点列表的末尾。

appendChild(node)示例（已包含在createElement(tagName)示例中）

原理
- appendChild(node)方法用于将一个节点添加到另一个节点的子节点列表的末尾。这个方法可以用于将元素节点、文本节点等添加到其他元素节点中，从而构建DOM树结构。
示例代码（重复部分简要说明）
- 在createElement(tagName)示例中：已经展示了appendChild的用法，如newDiv.appendChild(textNode)将文本节点textNode添加到<div>元素节点newDiv中，以及document.body.appendChild(newDiv)将<div>元素节点newDiv添加到<body>元素节点中。

2. setAttributeNode(node)：将一个属性节点添加到元素节点中。（例子在创建节点3）

五、CSS样式的修改

要修改元素的CSS样式，可以使用元素的style属性。style属性是一个对象，可以通过其属性来修改元素的CSS样式。

示例：

首先创建节点及其属性以供操作

<head>
    <style>
        .box{
            width: 50%;
            height: 200px;
            color:blue;
            background-color: aliceblue;            
        }
    </style>
</head>
<body>
    <div class="box"  id="div1">利用js修改CSS样式</div>
</body>

首先通过document.getElementById方法获取到id为"div1"的元素。然后，通过元素的style属性来修改元素的背景颜色、文字颜色和字体大小。可以直接给style属性的属性赋值，将其值设置为对应的CSS样式值。

        var e = document.getElementById("div1");
        e.style.backgroundColor = "red";
        e.style.color = "white";
        e.style.fontSize = "30px";

运行结果

还有另一种方法也可以修改CSS样式：直接修改该节点的CSS代码

利用反引号来解决过长字符串的换行问题，以提高阅读性（反引号：英文输入法下，按左上角那个键）

        var e = document.getElementById("div1");
        e.style.cssText = 
        `
            background-color: gray; 
            color:green;
            font-size: 50px;
        `;

运行结果

标签：属性,console,进阶,元素,修改,document,节点,log
From： https://blog.csdn.net/2301_79765198/article/details/143362727

【JavaScript进阶部分——DOM操作（节点获取，节点属性修改，节点创建与插入，CSS样式的修改）】

一、节点

二、节点的获取

三、节点的属性修改（以下都是由控制台输出）

（1）查看属性和修改属性

（2） classList对象的操作

（3）其他属性的查看与修改（以<img>标签为例）

四、节点的创建与插入

创建节点

1. createElement(tagName): 创建一个具有指定标签名的元素节点。

2. createTextNode(text): 创建一个包含指定文本内容的文本节点。

3. createAttribute(attribute)：用于创建一个属性节点。 setAttributeNode(node)：将一个属性节点添加到元素节点中。

插入节点

1. appendChild(node): 将一个节点插入到另一个节点的子节点列表的末尾。

2. setAttributeNode(node)：将一个属性节点添加到元素节点中。（例子在创建节点3）

五、CSS样式的修改

相关文章

赞助商

阅读排行

【JavaScript进阶部分——DOM操作 （节点获取，节点属性修改，节点创建与插入，CSS样式的修改）】

一、节点

二、节点的获取

三、 节点的属性修改 （以下都是由控制台输出）

（1） 查看属性和修改属性

（2） classList对象的操作

（3） 其他属性的查看与修改（以<img>标签为例）

四、节点的创建与插入

创建节点

1. createElement(tagName): 创建一个具有指定标签名的元素节点。

2. createTextNode(text): 创建一个包含指定文本内容的文本节点。

3. createAttribute(attribute)：用于创建一个属性节点。 setAttributeNode(node)：将一个属性节点添加到元素节点中。

插入节点

1. appendChild(node): 将一个节点插入到另一个节点的子节点列表的末尾。

2. setAttributeNode(node)：将一个属性节点添加到元素节点中。（例子在创建节点3）

五、CSS样式的修改

相关文章

赞助商

阅读排行

【JavaScript进阶部分——DOM操作（节点获取，节点属性修改，节点创建与插入，CSS样式的修改）】

三、节点的属性修改（以下都是由控制台输出）

（1）查看属性和修改属性

（3）其他属性的查看与修改（以<img>标签为例）