/**
* 如何优雅的迭代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是HTML元素的基类,表示所有HTML元素的抽象基类。为了确定一个对象是否属于这个类型,我们通常会检查其`nodeType`属性。在DOM规范中,元素节点的`nodeType`值为1,因此,`nodeType == 1`成为了一个常见的...
确定一个HTMLElement是否为或包含另一个HTMLElement。 这是一个CommonJS的克隆 。 var contains = require ( 'dom-contains' ) ; 包含(元素,针) 返回一个布尔值。 element是否为needle或包含needle 。 元素 ...
在网页开发中,HTMLElement对象是DOM(文档对象模型)的一部分,它代表了HTML元素。当你需要对HTML元素进行连续操作,比如改变样式、添加事件监听器或者修改内容时,了解如何正确地操作HTMLElement对象至关重要。...
在实际编程中,我们经常需要对`HTMLElement`对象进行一系列的操作,例如添加子元素、设置属性、修改样式等。然而,有些开发者可能尝试在`HTMLElement`对象上使用`Object.prototype`上的方法,却发现这些方法不起作用...
然后,通过设置`el.innerHTML`属性,我们可以将HTML字符串赋值给这个元素,从而将其转化为包含HTML结构的HTMLElement。 ```javascript el.innerHTML = '<html>...</html>'; ``` 在这个过程中,`innerHTML`属性将...
在JavaScript开发中,自定义元素是通过结合使用`document.registerElement()`(旧方法)或`class extends HTMLElement`(现代方法)来创建的。 自定义元素的核心在于它的定义方式。在旧的实现中,我们使用`document...
在JavaScript中,我们可以利用`class extends HTMLElement`来定义一个自定义元素,然后通过`customElements.define()`方法注册这个元素,使其成为浏览器可识别的组件。 要将React组件挂载到自定义元素上,我们需要...
* HTMLElement.offsetLeft: 只读,返回一个double值,即从此元素的左边界到offsetParent的左边界的距离。* HTMLEle
Shadow是从HTMLElement继承的Web组件和自定义元素的基类。 快速开始 编译example/my_example.ts : deno bundle --config example/tsconfig.json example/my_example.ts > example/my_example.js 服务index.html...
确定HTMLElement的最大可伸缩尺寸。 该库的工作方式在目标元素之前添加一个较大,并强制进行。 因此,不支持,因为它们永远不能包含该子。 另外,由于没有渲染光树,因此不自动支持具有shadowRoot元素,但是有一种...
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 ...
2. **扩展HTMLElement:** 自定义元素的类通常会扩展`HTMLElement`,这样可以继承所有内置元素的特性,并且可以添加自定义的行为。 3. **生命周期回调:** 自定义元素有多个生命周期回调函数,如`connectedCallback...
本知识点聚焦于C#中如何利用`WebBrowser`控件进行网页操作,包括元素提取和自动填表。`WebBrowser`控件允许开发者在应用程序内部嵌入一个浏览器引擎,使得与网页的交互变得可能。 首先,我们要理解`WebBrowser`控件...
setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) { dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent }, // Element is ...
属元素 确定对象是否为HTMLElement (来自任何Realm )。 安装 >= 10 。 要安装,请在命令行中输入以下命令: npm install is-dom-element 输入 ES模块: import isDOMElement from 'is-dom-element' ; ...
`HTMLElement`接口继承自`Element`接口,并且为所有HTML元素提供了一组通用的行为。这包括对DOM树的操作、动态插入标记、元数据属性等。 #### DOM树访问器 - **`getElementsByClassName(in DOMString classNames)`...
自定义元素的核心是`class extends HTMLElement`,通过继承自`HTMLElement`,我们可以创建一个新的类,该类具有与常规HTML元素相同的基本属性和方法,但可以根据需求添加额外的功能。 `regularElements`库则简化了...