Web API 节点操作

最新推荐文章于 2022-12-23 20:05:03 发布

VIP文章没人回复我哼

最新推荐文章于 2022-12-23 20:05:03 发布

阅读量300

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/qq_45645902/article/details/105615790

版权

1、节点概述

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。
HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。
在这里插入图片描述
一般地，节点至少拥有 nodeType（节点类型）、nodeName（节点名称）和 nodeValue（节点值）这三个基本属性。

元素节点 nodeType: 1
属性节点 nodeType: 2
文本节点 nodeType: 3 (文本节点包含文字、空格、换行等)

在实际开发中，节点操作主要操作的是元素节点

示例

<body>
    <div class="box"></div>
    <script>
        var box = document.querySelector('.box');
        console.dir(box);
    </script>
</body>

在这里插入图片描述

2、节点层级

利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
在这里插入图片描述

1)、父级节点

node.parentNode

注释

parentNode 属性可以返回某节点的父节点，注意是最近的一个父节点
如果指定的节点没有父节点则返回 null

<body>
    <div class="demo">
        <div class="box">
            <span class="small-box">×</span>
        </div>
    </div>

    <script>
        // 父节点 parentNode
        var ht=document.querySelector('html')
        var bd =document.querySelector('body')
        var demo=document.querySelector('.demo')
        var box = document.querySelector('.box');
        var sbox = document.querySelector('.small-box');
        // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
        console.log(sbox.parentNode);
        console.log(box.parentNode);
        console.log(demo.parentNode);
        console.log(bd.parentNode);
        console.log(ht.parentNode);
    </script>
</body>

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200418234058662.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjQ1OTAy,size_16,color_FFFFFF,t_70

2)、子节点

所有子节点

parentNode.childNodes (标准)
返回包含指定节点的子节点的集合，该集合为即时更新的集合

注释
1、返回值里面包含了所有的子节点，包括元素节点、文本节点等。

<body>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);
    </script>

最低0.47元/天解锁文章

没人回复我哼

关注

0
点赞
踩
1

收藏

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

目录1、节点概述2、节点层级1)、父级节点2)、子节点所有子节点子元素节点第1个子节点最后1个子节点第1个子元素节点（有兼容性问题）最后1个子元素节点（有兼容性问题）3)、兄弟节点下一个兄弟节点上一个兄弟节点下一个兄弟元素节点（有兼容性问题）上一个兄弟元素节点（有兼容性问题）3、创建节点4、添加节点案例：简单版发布留言5、删除节点6、克隆节点学习来源：https://www.bili...
复制链接

扫一扫