Node节点、NodeList节点列表

最新推荐文章于 2023-04-06 17:48:58 发布

luckyPian

最新推荐文章于 2023-04-06 17:48:58 发布

阅读量2.6k

点赞数 4

分类专栏： js 文章标签： javascript

pian

本文链接：https://blog.csdn.net/qq_45063232/article/details/118732553

版权

js 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

本文介绍了DOM中的Node节点属性和方法，包括className、innerHTML、value等，以及如何操作节点如appendChild、insertBefore和cloneNode。同时讲解了NodeList节点列表的概念，强调其类数组特性并举例说明遍历和使用方式。

摘要由CSDN通过智能技术生成

一.NOde节点

属性

className 设置/返回元素的class属性的属性值
innerHTML 设置/返回元素的开始标签与结束标签之间的内容
value 设置/返回文本框与文本域的内容
nextElementSibling 返回下一个紧邻的兄弟节点
previousElementSibling 返回上一个紧邻的兄弟节点
parentNode 返回父级节点
children 找子级元素
style 设置/获取一个元素的行内样式
firstElementChild 返回第一个元素子节点
lastElementChild 返回最后一个元素子节点
nodeName 返回该元素节点的标签名(大写字符串)

方法

nodeType节点类型(会有返回值) 1表示元素节点，3表示文本节点，8表示注释节点，9表示document对象

setAttribute(key,value) 设置元素的自定义属性
getAttribute(key) 获取元素的自定义属性
getElementsByTagName()
getElementsByClassName() 注：与上面方法的区别是，搜索范围变了(上面是从NodeList中寻找，此处是从Node中寻找）
remove() 删除元素
appendChild() 插入到结束标签之前向节点的子节点列表的结尾添加新的子节点

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            color: skyblue;
        }
        
        h1 {
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <h1>你好</h1>
    <span>我是插入进来的</span>
    <script>
        var oH1 = document.querySelector("h1");
        var osp = document.querySelector("span");
        oH1.appendChild(osp);
    </script>
</body>

</html>

父元素.insertBefore(插入的元素,参照物) 在指定的子节点前插入新的子节点

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            color: skyblue;
        }
        
        div {
            margin-top: 90px;
            width: 200px;
            height: 100px;
            background-color: pink;
        }
    </style>

</head>

<body>
    <div>
        <h1>你好</h1>
    </div>
    <span>我是插入进来的</span>
    <script>
        var Odiv = document.querySelector("div");
        var oH1 = document.querySelector("h1");
        var osp = document.querySelector("span");
        // 父元素.insertBefore(插入的元素,参照物)在指定的子节点前插入新的子节点
        Odiv.insertBefore(osp, oH1);
    </script>
</body>

</html>