Linux 使用jquery一一节点遍历DOM
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3677228/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
DOM traversal one by one node using jquery
提问by pravin
I wanted to traverse node by node on a web page by maintaining sequence.
我想通过维护序列在网页上逐个节点地遍历。
e.g. Below is basic DOM :
例如下面是基本的DOM：
<BODY>
<DIV id ='1'> Test 1 </DIV>
<DIV id='2'> Details about <SPAN id='3'> Execution </SPAN> </DIV>
</BODY>
As per above example I want traverse each node by node i.e.
根据上面的例子，我想逐个节点遍历每个节点，即
1st Traversal : <BODY>
2nd Traversal : <DIV id ='1'>
3rd Traversal : <DIV id='2'>
4rd Traversal : <SPAN id='3'>
My motive is to loop over all the nodes available on current page and visit each node one by one saying simply nextnode(), while traversing not looking in to parent and child relations. Exepcted is, it should visit each node by following sequence.
我的动机是遍历当前页面上的所有可用节点，并通过简单地说 nextnode() 一个一个地访问每个节点，同时遍历而不查看父子关系。期望的是，它应该按照以下顺序访问每个节点。
So my statement will be like this :
所以我的声明会是这样的：
startnode //consider this is start node
While ( startnode!=null ) {
// will process on startnode
startnode= startnode->nextnode();
// something like that to visit each node
}
Is any one knows about this, how to achieve this using jquery(preferably) or javascript, please share their references.
有没有人知道这一点，如何使用 jquery（最好）或 javascript 来实现这一点，请分享他们的参考资料。
Thanks
谢谢
-Pravin
-普拉文
采纳答案by user113716
There's always the standard Crockford walk the dommethod.
总是有标准的 Crockford走 dom方法。
Example:http://jsfiddle.net/FJeaY/
示例：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
})?;?
Specific walk_the_DOMcode example copied from here:http://snipplr.com/view/19815/walking-the-dom/
walk_the_DOM从这里复制的具体代码示例：http : //snipplr.com/view/19815/walking-the-dom/
EDIT:Text nodes have nodeType = 3, so you can add that to your if()statement if those are desired as well.
编辑：文本节点有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
})?;?
回答by Nick Craver
You can loop through with a body and all selector, like this:
您可以使用 body 和所有 selector进行循环，如下所示：
$("body").find("*").andSelf().each(function() {
alert(this.nodeName); //alerts body, div, div, span
});?
Note: andSelfhas been deprecated and is now an alias for addBack(), which should be used with jQuery 1.8 and later
注意：andSelf已被弃用，现在是 的别名addBack()，应与 jQuery 1.8 及更高版本一起使用
You can give it a try here, the bodyportion is so you don't get the <head>and it's contents, etc.
你可以在这里试一试，body部分是这样你就不会得到<head>它的内容等。
回答by James
Simple.
简单的。
function walk(node, fn) {
if (node) do {
fn(node);
if (node.nodeType === 1) walk(node.firstChild, fn);
} while (node = node.nextSibling);
}
Usage:
用法：
walk(document.body, function(){
// do something with `this`
// e.g.
alert(this.id);
});
And to avoid non-element nodes, this will work:
为了避免非元素节点，这将起作用：
function walk(node, fn) {
if (node) do {
if (node.nodeType === 1) {
fn(node);
walk(node.firstChild, fn);
}
} while (node = node.nextSibling);
}
