javascript - 被javascript HTML DOM遍历所迷惑

所以我有以下HTML：

<div id="mainSectionNav" class="section-container auto" data-section="" style="">
  <section class="active" style="padding-top: 50px;">
    <p class="title" data-section-title="" style="left: 0px;">
      <a href="#panel2">Dashboard</a>
    </p>
  </section>
  <section>
    <p class="title" data-section-title="" style="left: 97px;">
  </section>

而且我正在尝试编写一个函数以返回链接文本“仪表板”。

function zurbGetActiveSectionTab(elementId) {
    var activeSectionLinkText = '';
    var sectionLayout = document.getElementById(elementId);
    var sections = sectionLayout.childNodes;

    for(var i=0; i < sections.length; i++) {
        var section = sections[i];
        console.log("section tagName " + section.tagName);
        if ($(section).hasClass('active')) {
            var activeSectionParagraph = section.firstChild;
            // if(sections[i].type == 'level2-div')
            console.log("activeSectionParagraph tagName " + activeSectionParagraph.tagName);
            var activeSectionLink = activeSectionParagraph.firstChild;
            console.log("activeSectionLink tagName " + activeSectionLink.tagName);
            activeSectionLinkText = activeSectionLink.innerHTML;
        }
    }

    return activeSectionLinkText;
}

但这输出的是：

section tagName undefined
section tagName SECTION
activeSectionParagraph tagName undefined
TypeError: activeSectionLink is null
[Break On This Error]

这让我感到困惑。


为什么section [0]未定义？
为什么activeSectinParagraph tagName未定义
为什么activeSectionLink为null？
是ActiveSectionLink.innerHTML获取链接文本的正确方法吗？


很抱歉有这么多问题。我越是对此感到困惑，就会变得越来越困惑。

最佳答案

childNodes还返回不同类型的节点，而不仅仅是元素。

如果您查看孩子们的身高，您会发现它比您预期的要大。如果需要，可以通过选中nodeType过滤掉它们

for(var i=0; i < sections.length; i++) {
    var section = sections[i];
    if (section.nodeType != 1) {
        continue;
    }
    ....

关于javascript - 被javascript HTML DOM遍历所迷惑，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17174732/