节点，元素操作，插入元素，替换元素，删除元素

其他 2020-04-16 23:40:48 阅读次数: 0 
节点

<!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>
        <!-- 注释 -->
        <p>一段文字</p>
        <p>一段文字</p>
    </div>
    <script>
        var div = document.querySelector('div')
        // 元素都有一个children属性：获取当前元素的子元素
        // console.log(div.children) // 2个p标签

        // childNodes获取的是子节点:注释,文本,标签全部都叫节点
        console.log(div.childNodes)

        // 我们可以获取某个节点以后通过nodeName属性来判断节点类型
        console.log(div.childNodes[0].nodeName) // #text 换行的文本节点
        console.log(div.childNodes[1].nodeName) // #comment 注释节点
        console.log(div.childNodes[3].nodeName) // P 大写的标签名

        // 如果我们确切的知道这个是一个标签节点,还可以使用tagName直接获取标签名
        console.log(div.tagName) // DIV(大写)
    </script>
</body>
</html>


元素操作

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>

<body>
    <script>
        // 创建一个div元素,用box变量来接收
        var box = document.createElement('div')

        console.log(document.body) // body元素是唯一的,可以直接document.body来获取
        // appendChild方法来往body的结束去追加box作为body的最后一个子元素
        document.body.appendChild(box)

        // 如果反复append同一个box,那么最终也会只有一个
        // document.body.appendChild(box)

        box.innerHTML = 'box4'
        // 通过js style属性设置的样式统一都在行内
        // box.style.height = '200px'  // 200px是字符串，需要加引号
        // box.style.width = '200px'
        // box.style.background = 'red'

        // 我们可以在css里先把样式预设好,这里只需要修改对应class就行了
        box.classList.add('box')


        // 先克隆(复制),在append
        var box1 = box.cloneNode()
        // 克隆分为深克隆和浅克隆,浅克隆只克隆元素本身,不会克隆子元素和内容,默认是浅克隆
        // cloneNode方法有一个参数,默认值是false,代表浅克隆,true代表深克隆,就会连着内容一起克隆
        var box1 = box.cloneNode(true)
        document.body.appendChild(box1)


        // 注意点:如果元素有id属性,最好不要直接克隆,否则会出现两个id相同的元素


    </script>    
</body>

</html>


插入元素


<!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>
    <ul>
        <li>首页</li>
        <li>列表</li>

        <li id="about">关于</li>
    </ul>
    <script>
        var ul = document.querySelector('ul')
        var li = document.createElement('li')
        var about = document.querySelector('#about')
        li.innerHTML = '练习'
        // ul.appendChild(li) // 在ul的最后面加上一个li
        ul.insertBefore(li,about) // 把li放在ul里面,about前面
    </script>
</body>

</html>


替换元素


<!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>
    <ul>
        <li>首页</li>
        <li>列表</li>
        <li id="about">关于</li>
    </ul>
    <script>
        var ul = document.querySelector('ul')
        var about = document.querySelector('#about')
        var li = document.createElement('li')
        li.innerHTML = '联系我们'

        // 在ul里面把about替换成li （节点替换）
        ul.replaceChild(li,about)
    </script>
</body>

</html>


删除元素


<!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>
    <ul>
        <li>首页</li>
        <li>列表</li>
        <li id="about">关于</li>
    </ul>
    <script>
        var ul = document.querySelector('ul')
        var about = document.querySelector('#about')

        // 父元素.removeChild删除子元素 (不加引号)
        // ul.removeChild(about)

        // 补充：parentNode找到自己的父级
        // about.parentNode.removeChild(about)

        // 可以自己删除，但是IE8-不能使用
        about.remove()


    </script>
</body>

</html>
dfc_dfc
发布了60 篇原创文章 · 获赞 3 · 访问量 528
私信 关注

猜你喜欢

转载自blog.csdn.net/dfc_dfc/article/details/105550050
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022