遍历HTML DOM 树
<!-- 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 树的更多相关文章
- 函数遍历DOM树
//获取页面中的根节点--根标签 var root=document.documentElement;//html //函数遍历DOM树 //根据根节点,调用fn的函数,显示的是根节点的名 ...
- 先序遍历DOM树的5种方法
DOM树由文档中的所有节点(元素节点.文本节点.注释节点等)所构成的一个树结构,DOM树的解析和构建是浏览器要实现的关键功能.既然DOM树是一个树结构,那么我们就可以使用遍历树结构的相关方法来对DOM ...
- 遍历DOM树
遍历DOM在jQuery中是非常重要的技术. 遍历DOM之前,需要对DOM有清晰的认识,了解文档节点.元素节点.属性节点.文本节点等相关概念.不清楚可以温习下<JavaScript教程.DOM树 ...
- jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
http://www.poluoluo.com/jzxy/201312/253059.html 在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的AP ...
- 拷贝和遍历DOM树
一.浅拷贝: 拷贝就是复制,就相当于把一个对象中的所有内容,复制一份给另一个对象,直接复制, 或者说,就是把一个对象的地址给了另外一个对象,他们的指向相同,两个对象之间有相同的属性或者方法,都可以使用 ...
- JS高级---遍历DOM树
遍历DOM树 第一个函数: 给我根节点, 我会找到所有的子节点: forDOM(根节点) 获取这个根节点的子节点 var children=根节点的.children 调用第二个函数 第二个 ...
- 通过Ztree生成页面html元素Dom树,以及拖拽改变元素的位置
zTree 是一款依靠 jQuery 实现的多功能 "树插件",http://www.treejs.cn/v3/main.php#_zTreeInfo,功能强大,不多赘述. 下面我 ...
- 从Chrome源码看浏览器如何构建DOM树
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } p { font-size: 1 ...
- DOM树的增查改删总结
DOM树的增查改删总结 摘要:对HTML DOM的操作是前端JavaScript编程时必备的技能,本文是我自己对DOM树操作的总结,主要是方法的罗列,原理性的讲述较少,适合大家用于理清思路或是温习 一 ...
随机推荐
- opencv自带fast_math.hpp
cvRound cvFloor cvCeil cvIsNaN cvIsInf
- 【学亮IT手记】Java 8新特性实例介绍
java8,也称为jdk1.8,于2014.03.18日发布,它支持函数式编程,新的js引擎,新的日期API,新的Stream Api等. 我们主要讨论以下几个新特性: ①Lambda表达式. 允许把 ...
- VUE 处理文本框获焦点高亮
先贴例子代码 这里又三个div对应的三个input输入框 <!-- 登录的表单 --> <div class="input_group" :class=&quo ...
- Redis五大数据类型
首先说明下,Redis是:单线程+多路IO复用技术!!! string set > key + zset list hash 常用的几个命令: >keys * 查 ...
- Linux基础学习（10）--Shell基础
第十章——Shell基础 一.Shell概述 1.Shell是什么: (1)Shell是一个命令行解释器,它为用户提供了一个向Linux内核发送请求以便运行程序的界面系统级程序,用户可以用Shell来 ...
- Linux中，去掉终端显示的当前目录的绝对路径
Linux中,去掉终端显示的当前目录的绝对路径 去~/.bashrc中,找到PS1变量的定义,如果没有,手动加上: 可以将显示输出到标题栏上: #export PS1="[e]2;u@H w ...
- web前端面試題
1.怎麼判斷一個一個變量的類型是string? typeof(obj)==="string" typeof obj==="string" obj.constru ...
- 洛谷 p1219 八皇后
刚参加完蓝桥杯 弱鸡错了好几道..回头一看确实不难 写起来还是挺慢的 于是开始了刷题的道路 蓝桥杯又名搜索杯 暴力杯...于是先从dfs刷起 八皇后是很经典的dfs问题 洛谷的这道题是这样的 上面的布 ...
- HTML——标签说明
基本 <html>…</html> 定义 HTML 文档 <head>…</head> 文档的信息 <meta> ...
- LodopFuncs.js和CLodopFuncs.js区别和联系
所在位置:LodopFuncs.js可以在官网下载中心综合版里下载到.CLodopfuncs.js在C-Lodop服务缓存中,C-Lodop启动的时候才能访问到. 需不需要下载放置到项目里:(客户端本 ...