javascript：dom2的NodeIterator

最新推荐文章于 2024-07-08 08:33:09 发布
最新推荐文章于 2024-07-08 08:33:09 发布
阅读量213 收藏
点赞数
文章标签： javascript NodeIterator
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HUSHILIN001/article/details/80223083
版权

资料来源：javascript高级程序设计第三版

首先，别想太多，这个是dom2的操作，跟node没有太大的关系，其次

之前看到一片博客说这个兄弟遍历起来比较慢，我也不太清楚，所以希望大家是慎用。

简单来说，NodeIterator就是一个遍历器，解释也不多，就四个参数


先上代码吧：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div class="div1">
			<div class="div2"></div>
			<span class="span2"></span>
		</div>
	</body>
	<script>
		var root = document.querySelector(".div1");
		var iterator = document.createNodeIterator(root, NodeFilter.SHOW_ELEMENT, null, false);
		var node = iterator.nextNode();
		while(node) {
			console.log(node);
			node = iterator.nextNode();
		}
	</script>

</html>

第一个参数：root，就是我们要操作的节点，

第二个的话是选择我们的类别，枚举：


（方便点，我的代码就依第一个来操作的，注意最后两行）

第三个的话是一个过滤器，


在我那份代码的基础上改动的话。是这样的：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div class="div1">
			<div class="div2"></div>
			<span class="span2"></span>
		</div>
	</body>
	<script>
		var myfilter = function(node) {
			console.log("aaa");
		}
		var root = document.querySelector(".div1");
		var iterator = document.createNodeIterator(root, NodeFilter.SHOW_ELEMENT, function(mynode) {
			if(mynode.className == "div2") {
				console.log("发现了一个class是div2的dom元素")
			} else {
				console.log("改元素不是class是div2的dom元素")

			}

		}, false);
		var node = iterator.nextNode();
		while(node) {

			node = iterator.nextNode();
		}
	</script>

</html>

最后的一个：

不知道啥情况使用它。。。求告知。。。


mkmin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
定时关闭广告2020/11/24
weixin_50286102的博客
11-24 470
setTimeout(function() { ad.style.display = ‘none’ }, 2000) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=
DOM结构深度优先遍历（一）：NodeIterator
个人前端记录
07-04 1686
NodeIterator和TreeWalker能够基于给定的起点对DOM结构进行深度优先（depth-first）的遍历操作。 IE不支持DOM遍历。 可以使用下面代码检测浏览器DOM2级遍历能力的支持： var supportTraversala = document.implementation.hasFeature(&quot;Traversal&quot;,&quot;2.0&quot;); var supportNode...
createNodeIterator使用+元素替换
qq_46344419的博客
08-08 139
createNodeIterator使用+元素替换
js DOM createNodeIterator()和createTreeWalker()
wyw223的博客
01-23 835
1.document.createNodeIterator() document.createNodeIterator方法返回一个子节点遍历器。 var nodeIterator = document.createNodeIterator( document.body, NodeFilter.SHOW_ELEMENT ); 上面代码返回元素子节点的遍历器。 document.create...
javascript学习笔记——操作样式表、元素大小、客户区大小、滚动大小、NodeIterator、TreeWalker、DOM范围
ass_ace
08-07 288
 1.访问元素的样式 任何支持sytle特性的html元素在js中都有一个对应的style属性。style对象包含着通过HTML的style特性指定的所有样式信息，但不包括与外部样式表或嵌入样式表经层叠而来的样式； css属性将表现为这个style对象的相应属性； var myDir=document.getElementById("myDir"); //设置背景颜色 myDir.st...
