我正在嘗試遍歷身體標簽及其所有孩子，就像身體的一個孩子包含其他孩子一樣，我也想接觸到那些孩子，我正在嘗試提出更好更快的演算法，任何人都可以幫助想出一個比我更好的？
<body>
<div class = "header-section">
<header class = "header-himself">
<div class = "nav-section">
<nav class = "nav-himself">
<div class = "list-section-left">
<ul class = "list-itself-left">
<li>Darster</li>
<li>Company</li>
<li>Safety</li>
<li>Help</li>
</ul>
</div>
<div class = "list-section-right">
<ul class="list-itself-right">
<li>Service</li>
<li>Dart In</li>
<li>Dart Out</li>
</ul>
</div>
</nav>
</div>
</header>
</div>
</body>
var target = document.querySelector('body');
function getChildren(target) {
if(target.children.length === 0) {
return;
}
for(var i = 0; i < target.children.length; i ) {
console.log(target.children[i].tagName);
getChildren(target.children[i]);
}
}
getChildren(target);
uj5u.com熱心網友回復：
這是一個非常簡單的tree walker：
const walkDOMTree = (visitor, types = [Node.ELEMENT_NODE]) => (node) => {
if (types == "*" || types .includes (node .nodeType)) {
visitor .visit (node)
}
node .childNodes .forEach (walkDOMTree (visitor, types))
return visitor
}
const visitor = (captured = []) => ({
visit: (node) => {if (node .nodeName == 'LI') captured .push (node.textContent)},
captured
})
const v = visitor ()
walkDOMTree (v) (document)
console .log ('LI content: ', v .captured)<div class = "header-section">
<header class = "header-himself">
<div class = "nav-section">
<nav class = "nav-himself">
<div class = "list-section-left">
<ul class = "list-itself-left">
<li>Darster</li>
<li>Company</li>
<li>Safety</li>
<li>Help</li>
</ul>
</div>
<div class = "list-section-right">
<ul class="list-itself-right">
<li>Service</li>
<li>Dart In</li>
<li>Dart Out</li>
</ul>
</div>
</nav>
</div>
</header>
</div>walkDOMTree接受一個visitor- 只是一個帶有方法的物件- 并且可以選擇一個您想要訪問的nodeTypesvisit陣列。（如果你提供，它將訪問所有節點型別，包括屬性、注釋、CDATA 等。默認情況下，它只會訪問元素。）它回傳一個函式，該函式接受一個 DOM 節點，然后在該節點上遞回呼叫訪問者的函式以及按檔案順序排列的每個后代。'*'visit
我經常會寫這個來接受一個簡單的函式visit，而不是一個具有這種函式的物件。但是這個版本讓訪問者更容易做一些有用的事情，比如收集一些資料，如此處所示，我們的 tree-walker 訪問所有元素，訪問者收集所有元素的文本LI。
但是，我現在不太可能使用這樣的功能，因為瀏覽器已經提供了內置的TreeWalker API。如果這只是為了學習，那么請隨意使用上面的內容，但對于生產作業，請使用標準！
uj5u.com熱心網友回復：
您可以只使用*選擇器。
var allBodyNodes = document.body.querySelectorAll('*');
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/510247.html