【JavaScript】获取和操作 DOM 节点

繁星学编程

已于 2023-01-30 22:33:57 修改

阅读量721

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2023-01-04 22:54:41 首次发布

本文链接：https://blog.csdn.net/qq_45867247/article/details/128555839

版权

JavaScript 专栏收录该内容

38 篇文章 2 订阅

订阅专栏

💻 【JavaScript】获取和操作 DOM 节点 🏠专栏：JavaScript
👀个人主页：繁星学编程🍁
🧑个人简介：一个不断提高自我的平凡人🚀
🔊分享方向：目前主攻前端，其他知识也会阶段性分享🍀
👊格言：☀️没有走不通的路，只有不敢走的人！☀️
👉让我们一起进步，一起成为更好的自己！！！🎁

文章目录

【JavaScript】获取和操作 DOM 节点

【JavaScript】获取和操作 DOM 节点

一. DOM节点分类

DOM 节点	描述
元素节点	页面上的每一个标签
属性节点	书写在标签上的属性
文本节点	书写的文本内容(包含空格和回车)
注释节点	书写的注释(包含空格和回车)

实例：

<div class="box">
    hello
    <p>你好</p>
    <!-- 注释 -->
    <p>p2</p>
    world
</div>

问：div标签里面一共有多少个子节点，分别是什么？

文本节点：一个回车 + 4个空格 + hello + 一个回车+ 4个空格
元素节点：<p>你好</p>
文本节点：一个回车 + 4个空格
注释节点：
文本节点：一个回车 + 4个空格
元素节点：<p>p2</p>
文本节点：一个回车 + 4个空格 + world + 一个回车

二. 获取节点

(1) 获取元素节点

1. 非常规元素节点

html：document.documentElement
body：document.body
head：document.head

2. 常规元素节点

document.getElementById
document.getElementsByClassName
document.getElementsByTagName
document.querySelector
document.querySelectorAll

(2) 获取节点的方式

属性或方法	描述
节点.childNodes	获取该节点所有的子节点
节点.children	获取该节点的所有子元素节点
节点.firstChild	获取该节点的第一个子节点
节点.firstElementChild	获取该节点的第一个子元素节点
节点.lastChild	获取该节点的最后一个子节点
节点.lastElementChild	获取该节点的最后一个子元素节点
节点.previousSibling	获取该节点的上一个兄弟节点
节点.previousElementSibling	获取该节点的上一个兄弟元素节点
节点.nextSibling	获取该节点的下一个兄弟节点
节点.nextElementSibling	获取该节点的下一个兄弟元素节点
节点.parentNode	获取该节点的父节点
节点.parentElement	获取该节点的父元素节点
节点.attributes	获取该元素的所有属性节点

<p>p1</p>
<div class="box">
    ni
    <p>p2</p>
    <!-- 注释1 -->
    <!-- 注释2 -->
    <p>p3</p>
    hao
</div>
<p>p4</p>

实例：

var div = document.querySelector("div");
// 1. childNodes
console.log(div.childNodes); // [text, p, text, comment, text, comment, text, p, text]伪数组

// 2. children
console.log(div.children); // [p, p]

// 3. firstChild
console.log(div.firstChild); // " ni "

// 4. firstElementChild
console.log(div.firstElementChild); // <p>p2</p>

// 5. lastChild
console.log(div.lastChild); // " hao "

// 6. lastElementChild
console.log(div.lastElementChild); // <p>p3</p>

// 7. previousSibling
console.log(div.previousSibling); // #text

// 8. previousElementSibling
console.log(div.previousElementSibling); // <p>p1</p>

// 9. nextSibling
console.log(div.nextSibling); // #text

// 10. nextElementSibling
console.log(div.nextElementSibling); // <p>p4</p>

// 11. parentNode
console.log(div.parentNode); // <body>...</body>

// 12. parentElement
console.log(div.parentElement); // <body>...</body>

// 13. attributes
console.log(div.attributes); // NamedNodeMap {0: class, class: class, length: 1}

三. 操作节点

(1) 创建节点

只是创建不会显示到页面上，要显示到页面上得使用下面的插入节点。

创建元素节点

语法：

document.createElement('标签名')

返回值：创建好的元素节点。

var div = document.createElement("div");    
console.log(div); // <div></div>

创建文本节点

语法：

document.createTextNode("文本内容")

返回值：创建好的文本节点。

var text = document.createTextNode("好的");
console.log(text); // "好的"

(2) 插入节点

appendChild()

语法：

父节点.appendChild(子节点)

作用：把子节点插入到父节点中，并且是在最后面的位置插入

<div class="box">
    <span class="a">1</span>
</div>
<!-- 分割线 -->
var box = document.querySelector(".box");
var div = document.createElement("div");
box.appendChild(div);
/*
    <div class="box">
    	<span class="a">1</span>
    	<div></div>
    </div>
*/

insertBefore()

语法：

父节点.insertBefore(子节点, 谁的前面)

作用：把子节点插入到父节点中，并且放到指定一个节点的前面。

注意：第二个参数必须写，但是第二个参数有没有可以忽略。

<div class="box">
    <span class="a">1</span>
</div>
<!-- 分割线 -->      
var box = document.querySelector(".box");
var span1 = document.querySelector(".a");
var span2 = document.createElement("span");
box.insertBefore(span2, span1);
/*
    <div class="box">
        <span></span>
    	<span class="a">1</span>
    </div>
*/

