使用jquery逐个节点遍历DOM答案

【问题标题】：DOM traversal one by one node using jquery使用jquery逐个节点遍历DOM
【发布时间】：2017-04-06 03:25:45
【问题描述】：

我想通过维护顺序在网页上逐个节点遍历。

例如下面是基本的 DOM：

<BODY>
     <DIV id ='1'> Test 1 </DIV>
     <DIV id='2'> Details about <SPAN id='3'> Execution </SPAN> </DIV>   
</BODY>

按照上面的例子，我想逐个节点遍历每个节点，即

1st Traversal : <BODY>

2nd Traversal : <DIV id ='1'>

3rd Traversal : <DIV id='2'>

4rd Traversal : <SPAN id='3'>

我的动机是遍历当前页面上所有可用的节点，并简单地说 nextnode() 逐个访问每个节点，同时遍历不查看父子关系。期望的是，它应该按照以下顺序访问每个节点。

所以我的陈述会是这样的：

startnode //consider this is start node

While ( startnode!=null ) {

  // will process on startnode

   startnode= startnode->nextnode();
  // something like that to visit each node
}

有谁知道这一点，如何使用jquery（最好）或javascript来实现这一点，请分享他们的参考资料。

谢谢

-普拉文

【问题讨论】：

@pravin 你在找$('*') 吗？
@Avinash : 对不起，你能不能探索一下这个......你的意思是说页面上的所有节点......
在$('*')，" * " 选择器用于选择页面上的每个节点。
我认为它不会选择文本节点......就像上面的
的示例 innerHTML 即测试 1。这里它会跳转像 ,
这样的prper节点,
,。如果我想要，我该如何实现：、
、Test 1、
、Details about、、Execution is this possible ?
@pravin - 您可以在迭代这些节点时获取它们的内容，但您的示例确实 not 有文本节点，您应该更新问题正是你所追求的。

【解决方案1】：

总是有标准的 Crockford walk the dom 方法。

示例： http://jsfiddle.net/FJeaY/

var walk_the_DOM = function walk(node, func) {
    func(node);
    node = node.firstChild;
    while (node) {
        walk(node, func);
        node = node.nextSibling;
    }
};

walk_the_DOM(document.body, function(node) {
    if(node.nodeType == 1)
        alert(node.id);  // alert if we have a type 1 node
});

从这里复制的具体walk_the_DOM 代码示例： http://snipplr.com/view/19815/walking-the-dom/

编辑：文本节点具有nodeType = 3，因此如果您也需要这些，您可以将其添加到您的if() 语句中。

walk_the_DOM(document.body, function(node) {
    if(node.nodeType == 1 || node.nodeType == 3)
        alert(node.id);  // ID will be undefined if it is a text node
});

【讨论】：

用于在 DOM 树中遍历父级到子级的出色递归代码

【解决方案2】：

您可以使用 body 和 all selector 进行循环，如下所示：

$("body").find("*").andSelf().each(function() {
    alert(this.nodeName); //alerts body, div, div, span
});

注意：andSelf 已被弃用，现在是 addBack() 的别名，应与 jQuery 1.8 及更高版本一起使用

You can give it a try here，body 部分是这样你就不会得到<head> 及其内容等。

【讨论】：

这有两个反对票。我也很好奇，因为答案是正确的。反对者应该是体面的并解释原因。
完全正确...这个答案似乎不错...请添加不赞成投票的评论，所以我也知道是否有任何其他理由这样标记...
这不包括<body>。
@Roatin - 你为什么不这么说？已更新。
好吧，如果没有其他原因，除了您几乎总是给予建设性的 cmets 来代替否决票这一事实，+1。

【解决方案3】：

简单。

function walk(node, fn) {
    if (node) do {
        fn(node);
        if (node.nodeType === 1) walk(node.firstChild, fn);
    } while (node = node.nextSibling);
}

用法：

walk(document.body, function(){
    // do something with `this`
    // e.g.
    alert(this.id);
});

为了避免非元素节点，这将起作用：

function walk(node, fn) {
    if (node) do {
        if (node.nodeType === 1) {
            fn(node);
            walk(node.firstChild, fn);
        }
    } while (node = node.nextSibling);
}

【讨论】：