如何在元素的 innerHTML 中呈现 [object HTMLCollection].length？

Question

我希望证明 HTMLCollection 是一个实时列表，而 NodeList 是静态的。为此，我将 div 的总数（即 1）存储在页面上的每个变量中（g 表示 HTML，q 表示节点）。我分别使用 GetElementBy... 和 querySelector.... 执行此操作。

console.log(q.length) // 1

console.log(g.length) // 1

然后我使用 JS 创建一个新的 div 并将其附加到页面。现在总共 divs 2.

console.log(q.length) // 1

console.log(g.length) // 2

它在控制台中一切正常，但是，我无法正确显示 g.length。我收到类型错误。我不太明白 g.length 怎么可以为 null

截图：

index.html 带有 JS 的文件

<!DOCTYPE html>
<html lang="en">
    <head>
<script>
    function newElement() {
        newDiv = document.createElement('div')
        newDiv.innerHTML = 'Div 2'
        document.getElementById('wrapper').appendChild(newDiv);
    }

    function updateStats() {
        document.getElementById('queryA').innerHTML = q;
        document.getElementById('getA').innerHTML = g;
        document.getElementById('queryAL').innerHTML = q.length;
        document.getElementById('getAL').innerHTML = g.length;

    }
</script>
    </head>

<body>
    <button onClick="newElement();">Add Element</button>
    <button onClick="updateStats();">Update Stats</button>

<header id="wrapper">
    <div>
        Div 1
    </div>
</header>

<h3>querySelector Before</h3>
<p>Type:<span id="queryB"></span></p>
<p>Length:<span id="queryBL"></span></p>
<h3>After</h3>
<p>Type:<span id="queryA"></span></p>
<p>Length:<span id="queryAL"></span></p>
<hr>
<h3>getElementByTagName Before</h3>
<p>Type:<span id="getB"></span></p>
<p>Length:<span id="getBL"></span></p>
<h3>After</h3>
<p>Type:<span id="getA"></span></p>
<p>Length:<span id="getAl"></span></p>

<script>
    q = document.querySelectorAll('div')
    g = document.getElementsByTagName('div')
    
    document.getElementById('queryB').innerHTML = q;
    document.getElementById('queryBL').innerHTML = q.length;
    document.getElementById('getB').innerHTML = g;
    document.getElementById('getBL').innerHTML = g.length;

</script>
</body>


  </html>

我搜索了Google但找不到答案，将脚本移动到页面底部没有用。

Answer 1

这种情况下的问题是 document.getElementById('getAL') 为 null 而不是 g.length

Answer 2

第 15 行你得到错误的 id：
试试这个：document.getElementById('getAl').innerHTML = g.length;

如何在元素的 innerHTML 中呈现 [object HTMLCollection].length？

How to render [object HTMLCollection].length in an element's innerHTML?

javascript

htmlcollection