js - DOM节点

最新推荐文章于 2024-08-22 14:32:34 发布

不想掉头发的小猴子

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量68

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_57135131/article/details/127795736

版权

这篇博客详细介绍了DOM（文档对象模型）中的节点操作，包括如何获取节点、获取节点属性、创建新节点、插入和修改节点，以及删除和克隆节点。这些基本操作对于网页动态更新和JavaScript交互至关重要，是前端开发人员必备的知识点。

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

1. 获取节点

2. 节点属性

3. 创建节点

4. 插入节点

5. 修改节点

7. 克隆节点

<!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>
</head>
<body>
    <script>
        /**
         * DOM节点
         *  元素节点（标签节点）
         *  文本节点：标签里的文字
         *  属性节点：标签上的属性
         */

        /*
        1. 获取节点
            firstChild : 第一个子节点
            firstElementChild : 第一个元素子节点
            lastChild : 最后一个子节点
            lastElementChild : 最后一个元素子节点
            
            previousSibling : 前一个兄弟节点
            previousElementSibling : 前一个元素兄弟节点
            nextSibling : 下一个兄弟节点
            nextElementSibling : 下一个元素兄弟节点
            
            parentNode : 父节点
            childNodes : 获取到所有的元素子节点 与 文本子节点[伪数组]
            children : 获取所有的元素子节点[伪数组]

        2. 节点属性
            nodeType：节点的节点类型，用数字表示
            nodeName：节点的节点名称
            nodeValue： 节点的值

                    nodeType   nodeName    nodeValue 
            元素节点    1       大写标签名      null
            属性节点    2       属性名          属性值
            文本节点    3       #text           文本内容

        3. 创建节点
            document.createElement('标签名') :创建元素节点
            document.createTextNode("文本") :创建文本节点
            documnet.createDocumentFragment() :创建文档碎片 (为了减少与页面的交互，**提高性能**)

        4. 插入节点
            父节点.appendChild(子节点) : 将子节点**追加**到父节点中子节点列表的**末尾**
            父节点.insertBefore(新节点,指定的旧的节点) ：在指定的旧节点**前面插入**新节点

        5. 修改节点
            父节点.replaceChild(新节点，旧节点) : 替换节点
        6. 删除节点
            父节点.removeChild(子节点) :删除子节点
            当前节点.remove() :删除当前节点
        7. 克隆节点
            节点.cloneNode([ture])
            - 文本节点直接复制
            - 元素节点看参数
            false(默认) : 只克隆当前节点，不包含内容。
            true : 克隆当前节点，包含内容
        */
    </script>
</body>
</html>