节点操作（增加） /案例：下拉菜单/案例：简单版发布留言

最新推荐文章于 2022-07-02 19:03:31 发布

杨蛋蛋~R

最新推荐文章于 2022-07-02 19:03:31 发布

阅读量508

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_50119334/article/details/108905320

版权

节点操作

因为利用DOM提供的方法获取元素逻辑性不强且非常繁琐

因此学习利用节点层级关系获取元素：

利用父子兄的关系获取元素
逻辑性强，但兼容性差

节点：页面中所有的内容都是节点（标签，属性，文本，注释等），在DOM中，节点使用node来获取
HTML DOM树中的所有节点都可以通过JS来访问，所有HTML元素都可以被修改，也可以创建或者删除
节点至少有：nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）这三个基本属性

元素节点 nodeType 为 1
属性节点 nodeType 为 2
文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）
在实际开发中，主要操作的是元素节点

父节点 parentNode

  <body>
    <div class="box">
      <span class="erweima"></span>
    </div>
    <script>
        //1.父节点 parentNode
        var erweima = document.querySelector('.erweima');
        //以往得到box节点
        var box = document.querySelector('box');
        console.log(erweima.parentNode);  //通过erweima的父节点得到box节点 
    </script>

得到的是离元素最近的父节点（就近原则），如果找不到父节点，就返回为空（null）

子节点 childNodes

以此为例：

    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>

1. 方法一：

element.childNodes :这样得到的是所有的子节点，包括元素节点、文本节点等
如果只想要获得里面的元素节点，还需要做出一些处理ul.childNodes[i].nodeType == 1
元素节点 nodeType 为 1、属性节点 nodeType 为 2、文本节点 nodeType 为 3

    //2.子节点
     var ul = document.querySelector("ul");
     console.log(ul.childNodes); //这样得到的是所有的子节点，包括 元素节点、文本节点等
     //如果只想要获得里面的元素节点，

最低0.47元/天解锁文章

杨蛋蛋~R

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
节点操作（增加） /案例：下拉菜单/案例：简单版发布留言

节点操作因为利用DOM提供的方法获取元素逻辑性不强且非常繁琐因此学习利用节点层级关系获取元素：利用父子兄的关系获取元素逻辑性强，但兼容性差节点：页面中所有的内容都是节点（标签，属性，文本，注释等），在DOM中，节点使用node来获取HTML DOM树中的所有节点都可以通过JS来访问，所有HTML元素都可以被修改，也可以创建或者删除节点至少有：nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）这三个基本属性元素节点 nodeType 为 1属性节点
复制链接

扫一扫