JavaScript document.querySelector() 在 Chrome 開發工具中登錄到控制台時不顯示標簽/元素

Question

我有一個非常簡單的 web 堆棧，只有一個index.html和一個dom.js腳本。 當我控制台記錄針對我想要的元素的變量時，我在 Chrome 開發控制台中得到了奇怪的行為。 我正在使用“Chrome 版本 104.0.5112.79（官方版本）（x86_64）”。

const h1Tag = document.querySelector('h1');

console.log(h1Tag);

HTML 文件


<head>
    <title>Javascript Demo</title>

    <style>

        h1 {
            color: red;
        }

        div {
            color: coral;
        }

    </style>
    
</head>

<html>
    <body>
        <h1>Welcome to JavaScript DOM Review</h1>
        <div class="output">Div 1</div>
        <div class="output">Div 2</div>

        <script src="dom.js"></script>
    </body>
</html>

dom.js 文件

const h1Tag = document.querySelector('h1');
console.log(h1Tag);

const divTags = document.querySelectorAll('div');
console.log(divTags);

我希望在控制台中看到的是<h1>Welcome to JavaScript DOM Review</h1>但我大部分時間看到的是帶有下拉箭頭的h1元素，它顯示了h1的屬性。

如果我刷新幾次，我會得到我所期望的，那就是 HTML 元素作為元素。

Firefox 和 Safari 都有問題。

這比表演停止者更令人討厭。

謝謝！

在此處輸入圖像描述

Answer 1

請理解queryselector和 ```querySelectorAll`` 的區別。
querySelector僅對id有用。 但是，每當我們嘗試訪問htmltags 、 .classSelector時，我們都必須使用querySelectorAll ，它將返回節點列表，我們可以循環並做我們想做的事情。
這是一個例子。

 const allh1s = document.querySelectorAll("h1"); // selecting all h1 tags const h1Byid = document.querySelector("#h1Id"); // selecting h1 by id. h1Byid.style.color = "red"; console.log(allh1s); console.log(h1Byid);

 .as-console-row { background: #f5f5f5: }.as-console-wrapper { height: 80px; }

 <h1>This is h1 tag</h1> <h1>This is h1 tag</h1> <h1 id="h1Id">This is h1 tag with id #h1Id</h1> <h1>This is h1 tag</h1> <h1>This is h1 tag</h1> <h1>This is h1 tag</h1>

Answer 2

我似乎無法復制這一點，但也許這與 chrome 加載 dom 的方式有關？

是否將其放入以下幫助中：

window.addEventListener('DOMContentLoaded', (event) => {
    const h1Tag = document.querySelector('h1');
    console.log(h1Tag);
});

JavaScript document.querySelector() 在 Chrome 開發工具中登錄到控制台時不顯示標簽/元素

問題描述

1 個解決方案

解決方案1
0 2022-08-12 15:00:17

解決方案2
0 2022-08-12 15:00:23

JavaScript document.querySelector() 在 Chrome 開發工具中登錄到控制台時不顯示標簽/元素

問題描述

1 個解決方案

解決方案1 0 2022-08-12 15:00:17

解決方案2 0 2022-08-12 15:00:23

解決方案1
0 2022-08-12 15:00:17

解決方案2
0 2022-08-12 15:00:23