JS高级---遍历DOM树
遍历DOM树
<!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树的更多相关文章
- 先序遍历DOM树的5种方法
DOM树由文档中的所有节点(元素节点.文本节点.注释节点等)所构成的一个树结构,DOM树的解析和构建是浏览器要实现的关键功能.既然DOM树是一个树结构,那么我们就可以使用遍历树结构的相关方法来对DOM ...
- 函数遍历DOM树
//获取页面中的根节点--根标签 var root=document.documentElement;//html //函数遍历DOM树 //根据根节点,调用fn的函数,显示的是根节点的名 ...
- jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
http://www.poluoluo.com/jzxy/201312/253059.html 在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的AP ...
- 拷贝和遍历DOM树
一.浅拷贝: 拷贝就是复制,就相当于把一个对象中的所有内容,复制一份给另一个对象,直接复制, 或者说,就是把一个对象的地址给了另外一个对象,他们的指向相同,两个对象之间有相同的属性或者方法,都可以使用 ...
- 遍历DOM树
遍历DOM在jQuery中是非常重要的技术. 遍历DOM之前,需要对DOM有清晰的认识,了解文档节点.元素节点.属性节点.文本节点等相关概念.不清楚可以温习下<JavaScript教程.DOM树 ...
- JS高级-虚拟DOM
virtual dom 虚拟DOM是Vue和React的核心 用JS模拟DOM结构 DOM变化的相比,放在JS层来做 遇到问题 DOM操作是“昂贵”的,js运行效率高 尽量减少DOM操作,而不是“推到 ...
- 遍历DOM树，each()遍历
在<jQuery教程/理解选取更新范围>一节中,我们知道:当选择器返回了多个元素时,可以使用一个方法来更新所有的元素,不再需要使用循环. 然后有的时候需要遍历元素,怎么办? 使用each( ...
- 遍历DOM树，理解更新范围
在JavaScript中,如果需求对多个元素重复进行同样的操作,就需要写一个循环来遍历选中的所有元素. 在jQuery中,当选择器返回了多个元素时,可以使用一个方法来更新所有的元素,不再需要使用循环. ...
- JavaScript 算法应用: 遍历DOM树的两种方式
1 常见的DOM树结构: 2 DOM数遍历有两种方式: 3 广度优先代码: 4 深度优先遍历代码
随机推荐
- Dijkstra算法 1
// Dijkstra算法,适用于没有负边的情况 // 注意:是没有负边,不是没有负环 // 在这一条件下,可以将算法进行优化 // 从O(v*E)的复杂度,到O(V^2)或者是O(E*log(V)) ...
- web自动化之三大等待
这个假期有些长,长到忘记了要学习,要找工作,好吧,在我每天无休止的追着偶像剧时,我确实没有负罪感,在听了小祥大佬的分享后,我连睡午觉都被吓醒.大佬跟我同一个班,在大厂工作,每天还抽时间学习,作业也没落 ...
- Null项目参与排序
1.item1升序,item2升序,item3(存在NULL项目,NULL项目排在后面)升序 Collections.sort(list, Comparator.comparing(Bean::g ...
- 如何知道一个路由器的 BSSID ？
使用 Mac 连接上这个路由器,然后使用 option 按 wifi 按钮,可以在详情页里找到. 有些路由中继的设置需要使用 BSSID ,比如 pandorabox openwrt
- 小程序上拉触底&下拉加载
data: { pageNo: 1,//当前页 pageSize: 10,//每页条数 count:'',//总条数 orderList: [], }, onLoad: function () { v ...
- Dart中类的getter和setter
Dart类Getters和Setter Getters和Setter(也称为访问器和更改器)允许程序分别初始化和检索类字段的值. 使用get关键字定义getter或访问器.Setter或存取器是使用s ...
- H5测试方法
一 功能测试 1 关注页面请求:请求数据是否正确,相应是否正确,是否有重复请求,造成流量浪费,响应速度变慢 2 关注application cache:cokkie值是否正确,清除cokkie后表现是 ...
- 第7章.字符串、String类和StringBuilder类
参考链接: https://www.runoob.com/csharp/csharp-string.html https://www.cnblogs.com/cang12138/p/7323709.h ...
- Docker 下部署hadoop集群
一.主机规划 3台主机:1个master.2个slaver/worker ip地址使用docker默认的分配地址: master: 主机名: hadoop2.ip地址: 172.17.0.2 slav ...
- React函数式组件使用Ref
目录: 简介 useRef forwardRef useImperativeHandle 回调Ref 简介 大家都知道React中的ref属性可以帮助我们获取子组件的实例或者Dom对象,进而对子组件进 ...