<!-- NodeIterator -->
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>aaa</title>

</head>

<body>

<div id="app" class="a">

    <p class="b"><b class="c">hello</b>hello</p>

    <ul class="d">

        <li class="e">1</li>

        <li class="f">2</li>

        <li class="g">3</li>

        <li class="h">4</li>

    </ul>

</div>

</body>

</html>
    let app = document.getElementById('app');

    let app2 = document.createNodeIterator(app, NodeFilter.SHOW_ELEMENT, null, false);//显示元素节点(参数许多，可以改变)

    let node = app2.nextNode();

    while (node != null) {

        alert(node.className);

        node = app2.nextNode();

    }

2、TreeWalker    ( 和上面方法大致相似 )

可以在不同方向上遍历DOM结构

parentNode();  ==遍历到节点的父节点

fristChild();  ==遍历到节点的第一个子节点

lastChild(); ==遍历到当前节点的最后一个节点

nextSibling();  ==遍历到当前节点的同辈节点

previousSibling();  ==遍历到当前节点的上一个同辈节点

遍历HTML DOM 树的更多相关文章

  1. 函数遍历DOM树

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

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

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

  3. 遍历DOM树

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

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

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

  5. 拷贝和遍历DOM树

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

  6. JS高级---遍历DOM树

    遍历DOM树  第一个函数: 给我根节点, 我会找到所有的子节点: forDOM(根节点)  获取这个根节点的子节点  var children=根节点的.children  调用第二个函数  第二个 ...

  7. 通过Ztree生成页面html元素Dom树,以及拖拽改变元素的位置

    zTree 是一款依靠 jQuery 实现的多功能 "树插件",http://www.treejs.cn/v3/main.php#_zTreeInfo,功能强大,不多赘述. 下面我 ...

  8. 从Chrome源码看浏览器如何构建DOM树

    .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } p { font-size: 1 ...

  9. DOM树的增查改删总结

    DOM树的增查改删总结 摘要:对HTML DOM的操作是前端JavaScript编程时必备的技能,本文是我自己对DOM树操作的总结,主要是方法的罗列,原理性的讲述较少,适合大家用于理清思路或是温习 一 ...

随机推荐

  1. CMake--常用指令

    1 . ADD_DEFINITIONS 向 C/C++ 编译器添加 -D 定义,比如 在CMakeList.txt文件中添加: ADD_DEFINITIONS(-DENABLE_DEBUG -DABC ...

  2. v-show 与 v-if区别

    关于条件渲染 所谓条件渲染,就是根据不同的条件,使用不同的模板来生成 html. 在 Vue.js 中,使用 v-if 和 v-show 指令来控制条件渲染. 区别 v-show 会在app初始化的时 ...

  3. Django--cookie 和 session

    一 . 会话跟踪 简单来说就是如果谢霆锋登录了淘宝,然后他点击淘宝内的任何连接就不需要在登录了,这是由于这个会话中数据共享, 也就是会话跟踪, 我们都知道http协议是短连接 无状态的,也就是说你登录 ...

  4. 错误模块名称: KERNELBASE.dll

    部署win服务时,经常会出现类似下面的错误,错误模块名称: KERNELBASE.dll. 日志名称:          Application 来源:            Application ...

  5. LODOP打印控件进行批量打印

    Lodop打印控件批量打印的方式:1.批量打印每页内容相同的:(1)批量打印相同内容的很多纸张,可以设置打印份数,把该内容打印出多份.2.批量打印每页不同内容的:(1)通过在一个任务中分页,循环添加页 ...

  6. 跳转语句之continue

    js里面有两个跳转语句,一个是continue,一个是break.由于这两个跳转语句都是用于循环当中,因此他们也就只能用于while.for.do…while语句中,当然了,break多加一个swit ...

  7. MongoDB学习目录

    前面的话 为了能够使用NodeJS实现后端,MongoDB——这个NodeJS标配的数据库就不得不学.小火柴将MongoDB数据库的学习记录整理如下 基础 基础操作 数据类型 文档操作 索引 索引构建 ...

  8. 11.ingress服务

    kubernetes  的service服务我们提到过.service 可以用nodePort的方式和调用公有云LBAAS服务 来对于集群外的client提供服务访问,但是service是工作的osi ...

  9. codeforces496C

    Removing Columns CodeForces - 496C You are given an n × m rectangular table consisting of lower case ...

  10. Python中数字之间的进制转换

    Python中的数据转换 在python中可以通过内置方法进行相应的进制转换,但需记得转化成非十进制时,都会将数字转化成字符串 转化成二进制 a = 10 #声明数字,默认十进制 b = bin(a) ...