奇怪的JS

今天在做一道程序题时遇到了一个很奇怪的问题。发出来希望能得到大佬的关注，帮我解惑一下，万分感谢！！！

题目是:利用Dom知识在下列html代码中获取dd标签内的文本内容，结果显示xxx

<dl id="mydiv">
        <dt>aaa</dt>
        <dd>xxx</dd>
        <dt>bbb</dt>
        <dt>ccc</dt>
    </dl>

我在这段代码的前面写了这样一段JS：

<script>
     var a = document.getElementsByTagName('dd');
     console.log(a);
</script>

然后运行结果能够成功显示htmlCollection：

然后就是去获取标签内的文本内容了

于是我的Js变成了：

<script>
       var a = document.getElementsByTagName('dd');
       console.log(a[0].firstChild.nodeValue);
</script>

 

按照逻辑a[0]可以获取到dd那行，然后获取第一个孩子的节点值，第一个孩子就是文本节点，应该是能获取的，但是运行变成了：

 在我反复思考，认为没有错的时候，试探性的把那段html代码放到了script的前面：

    <dl id="mydiv">
        <dt>aaa</dt>
        <dd>xxx</dd>
        <dt>bbb</dt>
        <dt>ccc</dt>
    </dl> 

    <script>
        var a = document.getElementsByTagName('dd');
        console.log(a[0].firstChild.nodeValue);
    </script>

结果运行成功显示了？！

从我的逻辑来说，既然之前能够通过getElementByTagName()获取到标签为dd的数组，

当然也能获取到dd标签内部的数据啊，为什么会不成功？？

而且我换个位置就成功了，如果程序是逐行执行的，那最开始就不应该读取到htmlCollection这个伪数组啊。。。