遍历DOM树

 第一个函数: 给我根节点, 我会找到所有的子节点: forDOM(根节点)
 获取这个根节点的子节点
 var children=根节点的.children
 调用第二个函数
 第二个函数: 给我所有的子节点, 我把每个子节点的名字显示出来(children)
 for(var i=0;i<children.length;i++){
   每个子节点
   var child=children[i];
   f1(child); 给我节点, 我显示该节点的名字
   child是子节点,但是如果child里面还有子节点,此时child就是爹了
   child.children&&第一个函数(child)
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>遍历DOM树</title>

</head>

<body>

<h1>遍历 DOM 树</h1>

<p style="color: green;">Tip: 可以在遍历的回调函数中任意定制需求</p>

<div>

  <ul>

    <li>123</li>

    <li>456</li>

    <li>789</li>

  </ul>

  <div>

    <div>

      <span>haha</span>

    </div>

  </div>

</div>

<div id="demo_node">

  <ul>

    <li>123</li>

  </ul>

  <p>hello</p>

  <h2>world</h2>

  <div>

    <p>dsa</p>

    <h3>

      <span>dsads</span>

    </h3>

  </div>

</div>

<script>

  //获取页面中的根节点--根标签

  var root=document.documentElement;//html

  //函数遍历DOM树

  //根据根节点,调用fn的函数,显示的是根节点的名字

  function forDOM(root1) {

    //调用f1,显示的是节点的名字

   // f1(root1);

    //获取根节点中所有的子节点

    var children=root1.children;

    //调用遍历所有子节点的函数

    forChildren(children);

  }

  //给我所有的子节点,我把这个子节点中的所有的子节点显示出来

  function forChildren(children) {

    //遍历所有的子节点

    for(var i=0;i<children.length;i++){

      //每个子节点

      var child=children[i];

      //显示每个子节点的名字

      f1(child);

      //判断child下面有没有子节点,如果还有子节点,那么就继续的遍历

      child.children&&forDOM(child);

    }

  }

  //函数调用,传入根节点

  forDOM(root);

  function f1(node) {

    console.log("节点的名字:"+node.nodeName);

  }

  //节点:nodeName,nodeType,nodeValue

</script>

</body>

</html>

JS高级---遍历DOM树的更多相关文章

  1. 先序遍历DOM树的5种方法

    DOM树由文档中的所有节点(元素节点.文本节点.注释节点等)所构成的一个树结构,DOM树的解析和构建是浏览器要实现的关键功能.既然DOM树是一个树结构,那么我们就可以使用遍历树结构的相关方法来对DOM ...

  2. 函数遍历DOM树

    //获取页面中的根节点--根标签   var root=document.documentElement;//html   //函数遍历DOM树   //根据根节点,调用fn的函数,显示的是根节点的名 ...

  3. jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别

    http://www.poluoluo.com/jzxy/201312/253059.html 在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的AP ...

  4. 拷贝和遍历DOM树

    一.浅拷贝: 拷贝就是复制,就相当于把一个对象中的所有内容,复制一份给另一个对象,直接复制, 或者说,就是把一个对象的地址给了另外一个对象,他们的指向相同,两个对象之间有相同的属性或者方法,都可以使用 ...

  5. 遍历DOM树

    遍历DOM在jQuery中是非常重要的技术. 遍历DOM之前,需要对DOM有清晰的认识,了解文档节点.元素节点.属性节点.文本节点等相关概念.不清楚可以温习下<JavaScript教程.DOM树 ...

  6. JS高级-虚拟DOM

    virtual dom 虚拟DOM是Vue和React的核心 用JS模拟DOM结构 DOM变化的相比,放在JS层来做 遇到问题 DOM操作是“昂贵”的,js运行效率高 尽量减少DOM操作,而不是“推到 ...

  7. 遍历DOM树，each()遍历

    在<jQuery教程/理解选取更新范围>一节中,我们知道:当选择器返回了多个元素时,可以使用一个方法来更新所有的元素,不再需要使用循环. 然后有的时候需要遍历元素,怎么办? 使用each( ...

  8. 遍历DOM树，理解更新范围

    在JavaScript中,如果需求对多个元素重复进行同样的操作,就需要写一个循环来遍历选中的所有元素. 在jQuery中,当选择器返回了多个元素时,可以使用一个方法来更新所有的元素,不再需要使用循环. ...

  9. JavaScript 算法应用: 遍历DOM树的两种方式

    1 常见的DOM树结构: 2  DOM数遍历有两种方式: 3 广度优先代码: 4 深度优先遍历代码

随机推荐

  1. Android中动态改变Listview中字体的颜色

    效果如下: 账目显示用的是Listview,要实现的功能为使其根据所在Item是“收入”还是“支出”来把数字设置成绿色或红色 方法是自定义适配器,并重写其中getView()函数,实现如下: //自定 ...

  2. 洛谷P3719 [AHOI2017初中组]rexp

    洛谷P3719 [AHOI2017初中组]rexp 题目背景 以下为不影响题意的简化版题目. 题目描述 给出一个由(,),|,a组成的序列,求化简后有多少个a. 化简规则: 1.形如aa...a|aa ...

  3. 在NBA我需要翻译 适配器模式

    17.1 在NBA我需要翻译! 17.2 适配器模式 Adapter,将一个类的接口转换成客户希望的另外一个接口,Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作, 有些国家 ...

  4. window10 cmd 常见命令

    AT 计划在计算机上运行的命令和程序. ATTRIB 显示或更改文件属性. BREAK 设置或清除扩展式 CTRL+C 检查. CACLS 显示或修改文件的访问控制列表(ACLs). CALL 从另一 ...

  5. Badusb 简易制作

    Badusb easy_make 0x00 basic knowledge and equip arduino IDE download address: https://www.arduino.cc ...

  6. Gird(2)

    目录 grid 布局(2) grid区域属性 网格线名称 grid-template-areas 属性 grid-auto-flow 容器内子元素的属性 grid 布局(2) grid区域属性 网格线 ...

  7. windows使用proxifier全局代理 - 配置可用; windows10 配置全局代理 走 socks5

    最近windows上需要配置全局代理 走 socks5,发现同类型的有 cow pcap 等解决方案,通过尝试发现还是proxifier 比较好用! 下载:https://www.proxifier. ...

  8. 剑指offer-面试题35-复杂链表的复制-链表

    /* 题目: 实现一个函数,复制复杂链表,返回复制链表的头节点. */ /* 思路: 第一步,复制一个链表S‘,插在原链表S中. 第二步,链表S’复制链表S的random指针. 第三步:拆分链表S和S ...

  9. 将CGCS2000的坐标值转换为WGS84的坐标值

    打开图层数据,或者将已有的Excel数据导入到ArcMap中,然后打开Toolbox, ArcToolbox -->  Projections and Transformations --> ...

  10. javaweb 使用页面模板CSS或者Js修改失效的解决办法（Tomcat缓存问题）

    原因是:浏览器的自动缓存机制导致的. 浏览器会自动缓存静态文件以加快访问速度,但是这导致了他不会再从服务器端接收静态文档了,这就导致我在idea里面改的css和js文档,浏览器根本没下载下来. 所以解 ...