javascript - 按顺序遍历 DOM 叶

Question

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

<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>, <p>Paragraph</p>, <i>Text</i>, <u>Underline</u>]。理想情况下，它会按照这个顺序。

Answer 1

普通的“旧”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);
}())​

例子

Answer 2

不是那么优雅，但我认为这应该可行（如果允许使用 jQuery）：

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

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