DOM节点

最新推荐文章于 2023-08-24 22:15:24 发布

小番水源

最新推荐文章于 2023-08-24 22:15:24 发布

阅读量846

点赞数 1

分类专栏： js 文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_43368552/article/details/126242397

版权

js 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

dom节点： dom树里每一个内容都称之为节点

节点类型：

元素节点：所有的标签比如body、div html是根节点

属性节点：所有的属性比如href

文本节点 : 所有的文本

其他节点

节点查找：

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .erweima {
            position: relative;
            width: 160px;
            height: 160px;
            margin: 100px auto;
            border: 1px solid #ccc;
        }

        .erweima i {
            position: absolute;
            left: -13px;
            top: 0;
            width: 10px;
            height: 10px;
            border: 1px solid #ccc;
            font-size: 12px;
            line-height: 10px;
            color: #ccc;
            font-style: normal;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="erweima">
        <img src="./images/code.png" alt="" />
        <i class="close_btn">x</i>
    </div>
    <script>

        // 1. 查找所需要的标签
        let close_btn = document.querySelector(".close_btn");


        // 2. 注册事件
        close_btn.addEventListener("click", function () {
            // 使用parentNode找到父节点==》.erweima   操作它即可
           this.parentNode.style.display = 'none'
        });



    </script>
</body>

</html>

父元素查找：

子元素.parentNode

子元素查找：

父元素.children

子节点查找：

childNodes

获得所有子节点、包括文本节点（空格、换行）、注释节点等所有的

children（重点）

获取所有元素节点

返回的还是一个伪数组

父元素.children

兄弟关系查找：

下一个兄弟节点： nextElementSibling属性

上一个兄弟节点： previousElementSibling属性

增加节点：

目标：能够根据需求增加节点的能力

很多情况下，我们需要在页面中增加元素

比如，点击发布按钮，可以新增一条信息

一般情况下，我们新增节点，按照如下操作：

创建一个新的节点

把创建的新结点放入到指定的元素内部

学习路线：

创建节点

追加节点

追加节点：

要想在界面看到，还得插入到某个父元素中

插入到父元素的最后一个子元素：

父元素.appendChild(要插入的元素)

插入到父元素中某个子元素的前面

父元素.insertBefore(要插入的元素，在哪个元素前面)

克隆节点：

cloneNode会克隆一个跟原标签一样的元素，括号里面传入布尔值

若为true，则代表克隆时会包含后代节点一起克隆 深拷贝

若为false，则表示克隆是不包含后代节点 浅拷贝

默认为false

删除节点：

目标：能够具备根据需求删除节点的能力

若一个节点在页面中已不需要时，可以删除它

在javaScript原生DOM操作时，要删除元素必须通过父元素删除

语法：父元素.removeChild(要删除的元素)

注意：

如果不存在父子关系则删除不成功

删除的是父元素.children[ 你想删除的子元素索引号]

删除节点和隐藏节点（display：none）有区别的：隐藏节点还是存在的，但是删除，则是从html中删除节点

小番水源

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
DOM节点

删除节点和隐藏节点（display：none）有区别的：隐藏节点还是存在的，但是删除，则是从html中删除节点。删除的是父元素.children[ 你想删除的子元素索引号]父元素.insertBefore(要插入的元素，在哪个元素前面)语法：父元素.removeChild(要删除的元素)dom节点： dom树里每一个内容都称之为节点。、包括文本节点（空格、换行）、注释节点等所有的。父元素.appendChild(要插入的元素)若一个节点在页面中已不需要时，可以删除它。...
复制链接

扫一扫