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

Question

我希望表明 HTMLCollection 是一個實時列表，而 NodeList 是靜態的。 為此，我將頁面上 div 的總數（即 1）存儲在每個變量的變量中（g 表示 HTML，q 表示 Node）。 我分別使用 GetElementBy... 和 querySelector....

console.log(q.length) // 1

console.log(g.length) // 1

然后我使用 JS 創建一個新的 div 並將其附加到頁面。 現在總 div 2。

console.log(q.length) // 1

console.log(g.length) // 2

但是，它在控制台中一切正常，但我無法正確顯示 g.length。 我收到一個類型錯誤。 我不太明白 g.length 如何為空

截屏：

帶有 JS 的 index.html 文件

<!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>

我已經搜索過谷歌並找不到答案，將腳本移到頁面底部不起作用。

Answer 1

第 15 行你得到的 id 不正確：
試試這個： document.getElementById('getAl').innerHTML = g.length;

Answer 2

在這種情況下的問題是document.getElementById('getAL')是 null 而不是g.length

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

問題描述

2 個解決方案

解決方案1
2 已采納 2021-07-26 15:01:24

解決方案2
1 2021-07-26 15:00:10

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

問題描述

2 個解決方案

解決方案1 2 已采納 2021-07-26 15:01:24

解決方案2 1 2021-07-26 15:00:10

解決方案1
2 已采納 2021-07-26 15:01:24

解決方案2
1 2021-07-26 15:00:10