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>, Paragraph, Text, Underline]。理想情况下，它将按此顺序排列。

Answer 1

不是那么优雅，但我认为这应该有效（如果允许jQuery）：

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

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

Answer 2

普通的“旧”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

遍历DOM按顺序离开

2 个答案: