在 chrome 的控制台中显示 HTMLInputElement [重复]答案

【问题标题】：Display HTMLInputElement in console of chrome [duplicate]在 chrome 的控制台中显示 HTMLInputElement [重复]
【发布时间】：2020-10-11 06:50:47
【问题描述】：

我想显示 HTML 输入的 HTMLInputElement 对象：

 <div>
  <input type="text" id="name" name="toto" value="test" />
</div>

JS 脚本：

<script>
  const inputEl = document.getElementById("name"); 
  console.log(inputEl);
</script>

在 chrome 控制台中，我得到了这个：

但我想将其显示为 HTMLInputElement 对象。

在 stackblitz 控制台中，我得到了对象：

谢谢你:)

但是在本地我没有得到对象！！

【问题讨论】：

【解决方案1】：

不是 100% 确定您所说的“显示为 HTMLInputElement”是什么意思。如果您想查看其所有字段，您可能需要使用console.dir(inputEl)。

【讨论】：

因为在 HTML 中，他们说任何标签都会变成一个 HTMLInputElement 对象，HTMLInputElement 接口提供了特殊的属性和方法来操作元素的选项、布局和表示。
在stackblitz中我得到了对象，但在本地没有:(见顶部的截图，我更新了我的问题
@abadou 发生的事情是console.log() 使用toString()，它返回一个自定义字符串，就像您第一个屏幕截图中的字符串一样。如果您使用console.dir()，它会评估对象具有的实际键并打印它们，类似于第二个屏幕截图。