常用元素节点API的增删改查操作总结（HTML，JavaScript）

最新推荐文章于 2024-01-14 11:23:12 发布

~历桑

最新推荐文章于 2024-01-14 11:23:12 发布

阅读量639

点赞数

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/weixin_50053454/article/details/123072138

版权

声明：只收录常用的API

1.增

.appendChild()：添加元素节点作为最后一个子节点

.append()：添加元素或者文本节点作为最后一个子节点

以上两个之间的区别：.append()可以同时传入多个节点或者字符串没有返回值；

.appendChild()只能传入一个节点，且不支持字符串。

.prepend()：添加元素节点或者文本节点作为第一个子节点

.insertBefore( , )：把一个新的元素节点插入到一个已有的节点前边

2.删

.remove()：把一个元素自身删掉

.removeChild()：通过父节点删除子节点

3.删

.innerText()：用字符串替换标签内部的信息

.innerHTML()：用标签结构替换原有信息

4.查

document.body：直接找到body

document.head：直接找到head

document.documentElement：直接找到根标签HTML

document.all：找到文档中所有标签

getElementById, getElementsByClassName, querySelecter...：通过固定条件进行查找

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>元素节点</title>
</head>

<body>
    <div id="d1" class="d2" name="d4">1</div>
    <div id="d1" class="d2" name="d4">2</div>
    <script>
        // 声明: 此课件只收录常用API
        var body = document.body;
        // 1, 增
        document.write("<h1>标题</h1>")
        var h2 = document.createElement("h2")
        h2.innerText = "二标题"
        body.appendChild(h2) // 添加元素节点作为最后一个子节点
        body.append("text1") // 添加文本节点作为最后一个子节点
        body.prepend(h2) // 添加元素节点作为第一个子节点
        body.prepend("text2") // 添加文本节点作为第一个子节点
        var first = body.childNodes[3]
        console.log(body.childNodes)
        var h3 = document.createElement("h3")
        h3.innerText = "h3"
        body.insertBefore(h3, first) // 把一个新的元素节点插入到一个已有的节点前边

        // 2, 删
        var h1 = document.getElementsByTagName("h1")[0]
        h1.remove() // 把一个元素自身删掉
        body.removeChild(body.childNodes[0]) // 通过父节点删除子节点

        // 3，改
        var u = document.createElement("u");
        u.innerText = "下划线"
        body.replaceChild(u, body.children[0])
            // body.innerText = "<h1>123</h1>"  // 用字符串替换标签内部的信息
            // body.innerHTML = "<h1>123</h1>"  // 用标签结构替换原有信息

        // 4，查
        console.log(document.documentElement) // 直接找到根标签html
        console.log(document.body) // 直接找到body
        console.log(document.head) // 直接找到head
        console.log(document.all) // 找到文档中所有的标签
        var d1 = document.getElementById('d1') // 通过id找到第一个符合条件的元素 
        console.log(d1.innerText) // 在js中会自动生成与元素的id值同名的变量指向这个元素
        var d2 = document.getElementsByClassName("d2") // HTMLCollection
        console.log(d2) //通过class类名找到所有符合条件的元素集合
        var d3 = document.getElementsByTagName("div") // HTMLCollection
        console.log(d3) //通过标签名找到所有符合条件的元素集合
        var d4 = document.getElementsByName("d4") // NodeList
        console.log(d4) //通过name属性找到所有符合条件的节点列表
        var d5 = document.querySelector("body .d2") // Element
        console.log(d5) //通过样式选择器找到第一个符合条件的元素
        var d6 = document.querySelectorAll("body .d2") // NodeList
        console.log(d6) //通过样式选择器找到所有符合条件的元素节点列表

        // 查找标签有时获得的是元素集合HTMLCollection或节点列表NodeList， 他们都不是数组，而是类数组，可通过以下三种方式遍历 
        // 1， for循环遍历
        for (var i = 0; i < d6.length; i++) {
            console.log(d6[i])
        }
        // 2, 把类数组转化成数组，使用forEach遍历
        Array.from(d6).forEach(function(item) {
                console.log(item)
            })
            // 3, 使用forof循环
        for (var item of d6) {
            console.log(item)
        }


        // 总结： 元素节点和文本节点常用的增删改查API
        // 增：documen.write, append, appendChild, prepend, insertBefore
        // 删：remove, removeChild
        // 改：replaceChild, innerText, innerHTML
        // 查：document.body, getElementById, getElementsByClassName, querySelecter


        // 上边的元素查找都是通过document查找的， 也可以不用document,而用任意元素查找
        // 补充： 使用元素上下左右查找
        console.log(1, h3.parentElement) // 找到父元素
        console.log(2, h3.parentNode) // 找到父节点
        console.log(3, h3.children) // 找到所有子元素
        console.log(4, h3.childNodes) // 找到所有子节点
        console.log(5, h3.childElementCount) // 子元素个数
        console.log(6, h3.previousSibling) // 找到元素前边相邻的一个兄弟节点
        console.log(7, h3.previousElementSibling) // 找到元素前边相邻的一个兄弟元素
        console.log(8, h3.nextSibling) // 找到元素后边相邻的一个兄弟节点
        console.log(9, h3.nextElementSibling) // 找到元素后边相邻的一个兄弟元素
    </script>
</body>

</html>

~历桑

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
常用元素节点API的增删改查操作总结（HTML，JavaScript）

声明：只收录常用的API1.增.appendChild()：添加元素节点作为最后一个子节点.append()：添加元素或者文本节点作为最后一个子节点以上两个之间的区别：.append()可以同时传入多个节点或者字符串没有返回值；.appendChild()只能传入一个节点，且不支持字符串。.prepend()：添加元素节点或者文本节点作为第一个子节点.insertBefore( , )：把一个新的元素节点插入到一个已有的节点前边2.删.remove()：把一个元素自身删掉
复制链接

扫一扫