遍历整个dom节点，理解判断节点类型

最新推荐文章于 2022-10-06 19:44:31 发布

~嘘~禁止想象~

最新推荐文章于 2022-10-06 19:44:31 发布

阅读量303

点赞数 1

分类专栏：前端 # JavaScript知识点文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/weixin_45773503/article/details/121190120

版权

前端同时被 2 个专栏收录

150 篇文章 5 订阅

订阅专栏

JavaScript知识点

36 篇文章 0 订阅

订阅专栏

dom实际上就是一颗数：如何去遍历一棵树，递归一定是我们最先想到的方法。

假设我们现在要拿到document中所有的节点，我们应该怎么去做，我们应该从document开始，向下找，将document的孩子节点一个个遍历，如果他的孩子中还有孩子节点，那么我们去递归。

我随便构建了一个html的结构，如下：

<!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>
  <header>
    <p></p>
  </header>
  
  <nav>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </nav>
  
  <div>
    <aside></aside>
    <section>
      <div></div>
    </section>
  </div>
  
  <footer></footer>
</body>
</html>

将刚才的思想用代码表示出来：

  function eachNode(ele) {
    var list = []; //用来后面储存获取的元素
    
    function getHDeles(ele) { //ele是形参,代表要打印哪个dom树
      var children = ele.children; //获取ele下的子元素
      for (var i = 0; i < children.length; i++) { //遍历children
        var child = children[i] //children每一个子代存起来
        list.push(child) //每一个子代存入数组当中
        getHDeles(child); //子代也要求子代,继续调用这个函数
      }
    }
    getHDeles(document)
    
    return list
  }

当然我们要实现的东西已经完成了，接下来是一些容易遗忘的知识点。

1. 如何获取特殊的节点，这个一直忘记：

获取document：不用获取，直接拿来用就好了，document.什么什么
获取html：console.log(document.documentElement)
获取body：console.log(document.body)

2. 如何获取元素的孩子节点

ele.children，这个可以直接获取到所有的元素节点。民间的方法，非正规，但是好用
ele.childNodes，获取所有的节点，文本节点（3），属性节点（2），元素节点（1）（nodeType）

3. 属性节点

  <header class="123" name="jon" age="18"></header>

比如说这个header，他的属性节点就是

1. class="123" 
2. name="jon" 
3. age="18"

在这里插入图片描述

4. 通过 ele.childNodes 进行元素节点的筛选实现 ele.children

  function eachNode(ele) {
    var list = []; //用来后面储存获取的元素
    
    function getHDeles(ele) { //ele是形参,代表要打印哪个dom树
      var children = ele.childNodes; //获取ele下的子元素
      for (var i = 0; i < children.length; i++) { //遍历children
        if (children[i].nodeType === 1) {
          list.push(children[i]) //每一个子代存入数组当中
          getHDeles(children[i]);
        }
      }
    }
    getHDeles(ele)
    
    return list
  }

5. 统计页面中有哪些节点（做个题），将其tagName放到数组中

利用上面的遍历节点的方法
去重

  let arr = new Set()
  eachNode(document).map((item) => {
    arr.add(item.tagName)
  })
  console.log(arr);

~嘘~禁止想象~

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
遍历整个dom节点，理解判断节点类型

dom实际上就是一颗数：如何去遍历一棵树，递归一定是我们最先想到的方法。假设我们现在要拿到document中所有的节点，我们应该怎么去做，我们应该从document开始，向下找，将document的孩子节点一个个遍历，如果他的孩子中还有孩子节点，那么我们去递归。我随便构建了一个html的结构，如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta htt
复制链接

扫一扫

专栏目录