【JavaScript】获取和操作 DOM 节点

news2024/9/23 13:22:00

文章目录

【JavaScript】获取和操作 DOM 节点
- 一. DOM节点分类
- 二. 获取节点
- - (1) 获取元素节点
  - - 1. 非常规元素节点
    - 2. 常规元素节点
  - (2) 获取节点的方式
- 三. 操作节点
- - (1) 创建节点
  - (2) 插入节点
  - (3) 删除节点
  - (4) 替换节点
  - (5) 克隆节点
  - (6) 节点属性
- 四. 案例：微博发布

【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>