js node 节点 原生遍历 createNodeIterator

1、createIterator

msn:

https://developer.mozilla.org/en-US/docs/Web/API/Document/createNodeIterator

var filter = function(node){

return node.tagName.toLowerCase() == ‘p‘ ?
    NodeFilter.FILTER_ACCEPT:
    NodeFilter.FILTER_REJECT;
}

var iterator = document.createNodeIterator(root, NodeFilter.SHOW_ELEMENT, filter, false);

var node = iterator.nextNode();

while(node !== null){
    console.log( node.tagName );
    // node 的属性 与方法 详见 2 nodeFilter
    node = iterator.nextNode();
}

 ————————————————
基于此,可以简单的做为 web node 节点的数据 采集

1、nodeFilter

msn:

https://developer.mozilla.org/en-US/docs/Web/API/NodeFilter

var nodeIterator = document.createNodeIterator(
  // Node to use as root
  document.getElementById(‘someId‘),

  // Only consider nodes that are text nodes (nodeType 3)
  NodeFilter.SHOW_TEXT,

  // Object containing the function to use for the acceptNode method
  // of the NodeFilter
    { acceptNode: function(node) {
      // Logic to determine whether to accept, reject or skip node
      // In this case, only accept nodes that have content
      // other than whitespace
      if ( ! /^\s*$/.test(node.data) ) {
        return NodeFilter.FILTER_ACCEPT;
      }
    }
  },
  false
);

// Show the content of every non-empty text node that is a child of root
var node;

while ((node = nodeIterator.nextNode())) {
  alert(node.data);
}

3、element

msn: https://developer.mozilla.org/zh-CN/docs/Web/API/Element

while(node !== null){
    console.log( node.tagName );
   //node.tagName  等于 element.tagName
  // element 的属性 与方法 详见 3、

    node = iterator.nextNode();
}

sfd

原文地址:https://www.cnblogs.com/cbugs/p/11398353.html

时间: 2024-10-11 20:44:38

js node 节点 原生遍历 createNodeIterator的相关文章

原生JS forEach()和map()遍历的区别以及兼容写法

一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input. 3.匿名函数中的this都是指Window. 4.只能遍历数组. 1.forEach() 没有返回值. arr[].forEach(function(value,index,array){ //do something }) 参数:value数组中的当前项,

原生JS forEach()和map()遍历,jQuery$.each()和$.map()遍历

一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input. 3.匿名函数中的this都是指Window. 4.只能遍历数组. 1.forEach() 没有返回值,修改的是原数组. var ary = [12,23,24,42,1]; var res = ary.forEach(function (item,index

原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优势了. 原生JS虽然没有jquery那么的好用.便捷,或者说没有jquery那样让我们使用的如此顺手,甚至是无法舍弃的依赖.可是我们依然不得不扔掉手中这根陪伴我们多年的拐杖,我们不是瘸子,我们不曾腐朽,我们还可以独立前行. 二.正文 1. jquery和原生JS获取节点的比较 //这是HTML代码,

原生js添加节点的高级简便写法

insertAdjacentHTML()        原生js添加节点element.insertAdjacentHTML(position,text); var obj = document.getElementById("btn1"); obj.insertAdjacentHTML("afterEnd","<br><input name="txt1">"); 原文地址:https://www.cn

js深度优先和广度优先遍历语法树

在遍历html语法树中用到了深度优先遍历和广度优先遍历,就自己用js实现了下 //广度遍历html节点 function breadthSearch(item, childProp){ const nodeList=[item] let index=0; while (index<nodeList.length){ const node=nodeList[index++]; if(node[childProp]){ for(let k in node[childProp]){ nodeList.

JS添加节点方法与JQuery添加节点方法的比较及总结

原生JS添加节点方法与JQuery添加节点方法的比较及总结 一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="div2">div2 <span id="span1">span1</span> <span id="span2">span2</span> <

Puppet node节点的特性(十二)

前言: 生产机器很多通常会新建nodes.pp文件和site.pp文件平级,存放于/etc/puppet/manifests/nodes.pp文件,这种方法比较常用.当然也有其他办法直接写入site.pp文件. nodes.pp文件主机匹配,支持正则表达式和继承. //:正则匹配 "":精确匹配 inherits:继承 实例: 先正则匹配然后在精确匹配. node /sh-(proxy|web)\d+/ {   case $::hostname {     "sh-proxy

06. 父子节点(树)遍历写法小结

原文:06. 父子节点(树)遍历写法小结 对于树/图的遍历,通常有2种算法来实现:迭代(Iteration)和递归(Recursion),迭代是利用循环反复取值/赋值的过程:递归则是反复自己调用自己来获得最终结果.SQL Server里的递归有32层嵌套限制,目的在于防止代码进入死循环,除非使用提示OPTION (MAXRECURSION 0). 测试数据: if OBJECT_ID('city') is not null drop table city GO create table city

cocos2dx学习之路----第十章(Node节点生命周期详解)

这一篇我们就来看看Node节点的生命周期问题. 对于Node节点的生命周期,也称回调事件的回调.当对节点进行操作时,比如被添加或者移除,它默认都会调用自己的一些事件方法.现在就让我们看看属于它事件的回调方法有哪些,如下所示: virtual void onEnter(); //被添加到场景中的节点时调用 virtual void onEnterTransitionDidFinish(); //被添加到场景中的节点完成时调用 virtual void onExitTransitionDidStar