day14 - JavaScript中DOM节点的操作--新增、删除和替换、获取父节点、兄弟节点、克隆节点、查找元素

最新推荐文章于 2024-04-10 10:59:25 发布

小高今天早睡了吗？

最新推荐文章于 2024-04-10 10:59:25 发布

阅读量1.5k

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/m0_55710075/article/details/122119542

版权

JavaScript 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

一、DOM的新增

1.innerHTML:

innerHTML会把原来的内容先清空，然后再添加新的内容，原来的内容已经没有了。只不过是新添加的内容与原来的内容长得一样而已（原本具有的事件不具存在。innerHTML 只能解析字符串

<body>
    <div class="a">
        <span>hello</span>
    </div>

    <script>
        var oDiv = document.querySelector('.a') ;
        oDiv.innerHTML = '<p>你好</p>'    
        //此时页面会清空原来的内容hello,再添加 你好

    </script>

2.DOM方法：appendChild()

创建一个文本节点：createTextNode()
创建标签节点：createElement()
在最后面插入 appendChild()
或在指定的元素前面插入 insertBefore(要插入的元素 , 指定的元素)

注意：同一个标签只能操作一次 — 标签是对象，对象都有唯一的地址

appendChild：
概念：把要添加的节点添加到指定父级里面的最后面，所以也叫追加
用法：fatherdom.appendChild( insertdom )
兼容性：所有浏览器都支持此方法。

<body>
    
    <div class="a">
        <span>hello</span>
    </div>

    <script>
        var oDiv = document.querySelector('.a') ;
    
        // 1.创建一个标签  createElement
        //oP在创建标签的时候是一个对象
        var oP = document.createElement('p') ;  
        // console.log(oP);   // <p></p>

        //2.创建一个文本节点
        var oText = document.createTextNode('今天天气好好啊！');
        // console.log(oText) ;   //今天天气好好啊！

        //3.添加子元素,把文本插入标签中
        oP.appendChild(oText) ;
        // console.log(oP) ;     //<p>今天天气好好啊！</p>

        //4.把p插入div中
        oDiv.appendChild(oP) ;
        console.log(oDiv) ;
        
        oDiv.appendChild(oP) ; 
        //多次插入是无效的，只会插入一个，因为标签是对象，对象都有唯一的地址

    </script>
</body>

insertBefore() :
概念：把要插入的节点添加到指定父级里面的指定节点之前。
用法：fatherdom.insertBefore( insertdom，chosendom )。
兼容性：所有浏览器都支持此方法，但是值得注意的是，如果第二个参数节点不存在，在IE和Safari下会把要添加的节点使用appendChild()方法追加到指定父级中，而其他主流浏览器（Firefox、Chrome、Opera等）下会报错，所以在插入节点的时候，需要先判断第二个参数节点是否存在

二、DOM的删除

remove()：删除自己和所有的子元素

<body>
    <div class="a">
        <p>内容1</p>
        <span>内容2</span>
        <h2>
            <i>内容3</i>
        </h2>
    </div>

    <script>
        //remove()：删除自己和所有的子元素
        var oDiv = document.querySelector('.a');
        oDiv.remove()    //此时打开网页可发现div、p、span、h2、i标签都被删除了
    </script>
</body>

removeChild()：删除指定的子元素，只能删除儿子，不能删除孙子

<body>
    <div class="a">
        <p>内容1</p>
        <span>内容2</span>
        <h2>
            <i>内容3</i>
        </h2>
    </div>

    <script>
        var oDiv = document.querySelector('.a');

        //removeChild()：删除指定的子元素，只能删除儿子，不能删除孙子
        var oP = document.querySelector('p') ;
        oDiv.removeChild(oP) ;    //p标签被删除
        var oI = document.querySelector('i') ;
        oDiv.removeChild(oI) ;    //打印会报错，i没有被删除因为i不是div的子元素
    </script>
</body>

innerHTML = ‘’ 删除所有的子元素

<body>

    <div class="a">
        <p>内容1</p>
        <span>内容2</span>
        <h2>
            <i>内容3</i>
        </h2>
    </div>

    <script>
        var oDiv = document.querySelector('.a');
        
        //innerHTML = ''  删除所有的子元素
        oDiv.innerHTML = '' ;  //打开网页会发现div的子元素都被删除了
    </script>
</body>

三、DOM的替换

替换元素parent.replaceChild(newchild,oldchild)，使用newchild元素替换oldchild元素

<body>
    <div class="a">
        <p>旧内容1</p>
        <span>旧内容2</span>
    </div>

    <script>
        //拿对象
        var oDiv = document.querySelector('.a') ;
        var oP = document.querySelector('p') ;
        var oSpan = document.querySelector('span') ;

        //创建标签
        var oStrong = document.createElement('strong') ;
        oStrong.innerHTML = '新内容' ;

        //将oSpan里面的 旧内容2 替换成 新内容
        oDiv.replaceChild(oStrong , oSpan) ; 
    </script>
</body>

四、获取父节点parentNode和parentElement的区别和用法

