为什么我的 document.querySelector() 返回 [object HTMLDivElement] 而不是值？

Question

我将值 60% 存储在 <div class="value-container"> 60% </div> 中，但是当使用此查询函数 document.querySelector(.value-container) 获取值时，我得到的是此响应：[object HTMLDivElement]

在下面找到我的 HTML 代码：

<body>

    <div class="container">
        <div class="circular-progress">
            <div class="value-container"> 60% </div>
        </div>
    </div>

    <script>
        $(document).ready(function(){
            let testing = document.querySelector('.value-container');
            console.log("Testing: " +testing);
        });            
    </script>

</body>

以上代码产生：

Testing: [object HTMLDivElement]

期望的产量是：

Testing: 60%

如何获取存储在 <div class="value-container"> 60% </div> 中的值？

Answer 1

如上所述，query selector returns一个元素，但是要得到它的内在值 document.querySelector('.value-container').innerHTML 应添加

Answer 2

其他评论者是正确的 - 您需要对从 querySelector 返回的对象做一些事情。

但是如果您只关心原始文本（在这种情况下看起来像您只想要 60% 的值），那么 document.querySelector('.value-container').textContent 比 innerHTML

为什么我的 document.querySelector() 返回 [object HTMLDivElement] 而不是值？

Why is my document.querySelector() returning a [object HTMLDivElement] instead of the value?

html

javascript

jquery-selectors