UIcourse_lecture9:DOM遍历
06-21
2. 使用`NodeIterator`和`TreeWalker`: 这两个接口提供了一种更高效的方式遍历DOM，可以根据需求过滤节点。 3. 考虑使用`requestAnimationFrame`: 当遍历DOM涉及视觉更改时，使用`requestAnimationFrame`以保证更新...
经典之作javascript dom编程艺术源码
12-02
JavaScript DOM编程艺术是一本深入解析DOM操作的经典书籍，它的源码提供了丰富的实例，帮助开发者深入理解如何使用原生JavaScript高效地操纵网页元素。DOM（Document Object Model）是HTML和XML文档的标准表示，它将...
JavaScript-DOM
03-09
2. **属性节点**：元素的属性，如`class`、`id`等，在DOM中表现为属性节点，可以通过`.getAttribute`和`.setAttribute`来读取和修改属性值。 3. **文本节点**：元素内的文本内容，可以使用`.textContent`属性获取或...
checkpoint-DOM:检查点DOM
03-06
2. **序列化DOM**：捕获到的DOM状态需要被转化为可以存储和恢复的格式，通常是JSON或其他序列化形式。这样可以方便地保存在内存中或持久化到磁盘。 3. **保存检查点**：将序列化的DOM状态存储在一个安全的地方，...
JavaScriptDOM高级程序设计
02-26
此外，DOM还提供了许多其他高级特性，如DOM遍历和范围（Traversal and Range）、DOM2级样式（CSS样式操作）、以及DOM3级事件。DOM遍历API（如`NodeIterator`和`TreeWalker`）帮助我们更有效地搜索和处理DOM树。DOM3...
js 简单实现 NodeIterator 接口
0day
06-17 151
js 简单实现 NodeIterator 接口
JS Iterator（迭代器）
我本可以
12-07 9158
任何数据结构只要部署 Iterator 接口，就可以完成遍历操作，即依次处理该数据结构的所有成员。 遍历器对象本质上，就是一个指针对象。指针对象的next方法，用来移动指针。 next方法返回一个对象，表示当前数据成员的信息。这个对象具有value和done两个属性，value属性返回当前位置的成员，done属性是一个布尔值，表示遍历是否结束，即是否还有必要再一次调用next方法。对于遍历器对象来说，done: false和value: undefined属性都是可以省略的。
说说 JavaScript 在 DOM2 级标准中定义的遍历规则
读万卷书，行万里路
05-25 732
DOM2 级标准定义了两个用于完成顺序遍历 DOM 结构的类型：NodeIterator 和 TreeWalker。它们都能够基于给定的起点对 DOM 结构进行深度优先遍历。与 DOM 兼容的浏览器（Firefox 1+、Safari 1.3+、Opera 7.6+、Chrome 0.2+）都支持这两个类型。IE 不支持！以下代码可以检测浏览器是否支持 DOM2 级遍历： var supp
JavaScript 中 Iterator（遍历器）的概念
_
01-27 747
原文地址：https://es6.ruanyifeng.com/#docs/iterator JavaScript 原有的表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6 又添加了Map和Set。这样就有了四种数据集合，用户还可以组合使用它们，定义自己的数据结构，比如数组的成员是Map，Map的成员是对象。这样就需要一种统一的接口机制，来处理所有不同的数据结构。 遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只
DOM2级遍历和范围----NodeIterator
weixin_30553777的博客
08-05 95
可以用document对象的createNodeIterator()方法来创建NodeIterator对象，基本形式如下：var iterator=document.createNodeIterator(root,whatToShow,filter,entityReferanceExpansion); 用到的四个参数的意义如下： root: 从树的哪个节点开始搜索whatToShow: 一个数...
基于springboot+vue+uniapp的贵工程寝室快修小程序
最新发布
老卓爱爪哇 的博客
07-08 953
贵工程寝室快修小程序使用Java语言进行编码，使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务，其管理贵工程寝室快修小程序信息，查看贵工程寝室快修小程序信息，管理贵工程寝室快修小程序。 总之，贵工程寝室快修小程序集中管理信息，有着保密性强，效率高，存储空间大，成本低等诸多优点。它可以降低信息管理成本，实现信息管理计算机化。
ES6 新特性有哪些
weixin_64684095的博客
07-06 1270
1. 拥有块级作用域，这意味着在 if 语句、for 循环、while 循环等代码块中声明的 let 变量，只在该代码块内有效。2. 不允许在同一作用域内重复声明同一个变量1. 也具有块级作用域。2. 声明时必须进行初始化赋值，且赋值后不能再重新赋值修改其值。3. 如果 const 声明的是一个对象或数组，虽然不能重新赋值整个对象或数组，但可以修改对象的属性值或数组的元素值。
dom4j中的设计模式
05-23
3. 迭代器模式：使用XPath表达式查询文档中的节点时，返回的是一个NodeIterator对象，可以通过迭代器模式遍历节点。 4. 适配器模式：使用Reader对XML文档进行解析时，需要将流式数据转换为字符流，这就需要使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值