/**
* 如何优雅的迭代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是否为或包含另一个HTMLElement。 这是一个CommonJS的克隆 。 var contains = require ( 'dom-contains' ) ; 包含(元素,针) 返回一个布尔值。 element是否为needle或包含needle 。 元素 ...
* 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类...
连续操作HTMLElement对象图文解决方法.docx
本节主要介绍了将HTML格式的String转化为HTMLElement的实现方法,需要的朋友可以参考下
Object.prototype.***不能用作在HTMLElement对象上,如本后面的抓图所示。
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' ; ...
上下文元素 context-element是一个HTMLElement,可以轻松在html页面中呈现数据或数组。...因为上下文元素是本机HTMLElement。 因为著名的UI框架削减了带宽预算。 因为它不使用虚拟dom,所以内存使用非常有效。
htmlelement.polyfills 用于HTMLElement接口的轻量级香草JavaScript polyfills htmlelement.polyfills库为上一些最常用的DOM交互提供了轻量级的香草JavaScript polyfills。 用法: 安装htmlelement.polyfills包 ...
克隆元素 使用样式克隆HTML元素。 安装 npm i -save clone-element 用法 import cloneElement from 'clone-element' document . body . appendChild ( cloneElement ( document . querySelector ( 'h1' ) ) 特点和...
JavaScript中提供获取HTML元素位置的属性: HTMLElement.offsetLeft HTMLElement.offsetHeight 但 是需要注意的是,这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其父元素位置的相对...
dom-paste 在paste事件中检索剪贴板内容作为HTMLElement 。用法domPaste(event, callback) var domPaste = ...实施细则创建一个临时的 contenteditable 元素,并将输入焦点转移到它。 MutationObserver用于检测临时元
自定义元素样式 创建自定义元素后,自动将样式注入到它的 Shadow DOM ... create ( HTMLElement . prototype )}styles ( CustomElement , ` h1 { color: red; text-transform: uppercase; }` )CustomElement . prototyp
create-element.js 创建HTML元素的一种简单方法。 您不再需要像下面这样写。 const div = document . createElement ( 'div' ) ;div . id = 'divDemo' ;div . classList . add ( 'my-class' ) ;div . innerText = '...