为什么 IntelliSense 无法将我的查询所选项目识别为元素？

Question

问题

我试图弄清楚为什么当我使用以下命令访问 HTML 元素时 VSCode 的 IntelliSense 不会建议元素对象属性：

document.querySelector();

每当我使用该document.querySelector()方法，然后使用.运算符尝试查看所选元素的属性时，我都不会获得 CSS 属性列表，例如style

例子

我的 HTML 文件中有一个带有“list”类的 div 元素

<div class='list'>

在我的 .js 文件中，我可以通过编写以下内容来访问此元素：

const listElement = document.querySelector('.list');

我的问题是，当.在 上使用运算符时listElement，VSCode 不显示基本属性，例如style. 我仍然可以通过手动输入类似的内容来设置

listElement.style.display = 'none';

但是当我使用.运算符 VSCode 时不建议style，当我键入样式并.再次使用运算符时，它也不建议display。我的问题是： 如何让 Intellisense 显示这些属性？

注意：我是 HTML、CSS 和 Javascript 新手，所以我不知道我是否使用了所有正确的术语，但我尝试了！

Answer 1

VS Code 的 JavaScript IntelliSense 不知道您的 HTML 是什么样子，因此它会假设querySelector返回一个非常通用的对象类型。这就是为什么您看不到有关.styleDOM 属性和其他一些常见 DOM 属性的建议。这些属性实际上可能不存在于querySelector回报上！

querySelector但是，您可以使用简单的JSDoc 类型注释显式告诉 VS Code 返回的元素的类型：

/** @type {HTMLDivElement} */
const listElement =  document.querySelector('.list');

这应该给你正确的 IntelliSense：