如何獲得for循環中的第一個childnode

Question

我正在嘗試創建一個腳本，獲取文檔的所有部分，並創建一個鏈接的id和作爲鏈接文本H2的導航。我嘗試了幾種方法，標題未定義。我試過使用一個類，獲得第一個子節點，並將節點列表轉換爲數組。

http://codepen.io/brooksroche/pen/XmpNaq?editors=101

if (document.getElementsByClassName("doc-section")) { 
    var sections = document.getElementsByClassName("doc-section"), 
    sidebar = document.getElementById('sidebarNav'), 
    navLinks = ""; 
    for (var i = 0; i < sections.length; ++i) { 
    var current = sections[i], 
     anchorID = current.id, 
     title = current.childNodes[0].text, 
     navLink = '<li><a href="#' + anchorID + '">' + title + '</a></li>', 
     navLinks = navLinks + navLink; 
    } 
    if (sidebar) { 
    sidebar.innerHTML = navLinks; 
    } 
} 

Answer 1

使用這個代替（收集時頭）：

title = current.children[0].textContent 

Demo。換句話說，您應該放置children而不是childNodes，因爲後者都會收集元素和文本節點。引用the docs：

孩子節點還包括例如文本節點和評論。跳過它們， 改爲使用ParentNode.children。

在這種特殊情況下，結束標記和開始標記之間的空白實際上是第一個節元素的childNode。你可以通過.data財產獲得它的文本，但它顯然沒用。

其實，你可能會認爲這是一個更安全的替代：

title = current.querySelector('.sectionTitle').textContent 

...所以，當相應元素的順序被改變，你仍然可以從它收集文本（如類當然是一樣的）。