WebAPI之节点关系查找、创建元素、添加元素、克隆元素、删除元素

最新推荐文章于 2022-07-15 20:10:07 发布

李建雨

最新推荐文章于 2022-07-15 20:10:07 发布

阅读量650

点赞数 1

文章标签：大前端 html5 api javascript css3

本文链接：https://blog.csdn.net/m0_55944058/article/details/121706421

版权

一、节点关系查找

1、节点介绍

一般的节点有这三类关系父节点(包含的叫父节点)、子节点（被包含的叫子节点）、兄弟节点。网页中所有内容都称之为节点

节点分类：

元素节点：指的就是标签

属性节点：指的就是属性

文本节点：指的就是文本

其他节点：注释、document

2、查找父节点

元素.parentNode

案例：点击x图标，删除自己父节点，常见于广告的关闭

<!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>
        .box {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: #f00;
        }
        
        .close {
            position: absolute;
            top: 0;
            right: 0;
            display: block;
            width: 20px;
            height: 20px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="box">
        这是一个烦人的广告
        <span class="close">X</span>
    </div>
    <script>
        let close = document.querySelector('.close');
        close.addEventListener('click', function() {
            //找到close的父元素box,给他的父元素添加一个display=none;
            close.parentNode.style.display = 'none';
        });
    </script>
</body>

</html>

3、查找子节点

子节点可能有标签、换行符、注释等等（元素.childNodes），有时候我们只想找到子节点里的标签，不想被其他节点影响（元素.children）

<1>元素.childNodes

元素.childNodes

元素.childNodes，这种方式会将父节点包含的所有字节(包括标签、换行符、空格、注释等等)，打包成伪数组给我们返回

<2>元素.children

元素.children

元素.children，这种方式只会把子节点中的标签打包成伪数组进行返回，用的较多

4、查找兄弟节点

<1>查找上一个兄弟节点

previousSibling

作用：查找上一个节点

范围：标签、换行符、空格、文本、注释等等。

<2>查找上一个标签节点

previousSibling

作用：查找上一个标签节点

范围：只有标签。

<3>查找下一个兄弟节点

nextSibling

作用：查找下一个兄弟节点

范围：标签、换行符、空格、文本、注释等等。

<4>查找下一个标签节点

nextElementSibing

作用：查找下一个标签节点

范围：只有标签。

二、创建元素

父元素.createElement('新标签')

写什么标签名，它就创建出什么标签

会得到一个空的标签，自己再用代码给它加内容

默认是看不到的，要想看到，就必须使用添加元素使它成为别的元素的子元素

三、添加元素

1、加在最后边

父元素.appendChild(子元素)

永远会插在父元素的子元素的最后边

2、加在指定位置

父元素.insertBefore(要添加的元素, 在哪个子元素的前面)

如果第二个参数传入的是null或者undefined，那也是添加到最后

如何保证永远插入到最前面？永远插在第一个元素之前就行了

父元素.insertBefore( 要添加的元素, 父元素.children[0] )

四、克隆元素

元素.cloneNode()

将元素克隆出来一个新的，但是这个新的元素也不会在也页面上显示，需要添加元素的方式给他一个位置。

默认是浅克隆，浅克隆只会克隆行内属性（行内的点击事件、行内的样式），但是不会克隆内容，假如有一个div，里边有个a标签，克隆就不会克隆里边的a标签。

如果想要连内容一起克隆怎么办呢？这就需要深克隆了

元素.cloneNode(true)

这就是深克隆了，特别简单，只需要加个true就行。

浅克隆例子

     <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: #f00;
            border: 5px solid #000;
            margin-bottom: 10px;
        }
        
    </style>
<div class="box" onclick="alert('你好,我是行内点击,深浅克隆都会克隆我')">
        我是内容,浅克隆不会克隆我
        <h3>我是h3浅克隆也不会克隆我</h3>
    </div>
    <script>
        let box = document.querySelector('.box');
        let body = document.querySelector('body');
        //浅克隆
        let box1 = box.cloneNode();
        body.appendChild(box1);
    </script>

深克隆例子

    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: #f00;
            border: 5px solid #000;
            margin-bottom: 10px;
        }
        
    </style>
    <div class="box" onclick="alert('你好,我是行内点击,深浅克隆都会克隆我')">
        我是内容,浅克隆不会克隆我
        <h3>我是h3浅克隆也不会克隆我</h3>
    </div>
    <script>
        let box = document.querySelector('.box');
        let body = document.querySelector('body');

        //深克隆
        let box2 = box.cloneNode(true);
        body.appendChild(box2);
        // 克隆出来的盒子不会带有JS Web API的事件
        box.addEventListener('click', function() {
            alert('你好啊,我是用事件监听设置的事件,复制出来的盒子不会有的偶');
        });
    </script>

五、删除元素

在早期标准语法中，要删除元素，它自己不能删，得找到它父元素把它删了

父元素.removeChild(被删的子元素)

要注意新浏览器可以调用remove删除（自杀），但是不推荐

子元素.remove() // 但是不兼容IE

李建雨

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
WebAPI之节点关系查找、创建元素、添加元素、克隆元素、删除元素

一、节点关系查找1、节点介绍一般的节点有这三类关系父节点(包含的叫父节点)、子节点（被包含的叫子节点）、兄弟节点。网页中所有内容都称之为节点节点分类：元素节点：指的就是标签属性节点：指的就是属性文本节点：指的就是文本其他节点：注释、document2、查找父节点元素.parentNode案例：点击x图标，删除自己父节点，常见于广告的关闭<!DOCTYPE html><html...
复制链接

扫一扫