`
goodscript
  • 浏览: 73041 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

如何优雅的迭代htmlElement元素

 
阅读更多

/**
 * 如何优雅的迭代htmlElement元素
 * 应用场景:
 * 查找element元素下符合条件的子元素、或者子元素的子元素
 * 用法:NodesIterator.traverse(ele, procss);
 * 	   返回结果保存在 NodesIterator.target
 */
var NodesIterator = (function() {
	var ths, target, callback = function(node, util) {
		if (util(node)) {
			ths.breakFlag = true;
			ths.target = node;
		}
	}, processElement = function(element, util) {
		if (element) {
			if (element.hasChildNodes()) {
				processElements(element.childNodes, util);
			}
			callback.call(this, element, util);
		}
	}, processElements = function(elements, util) {
		for (var i = 0, len = elements.length;i < len; i++) {
			if (ths.breakFlag)
				break;
			processElement(elements[i], util);
		}
	}, traverse = function(_root, util) {
		this.root = _root;
		this.breakFlag = false;
		this.target = null;
		ths = this;
		processElement(_root, util);
	}
	return {
		traverse : traverse,
		target : target
	}
}());


example:
var getX = function() {
	// 回调函数 默认传入一个node节点 当返回true的话说明该节点就是所有查找的节点
	var procss = function(node) {
		if (node.nodeName === "U")
			return true;
	};
	var pre = document.getElementsByTagName("pre")[0];
	NodesIterator.traverse(pre, procss);
	console.log(NodesIterator.target);
	return NodesIterator.target;
}



demo见附件
分享到:
评论

相关推荐

    如何判断元素是否为HTMLElement元素

    HTMLElement是HTML元素的基类,表示所有HTML元素的抽象基类。为了确定一个对象是否属于这个类型,我们通常会检查其`nodeType`属性。在DOM规范中,元素节点的`nodeType`值为1,因此,`nodeType == 1`成为了一个常见的...

    dom-contains:确定一个HTMLElement是否为或包含另一个HTMLElement

    确定一个HTMLElement是否为或包含另一个HTMLElement。 这是一个CommonJS的克隆 。 var contains = require ( 'dom-contains' ) ; 包含(元素,针) 返回一个布尔值。 element是否为needle或包含needle 。 元素 ...

    连续操作HTMLElement对象图文解决方法.docx

    在网页开发中,HTMLElement对象是DOM(文档对象模型)的一部分,它代表了HTML元素。当你需要对HTML元素进行连续操作,比如改变样式、添加事件监听器或者修改内容时,了解如何正确地操作HTMLElement对象至关重要。...

    连续操作HTMLElement对象图文解决方法

    在实际编程中,我们经常需要对`HTMLElement`对象进行一系列的操作,例如添加子元素、设置属性、修改样式等。然而,有些开发者可能尝试在`HTMLElement`对象上使用`Object.prototype`上的方法,却发现这些方法不起作用...

    将HTML格式的String转化为HTMLElement的实现方法

    然后,通过设置`el.innerHTML`属性,我们可以将HTML字符串赋值给这个元素,从而将其转化为包含HTML结构的HTMLElement。 ```javascript el.innerHTML = '&lt;html&gt;...&lt;/html&gt;'; ``` 在这个过程中,`innerHTML`属性将...

    所有关于HTML自定义元素

    在JavaScript开发中,自定义元素是通过结合使用`document.registerElement()`(旧方法)或`class extends HTMLElement`(现代方法)来创建的。 自定义元素的核心在于它的定义方式。在旧的实现中,我们使用`document...

    react-使用自定义元素将React组件挂载到DOM

    在JavaScript中,我们可以利用`class extends HTMLElement`来定义一个自定义元素,然后通过`customElements.define()`方法注册这个元素,使其成为浏览器可识别的组件。 要将React组件挂载到自定义元素上,我们需要...

    WindrunnerMax#EveryDay#HTMLElement对象1

    * HTMLElement.offsetLeft: 只读,返回一个double值,即从此元素的左边界到offsetParent的左边界的距离。* HTMLEle

    shadow:Shadow是从HTMLElement继承的Web组件和自定义元素的基类

    Shadow是从HTMLElement继承的Web组件和自定义元素的基类。 快速开始 编译example/my_example.ts : deno bundle --config example/tsconfig.json example/my_example.ts &gt; example/my_example.js 服务index.html...

    dom-max-size:确定HTMLElement的最大可伸缩尺寸

    确定HTMLElement的最大可伸缩尺寸。 该库的工作方式在目标元素之前添加一个较大,并强制进行。 因此,不支持,因为它们永远不能包含该子。 另外,由于没有渲染光树,因此不自动支持具有shadowRoot元素,但是有一种...

    babel-plugin-transform-custom-element-classes, 编译 ES6 HTMLElement类扩展到 ES5.zip

    babel-plugin-transform-custom-element-classes, 编译 ES6 HTMLElement类扩展到 ES5 babel-plugin-transform-custom-element-classes编译扩展了ES5环境的HTMLElement的自定义元素类。问题自定义元素是针对原生ES6类...

    网页元素查看

    Dim element As HtmlElement = WebBrowser1.Document.getElementById("elementId") ``` 一旦有了元素引用,就可以进行一系列操作,如读取或修改属性值、触发事件或获取元素内容。例如,获取元素文本内容: ```vb ...

    用于创建自定义元素的Boilerplate

    2. **扩展HTMLElement:** 自定义元素的类通常会扩展`HTMLElement`,这样可以继承所有内置元素的特性,并且可以添加自定义的行为。 3. **生命周期回调:** 自定义元素有多个生命周期回调函数,如`connectedCallback...

    [网络]WebBrowser网页操作(提取元素,自动填表)

    本知识点聚焦于C#中如何利用`WebBrowser`控件进行网页操作,包括元素提取和自动填表。`WebBrowser`控件允许开发者在应用程序内部嵌入一个浏览器引擎,使得与网页的交互变得可能。 首先,我们要理解`WebBrowser`控件...

    Sortable前端框架

    setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) { dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent }, // Element is ...

    is-dom-element2:确定对象是否为HTMLElement(来自任何领域)

    属元素 确定对象是否为HTMLElement (来自任何Realm )。 安装 &gt;= 10 。 要安装,请在命令行中输入以下命令: npm install is-dom-element 输入 ES模块: import isDOMElement from 'is-dom-element' ; ...

    HTML5 元素通用DOM接口

    `HTMLElement`接口继承自`Element`接口,并且为所有HTML元素提供了一组通用的行为。这包括对DOM树的操作、动态插入标记、元数据属性等。 #### DOM树访问器 - **`getElementsByClassName(in DOMString classNames)`...

    regularElements将任何节点或通过CSS选择器选中的节点作为自定义元素

    自定义元素的核心是`class extends HTMLElement`,通过继承自`HTMLElement`,我们可以创建一个新的类,该类具有与常规HTML元素相同的基本属性和方法,但可以根据需求添加额外的功能。 `regularElements`库则简化了...

Global site tag (gtag.js) - Google Analytics