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 深度优先遍历代码
随机推荐
- #《H.264和MPEG-4视频压缩》# 二. 图像质量
为了规范.评价.比较不同的视频通信系统,我们需要建立评价图像质量的准则.视觉效果的测量非常困难,而且并不精确,因为影响结果的因素众多.图像质量的认定是一个主观化的东西,许多影响它的因素都难以给出完整而 ...
- 一套很有意思的C语言测试题目
网络上逛博客,发现了一套很有意思的测试题目: https://kobes.ca/ 大家有兴趣可以做一下,考一些关于C语言使用的细节: 中文翻译参考: https://www.cnblogs.com/l ...
- （一）LoadRunner安装
1.下载LR,双击exe安装程序,选择LoadRunner完整安装程序,如下图: 2.点击下一步 3.选择我同意,下一步 4.输入姓名和组织(可以不输入),下一步 5.点击浏览选择要安装的目录,建议使 ...
- MRAM技术进入汽车应用
在整个地址空间范围内读写各种类型的数据.通常MRAM的操作和时序类似于32位微控制器的规范和时序.与DLFASH相比,当今的非易失性存储器可以接受MRAM设备的性能和吞吐量. 与当今的DFLASH相比 ...
- 卸载软件后，win10应用与功能中仍有残留，解决方案。
这个问题我已经找到解决办法了,首先打开“应用和功能”列表, 然后往下拉看到“相关设置”打开其中的“程序和功能”一项, 然后找出你想删除的应用进行卸载.
- 从 0 使用 SpringBoot MyBatis MySQL Redis Elasticsearch打造企业级 RESTful API 项目实战
大家好!这是一门付费视频课程.新课优惠价 699 元,折合每小时 9 元左右,需要朋友的联系爱学啊客服 QQ:3469271680:我们每课程是明码标价的,因为如果售价为现在的 2 倍,然后打 5 折 ...
- Spark学习之路 （十七）Spark分区[转]
分区的概念 分区是RDD内部并行计算的一个计算单元,RDD的数据集在逻辑上被划分为多个分片,每一个分片称为分区,分区的格式决定了并行计算的粒度,而每个分区的数值计算都是在一个任务中进行的,因此任务的个 ...
- (办公)记事本_grep文本搜索命令
参考谷粒学院的linux视频教程:http://www.gulixueyuan.com/course/300/task/7091/show grep文本搜索命令:[是一种强大的文本搜索工具,它能使用正 ...
- dsu on tree[树上启发式合并学习笔记]
dsu on tree 本质上是一个 启发式合并 复杂度 \(O(n\log n)\) 不支持修改 只能支持子树统计 不能支持链上统计- 先跑一遍树剖的dfs1 搞出来轻重儿子- 求每个节点的子树上有 ...
- Java数列循环左移
描述 有n个整数组成一个数组(数列).现使数列中各数顺序依次向左移动k个位置,移出的数再从尾部移入.输出移动后的数列元素. 题目没有告诉你n的范围,要求不要提前定义数组的大小. 另外要求定义并使用函数 ...