遍歷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依次排列

回答

相關問題