节点操作

最新推荐文章于 2024-04-21 21:10:50 发布

木槿晞

最新推荐文章于 2024-04-21 21:10:50 发布

阅读量228

点赞数

分类专栏：课程文章标签： js

本文链接：https://blog.csdn.net/xyw_jzj5201314/article/details/109633755

版权

课程专栏收录该内容

21 篇文章 0 订阅

订阅专栏

节点操作

<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
    <div>
        <p>1</p>
        <p class="two">2</p>
        <p>3</p>
    </div>
    <a href="#">shouye</a>
</body>
<script>
    // 获取元素
    var div = document.querySelector("div")
    var a = document.querySelector("a")
        // 1、获取第一个子元素
    var p = div.firstElementChild
        // 2、获取最后一个子元素
    var p = div.firstElementChild
        // 3.下一个兄弟元素
    console.log(p.nextElementSibling)
        // 4.上一个兄弟元素
    console.log(p.previousElementSibling)
        // 5.获取父元素
    console.log(p.parentNode)
        // 6.追加到div里 原来位置就不存储在了
    div.appendChild(a)
        // 7.克隆元素 默认的false 只克隆标签 如果true 克隆内容和标签
    var a1 = a.cloneNode()
    div.appendChild(a1)
        // 8.创建元素  默认是在内存里面
    var span = document.createElement("span")
    div.append(span)
        // 9.移除元素 自杀
    p.remove()
        // 他杀
    div.removeChild(p)
</script>

</html>

木槿晞

关注

0
点赞
踩
0

收藏

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

节点操作<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> &lt
复制链接

扫一扫