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);
}())​

example