通过DOM解析获取所有的孩子和值

容器是一个div我已经添加了一些基本的HTML。通过DOM解析获取所有的孩子和值

的DEBUG_LOG功能打印以下：

我在一个跨度很！
我在一个div！
我在
p

发生了什么事在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]); 
     } 
    }

来源

2011-06-08 Tyler Biscoe

你只是在寻找的DOM版本这些元素/节点或它们的HTML表示？ – 2011-06-08 15:53:05

一般情况下，你要指定一个起点。从那里，检查起点是否有childNodes。如果是这样，循环遍历它们并递归函数，如果它们也有childNodes。

下面是一些使用这些节点的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); 
     } 
    } 
}

例子：http://jsfiddle.net/ee5X6/

来源

2011-06-08 17:39:00

在

<p>I\'m in a <span>p</span>aragraph tag!!</p>

你请求第一子，其是包含文本节点 “I \'在A M”。文字“aragraph tag !!”是第三个孩子，没有登录。

奇怪的是，包含“p”的最后一行不应该出现，因为span元素不是容器的直接子元素。

来源

2011-06-08 16:25:37

我不确定这是你需要什么，或者如果它可能在你的环境中，但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>

这样做具有以下控制台输出：遍历DOM时

I\'m in a span! 
I\'m in a div! 
I\'m in a paragraph tag!! 
p

来源

2011-06-08 17:02:33 NullRef

对不起，当我复制你的例子时，我没有把'\\'出来。 – NullRef 2011-06-08 17:04:03

这里真的不需要jQuery。 – 2011-06-08 17:28:21

通过DOM解析获取所有的孩子和值

回答

相关问题