用法：parentNode：获取父节点；parentElement：获取父元素
共同点：parentNode和parentElement都可以获取父节点的所有节点属性，可以配合nodeName获取节点名字
唯一区别：在获取根部document节点是，parentElement找的是元素，因此报错null,而parentNode获取的是节点，返回的是#document

五、获取子节点childNodes和children

childNodes：子节点 — 包含所有的文本，换行，标签，注释等等
children：子元素 — 只包含标签

<body>
    <div class="a">
        <p>p标签</p>
        <span>span标签</span>
        <h3>h3标签</h3>
    </div>

    <script>
        var oDiv = document.querySelector('.a') ;
        console.log(oDiv.childNodes) ;
        console.log(oDiv.children) ;
    </script>
</body>

在这里插入图片描述

六、获取兄弟节点

兄弟，就是和你平辈的，既不是上一级也不是下一级，而且可能有比你大的（兄），也可能比你小（弟），兄弟节点同理。

重点注意理解元素和节点
元素：只包含标签
节点：包含所有的文本，换行，标签，注释等等

previousElementSibling ：前一个标签兄弟元素
previousSibling：前一个兄弟节点
nextElementSibling：后一个标签兄弟
nextSibling：后一个兄弟节点

<body>
    
    <div class="a">
        <h1>内容1</h1>
        <span>内容2</span>
        <p>内容3</p>
        <strong>内容4</strong>
    </div>

    <script>
        //拿对象
        var oDiv = document.querySelector('.a') ;
        var oP = document.querySelector('p') ;

        // previousElementSibling  前一个标签兄弟元素
        console.log(oP.previousElementSibling);  // 输出：<span>内容2</span>
        
        // previousSibling   前一个兄弟节点
        console.log(oP.previousSibling);  // 此时获取的是文本节点 text 换行

        //nextElementSibling：后一个标签兄弟
        console.log(oP.nextElementSibling) ;  // 输出：<strong>内容4</strong>

        // nextSibling :后一个兄弟节点
        console.log(oP.previousElementSibling.previousElementSibling) ;  //输出：<h1>内容1</h1>
    </script>
</body>

六、克隆节点

CloneNode()：这是一种用于将元素从一个列表克隆到另一个列表的方法。由javascript提供的cloneNode()方法创建节点的副本并返回克隆。它可以克隆所有属性及其值。

cloneNode()：克隆节点 , 默认只复制标签

<body>
    <div class="a">
        <p>克隆节点</p>
    </div>
    
    <script>
        //拿对象
        var oDiv = document.querySelector('.a') ;
        var oP = document.querySelector('p') ;

        // cloneNode()  克隆节点 , 默认只复制标签
        var oDiv2 = oDiv.cloneNode() ;
        console.log(oDiv2) ;   //控制台打印结果：<div class="a"></div>
        document.body.appendChild(oDiv2) ;
        
    </script>
</body>

打印结果：此时我们发现只是克隆了标签
在这里插入图片描述

cloneNode(true)：克隆节点，包含子元素

<body>
    <div class="a">
        <p>克隆节点</p>
    </div>

    <script>
        //拿对象
        var oDiv = document.querySelector('.a') ;
        var oP = document.querySelector('p') ;

        // cloneNode(true)  克隆节点，包含子元素
        var oDiv2 = oDiv.cloneNode(true) ;
        console.log(oDiv2) ;
        document.body.appendChild(oDiv2) ;
        
    </script>
</body>

打印结果：此时我们发现只是克隆节点，包含子元素
在这里插入图片描述

七、查找元素

选择器是从右向左查找的
后代选择器需要酌情使用

<body>
    <div class="a">
        <ul>
            <li>
                <div>
                    <h3 class="title">
                        <span></span>
                    </h3>
                </div>
            </li>
        </ul>
    </div>
    <h1></h1>
    <br>
    <div class="b"></div>
    <div class="c"></div>

    <div class="a">
        <p>p标签</p>
        <span>span标签</span>
        <h3>h3标签</h3>
    </div>

    <script>
        var oDiv = document.querySelector('.a') ;
        console.log(oDiv) ;  // 此时会输出第一个选择器名称为a的标签

        var oDiv = document.getElementsByClassName('a')[0] ;
        console.log(oDiv) ;  //会报错，语法错误 getElementsByClassName后应该直接加类名

        var oP = document.querySelector('.a p') ;
        console.log(oP) ;  // <p>p标签</p>  选择器会先查找p标签

        var oP = oDiv.querySelector('p') ;
        console.log(oP);  // null 
       // 因为此时oDiv是第一个选择器为a的标签，但当中没有p标签，所以为null
        
    </script>
</body>

小高今天早睡了吗？

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
day14 - JavaScript中DOM节点的操作--新增、删除和替换、获取父节点、兄弟节点、克隆节点、查找元素

一、DOM的新增1.innerHTML:innerHTML会把原来的内容先清空，然后再添加新的内容，原来的内容已经没有了。只不过是新添加的内容与原来的内容长得一样而已（原本具有的事件不具存在。innerHTML 只能解析字符串<body> <div class="a"> <span>hello</span> </div> <script> var oDiv = docume
复制链接

扫一扫