JavaScript的DOM基本操作（下）

最新推荐文章于 2026-01-08 23:29:03 发布

原创最新推荐文章于 2026-01-08 23:29:03 发布 · 1.2k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #网络爬虫 #node.js #前端 #python

JavaScript零基础入门专栏收录该内容

20 篇文章

订阅专栏

文章目录

JavaScript的DOM基本操作

JavaScript的DOM基本操作

1. 节点操作

1.1创建节点

语法：document.createElement('标签名称')
作用：创建一个指定标签元素
返回值：一个创建好的元素节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        // 创建一个div标签
        var div = document.createElement('div')
        // 控制台输出
        console.log(div)
    </script>
</body>
</html>

在这里插入图片描述

1.2 插入节点

语法1：父节点.appendChild(子节点)
作用：把子节点放在父节点的内部，并且放在最后的位置
语法2：父节点.insertBefore(要插入的子节点, 哪一个子节点的前面)
作用：把子节点放在父节点的内部，并且放在某个指定子节点的前面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <p>本身的标签p</p>
    </div>
    <script>
        // 创建一个div标签
        var span1 = document.createElement('span')
        span1.innerText = "创建的标签1"
        var span2 = document.createElement('span')
        span2.innerText = "创建的标签2"
        // 控制台输出
        console.log(span1)
        console.log(span2)
        // 获取到页面上的div标签
        var div = document.querySelector('div')
        div.appendChild(span1)
        var p = document.querySelector('p')
        div.insertBefore(span2, p)
    </script>
</body>
</html>

在这里插入图片描述

1.3 删除节点

语法1：父节点.removeChild(子节点)
作用：从父节点内删除某一个子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <p>本身的标签p</p>
        <span>本身的标签span</span>
    </div>
    <script>
        // 获取到页面上的div标签
        var div = document.querySelector('div')
        var p = document.querySelector('p')
        div.removeChild(p)
    </script>
</body>
</html>

在这里插入图片描述

语法2：节点.remove()
作用：把自己删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <p>本身的标签p</p>
        <span>本身的标签span</span>
    </div>
    <script>
        // 获取到页面上的div标签
        var div = document.querySelector('div')
        div.remove()
    </script>
</body>
</html>

在这里插入图片描述

1.4 替换节点

语法：父节点.replaceChild(换上节点, 换下节点)
作用：在父节点内，使用换上节点替换掉换下节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <p>本身的标签p</p>
        <span>本身的标签span</span>
        <p>本身的标签p</p>
    </div>
    <script>
        // 创建一个 i 标签
        var i = document.createElement('i')
        // 标签添加文本
        i.innerText = '创建的标签i'
        // 获取到页面上的div标签
        var div = document.querySelector('div')
        var span = document.querySelector('span')
        div.replaceChild(i, span)
    </script>
</body>
</html>

在这里插入图片描述

1.5 克隆节点

语法：节点.cloneNode(是否克隆后代节点true/false)
作用：把该节点复制一份一模一样的内容
返回值：克隆好的新节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <p>本身的标签p</p>
    </div>
    <script>
        // 定位元素
        var div = document.querySelector('div')
        // 克隆节点
        var clone1 = div.cloneNode(false)
        var clone2 = div.cloneNode(true)
        // 控制台输出
        console.log(clone1)
        console.log(clone2)
    </script>
</body>
</html>