遍历DOM依次排列

我正在寻找遍历特定元素的叶子的最有效方法。例如：遍历DOM依次排列

<div id='root'> 
    <ul> 
    <li>One</li> 
    <li>Two</li> 
    </ul> 
    <div> 
    <p>Paragraph</p> 
    <div> 
     <b> 
     <i>Text</i> 
     </b> 
     <u>Underline</u> 
    </div> 
    </div> 
</div>

我应该得到一个数组：[<li>One</li>, <li>Two</li>, Paragraph, Text, Underline]。理想情况下，它将按照这个顺序。

来源

2012-08-15 jhchen

好的，你有什么尝试？ – undefined 2012-08-15 18:58:38

一个显而易见的情况是递归遍历并在遇到没有使用childNodes属性的子节点的情况下构建数组，但是想知道是否有更好的方法 – jhchen 2012-08-15 19:05:24

@jhchen'.childNodes'给出了注释节点，文本节点等。 '.children']（https://developer.mozilla.org/en-US/docs/DOM/Element.children） – Esailija 2012-08-15 19:06:22

普通的 “老” 的Javascript

(function() { 
    var nodes = document.querySelectorAll("#root *"), 
     result; 

    result = [].slice.apply(nodes).filter(function(i) { 
     return i.childNodes.length === 1 && i.firstChild.nodeType === 3; 
    }) 

    console.log(result); 
}())

example

来源

2012-08-15 19:16:55 Andreas

不就是优雅，但我认为这应该工作（如果jQuery是允许的）：

$('#root *').filter(function() { 
    return $(this).children().length === 0; 
});

示范：http://jsfiddle.net/9nFQ8/1/

来源

2012-08-15 19:01:05

如果jQuery被“允许”使用:) – Andreas 2012-08-15 19:03:19

当然，对不起;） – 2012-08-15 19:04:18

我会更喜欢它，如果我们不必使用jQuery，但这是对我的问题的一个非常简单和正确的答案 – jhchen 2012-08-15 19:06:58

遍历DOM依次排列

回答

相关问题