Javascript 通过 DOM 解析获取所有子项和值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6280814/
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
Parsing through DOM get all children and values
提问by Tyler Biscoe
Container is a div i've added some basic HTML to.
Container 是我添加了一些基本 HTML 的 div。
The debug_log function is printing the following:
debug_log 函数正在打印以下内容：
I'm in a span!
I'm in a div!
I'm in a
p
我在一个跨度！
我在一个div！
我在
p
What happened to the rest of the text in the p tag ("aragraph tag!!"). I think I don't understand how exactly to walk through the document tree. I need a function that will parse the entire document tree and return all of the elements and their values. The code below is sort of a first crack at just getting all of the values displayed.
p 标记（“aragraph 标记！！”）中的其余文本发生了什么变化。我想我不明白如何遍历文档树。我需要一个函数来解析整个文档树并返回所有元素及其值。下面的代码是让所有值显示出来的第一次破解。
container.innerHTML = '<span>I\'m in a span! </span><div> I\'m in a div! </div><p>I\'m in a <span>p</span>aragraph tag!!</p>';
DEMO.parse_dom(container);
DEMO.parse_dom = function(ele)
{
var child_arr = ele.childNodes;
for(var i = 0; i < child_arr.length; i++)
{
debug_log(child_arr[i].firstChild.nodeValue);
DEMO.parse_dom(child_arr[i]);
}
}
回答by
Generally when traversing the DOM, you want to specify a start point. From there, check if the start point has childNodes. If it does, loop through them and recurse the function if they too have childNodes.
通常在遍历 DOM 时，您要指定一个起点。从那里，检查起点是否有childNodes. 如果是，则循环遍历它们并递归函数（如果它们也有childNodes.
Here's some code that outputs to the console using the DOM form of these nodes (I used the document/HTML element as a start point). You'll need to run an if against window.consoleif you're allowing non-developers to load this page/code and using console:
下面是一些使用这些节点的 DOM 形式输出到控制台的代码（我使用文档/HTML 元素作为起点）。你需要，如果运行的对window.console，如果你允许非开发人员加载此页/代码和使用console：
recurseDomChildren(document.documentElement, true);
function recurseDomChildren(start, output)
{
var nodes;
if(start.childNodes)
{
nodes = start.childNodes;
loopNodeChildren(nodes, output);
}
}
function loopNodeChildren(nodes, output)
{
var node;
for(var i=0;i<nodes.length;i++)
{
node = nodes[i];
if(output)
{
outputNode(node);
}
if(node.childNodes)
{
recurseDomChildren(node, output);
}
}
}
function outputNode(node)
{
var whitespace = /^\s+$/g;
if(node.nodeType === 1)
{
console.log("element: " + node.tagName);
}else if(node.nodeType === 3)
{
//clear whitespace text nodes
node.data = node.data.replace(whitespace, "");
if(node.data)
{
console.log("text: " + node.data);
}
}
}
Example: http://jsfiddle.net/ee5X6/
回答by Wolfgang Kuehn
In
在
<p>I\'m in a <span>p</span>aragraph tag!!</p>
you request the first child, which is the text node containing "I\'m in a". The text "aragraph tag!!" is the third child, which is not logged.
您请求第一个子节点，它是包含“I\'m in a”的文本节点。文本“aragraph 标签！！” 是第三个孩子，没有记录。
Curiously, the last line containing "p" should never occur, because the span element is not a direct child of container.
奇怪的是，包含“p”的最后一行不应该出现，因为 span 元素不是 container 的直接子元素。
回答by NullRef
I'm not sure it is what you need or if it is possible in your environment but jQuery can accomplish something similar quite easily. Here is a quick jQuery example that might work.
我不确定它是否是您需要的，或者在您的环境中是否可能，但 jQuery 可以很容易地完成类似的事情。这是一个可能有效的快速 jQuery 示例。
<html>
<head>
<script src="INCLUDE JQUERY HERE">
</script>
</head>
<body>
<span>
<span>I\'m in a span! </span><div> I\'m in a div! </div><p>I\'m in a <span>p</span>aragraph tag!!</p>
</span>
<script>
function traverse(elem){
$(elem).children().each(function(i,e){
console.log($(e).text());
traverse($(e));
});
}
traverse($("body").children().first());
</script>
</body>
<html>
Which gives the following console output:
这给出了以下控制台输出：
I\'m in a span!
I\'m in a div!
I\'m in a paragraph tag!!
p