(3) 删除节点

removeChild()

语法：

父节点.removeChild(子节点)

作用：将子节点从父节点中删除。

<div class="box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>
<h1>标题</h1>
<!-- 分割线 -->  
var div = document.querySelector(".box");
var p1 = document.querySelector("p:first-child")
div.removeChild(p1); 
/*
    <div class="box">
        <p>2</p>
        <p>3</p>
    </div>
*/

remove()

语法：节点.remove()

作用：将该节点删除

<div class="box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>
<!-- 分割线 -->  
var div = document.querySelector(".box");
div.remove(); // <h1>标题</h1>

注：若删除的节点中有子节点会一并删除。

(4) 替换节点

replaceChild()

语法：

父节点.replaceChild(换上节点, 换下节点)

作用：在父节点中，使用换上节点替换换下节点

<div>
    <h1>你好</h1>
</div>
<button>点击替换</button>
<!-- 分割线 -->  
<script>
    var div = document.querySelector("div");
    var h1 = document.querySelector("h1");
    var btn = document.querySelector("button");

    var h2 = document.createElement("h2");
    h2.innerHTML = "好的";

    btn.onclick = function () {
        // 父节点.replaceChild(换上节点, 换下节点)
        div.replaceChild(h2, h1);
        /*
        	<div>
    			<h2>好的</h2>
            </div>
        */
    };
</script>

(5) 克隆节点

cloneNode()

语法：

节点.cloneNode(参数)

参数：

true 克隆后代节点
false 默认不克隆后代节点

作用：把该节点复制一份一模一样的

<div class="box" style="width: 300px; height: 300px; background-color: pink">
    <p style="width: 100px; height: 100px; background-color: yellow">
        <span style="background-color: green">spanspan</span>
    </p>
</div>
<button>复制</button>
<script>
    var btn = document.querySelector("button");
    var box = document.querySelector(".box");
    btn.onclick = function () {
        var res = box.cloneNode(true);
        document.body.appendChild(res);
    };
</script>

(6) 节点属性

节点类型（nodeType）

节点	节点类型
元素节点	1
属性节点	2
文本节点	3
注释节点	8

节点名称（nodeName）

节点	节点名称
元素节点	大写标签名
属性节点	属性名
文本节点	#text
注释节点	#comment

节点内容（nodeValue）

节点	节点内容
元素节点	null
属性节点	属性值
文本节点	文本内容
注释节点	注释内容

四. 案例：微博发布

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            textarea {
                width: 400px;
                height: 200px;
                margin: 30px;
            }
            * {
                margin: 0;
                padding: 0;
            }
            ul {
                margin: 30px;
            }
            li {
                list-style: none;
                border: 1px solid #000;
                padding: 10px;
                width: 400px;
                height: 50px;
                position: relative;
            }
            .btnStyle {
                width: 40px;
                height: 30px;
                position: absolute;
                top: 10px;
                right: 10px;
            }
        </style>
    </head>
    <body>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <button>发布</button>
        <ul></ul>
        <script>
            // 获取元素
            var ul = document.querySelector("ul");
            var textarea = document.querySelector("textarea");
            var btnOrigin = document.querySelector("button");
            btnOrigin.onclick = function() {
                // 获取文本域内容
                var text = textarea.value;
                // 判断文本域的内容是否为空
                if (text === '') {
                    alert('请输入内容');
                    return;
                }
                // 创建li标签
                var li = document.createElement("li");
                // 创建删除按钮
                var btn = document.createElement("button");
                // 将文本域内容放入li中
                li.innerText = `${text}`;
                // 在页面中ul里最前面显示li标签
                ul.insertBefore(li, ul.firstElementChild);
                // li渲染后清空文本域中的内容
                textarea.value = "";
                // 在创建的li标签中添加按钮
                li.appendChild(btn, li);
                // 给创建的按钮添加类名
                btn.classList.add("btnStyle");
                // 给创建的按钮添加文本
                btn.innerText = "x";
                // var btn1 = document.querySelector(".btnStyle");
                btn.onclick = function() {
                    if (confirm("你确定要删除吗？")) {
                        li.remove();
                    }
                }
            }
        </script>
    </body>
</html>

效果图：

请添加图片描述
结束语：

希望对您有一点点帮助，如有错误欢迎小伙伴指正。
👍点赞：您的赞赏是我前进的动力！
⭐收藏：您的支持我是创作的源泉！
✍评论：您的建议是我改进的良药！
一起加油！！！💪💪💪

繁星学编程

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
【JavaScript】获取和操作 DOM 节点

只是创建不会显示到页面上，要显示到页面上得使用下面的插入节点。// 父节点.replaceChild(换上节点, 换下节点)：把子节点插入到父节点中，并且放到指定一个节点的前面。：把子节点插入到父节点中，并且是在最后面的位置插入。：若删除的节点中有子节点会一并删除。// li渲染后清空文本域中的内容。// 在创建的li标签中添加按钮。// 判断文本域的内容是否为空。：将子节点从父节点中删除。：在父节点中，使用换上节点。// 给创建的按钮添加类名。// 给创建的按钮添加文本。：创建好的元素节点。
复制链接

扫一扫