混淆了javascript HTML DOM遍历

Question

So I have the following 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>

And I'm trying to write a function to return the link text "Dashboard".

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;
}

But what this is outputting is:

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

Which has me confused.

1. Why is sections[0] undefined?
2. Why is activeSectinParagraph tagName undefined
3. Why is activeSectionLink null?
4. is activeSectionLink.innerHTML the correct way to get the link text?

Sorry for so many questions. The more I mess with this, the more confused I'm getting.

Answer 1

childNodes also returns different types of nodes, not just elements.

If you were to look at the length of the children you will see that it is larger than you expect. You can filter them out if you want by checking the nodeType

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