DOM 基本操作（增删改插）

最新推荐文章于 2022-07-19 15:45:33 发布

XUPT-前端在逃工程师

最新推荐文章于 2022-07-19 15:45:33 发布

阅读量164

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Dimuzero/article/details/110382825

版权

JavaScript 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

本文详细介绍了DOM的基本操作，包括动态创建元素、删除元素、修改元素、插入元素等。通过示例代码展示了如何使用JavaScript操作DOM结构，如创建新元素、替换子元素、插入元素及删除元素等操作，帮助读者掌握DOM操作技巧。

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

DOM 基本操作（增删改插）

1.增（动态创建dom元素）

document.creatElement();
创建元素节点

document.creatElementTextNode()；
创建文本节点

document.creatElementComment();
创建注释节点

document.creatElementDocumentFragment();
创建文档节点

2.删（剪贴操作）

parent.removeChiled();
删除parent父元素中的指定子元素

child.remove();
删除child元素

3.改

parent.replaceChild(new,origin);
新元素替换老元素

4.插

parentnode.appendChiled();
追加到当前元素的内容之后，只能传一个节点，且不直接支持传字符串

parentnode.append();
追加到当前元素的内容之后，可以同时传入多个节点或字符串，没有返回值；

parentnode.innsertBefor(a,b)

在父级元素element下的子元素a之前添加子元素b

5.下面这个代码详细理解上述DOM基本操作

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <p></p>
        <span></span>
        <h1></h1>
        <div></div>
        <i></i>
        <a href="#"></a>
    </div>
    <script>
        var strong = document.createElement('strong')
        var p = document.createElement('p')
        var span = document.createElement('span')
        //创建元素节点
        var div = document.getElementsByClassName('box')[0]
        //通过DOM获取元素节点
        var arr = []
        //创建空数组用来接收div子元素节点
        for (var i = 0; i < div.children.length; i++) {
            arr[i] = div.children[i]
        }
        //用for循环把div的子元素节点存入数组arr
        div.append(p)
        div.appendChild(span)
        //给父元素div后追加子元素p和span（先执行的在前面）
        div.insertBefore(strong, arr[1])
        //添加操作在父元素div中的第二个子元素节点之前添加strong元素
        div.removeChild(arr[2])
        //删除父元素div中的第三个子元素节点
        arr[3].remove()
        //删除第四个子元素节点
        div.replaceChild(a, arr[0])
        //让a元素与父级元素div中的第一个子元素节点替换
    </script>
</body>

</html>

在这里插入图片描述

XUPT-前端在逃工程师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM 基本操作（增删改插）

DOM 基本操作（增删改插）  1.增（动态创建dom元素） document.creatElement();创建元素节点document.creatElementTextNode()；创建文本节点document.creatElementComment(); 创建注释节点document.creatElementDocumentFragment(); 创建文档节点  2.删（剪贴操作）parent.removeC
复制链接

扫一扫