JS 节点操作

最新推荐文章于 2022-07-28 15:51:11 发布

唯一3

最新推荐文章于 2022-07-28 15:51:11 发布

阅读量100

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/wwy6191/article/details/120403756

版权

节点（node），网页中的所有内容均为节点，分为

nodeType: 节点类型
nodeName: 节点名称
nodeValue: 节点值

1.nodeType 节点类型

nodeType=1 元素节点
nodeType=2 属性节点
nodeType=3 文本节点（包含文字、空格、换行）

2.节点层级

1.父节点 parentNode

只能返回一个亲父亲节点

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <div class="nav">
        </div>
    </div>
    <script>
        var nav = document.querySelector('.nav');
        console.log(nav.parentNode); // 结果：选中box父盒子
    </script>
</body>

</html>

2.子节点 childNodes 和 children

（1）childNodes（标准形式）

得到里面所有的子节点，包括了元素节点和文本节点。

文本节点里是换行等不重要的部分，用nodeType选择去掉它

（2）children（非标准形式）

得到里面所有的子元素节点。

（3）firstChild

所有节点里的第一个，一般为文本节点

（4）lastChild

所有节点里的最后一个，一般为文本节点

（5）firstElementChild (IE9以上)

元素节点里的第一个

（6）lastElementChild (IE9以上)

元素节点里的最后一个

（7）实际开发常见中选择第一个和最后一个子节点的方法

        console.log(box.children[0]); 
        // 结果：得到里面的第一个元素节点
        console.log(box.children[box.children.length - 1]); 
        // 结果：得到里面的最后一个元素节点

（8）nextSibling

下一个节点

（8）previousSibling

上一个节点

（8）nextElementSibling (IE9以上)

下一个元素节点

（8）previousElementSibling (IE9以上)

上一个元素节点

3.创建节点

document.createElement()

例：var li = document.createElement('li');

4.添加节点

1.在最后添加节点：

ul.appendChild(li)

2.在指定处插入节点:

ul.insertBefore(li,ul.children[0])

ul是父节点，li是需要插入的元素，后面是插入在哪个元素的前面

5.删除节点

ul.removeChild(ul.children[0])

6.克隆节点

node.cloneNode()

注意拷贝后要添加到父节点下才能显示

括号为空或false，浅拷贝，只克隆节点本身，不克隆里面的子节点。

在括号内加true，深度拷贝，克隆节点本身与里面的子节点。

唯一3

关注

0
点赞
踩
0

收藏

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

一、简介节点（node），网页中的所有内容均为节点，分为nodeType: 节点类型 nodeName: 节点名称 nodeValue: 节点值1.nodeType 节点类型nodeType=1 元素节点 nodeType=2 属性节点 nodeType=3文本节点（包含文字、空格、换行）2.节点层级 1.父节点 parentNode 只能返回一个亲父亲节点<!DOCTYPE html><html lan...
复制链接

扫一扫