VS Code中多数JS DOM方法与属性失效，点击按钮无预期弹窗

一、点击事件不触发的核心原因 #

你的代码里犯了一个大小写错误：把全局文档对象document写成了大写的Document。大写的Document是DOM的构造函数，不是当前页面的文档实例，用它调用querySelectorAll找不到任何元素，自然没法给按钮绑定点击事件。

修正后的代码： #

for(var i=0;i<document.querySelectorAll(".drum").length;i++){
    document.querySelectorAll(".drum")[i].addEventListener("click",drumButtonClick);
    function drumButtonClick(){
        // var drumSound=new Audio(".sounds/tom-1.mp3");
        // drumSound.play();
        alert("hello");
    }
}

另外可以优化代码，避免重复调用querySelectorAll：

const drumButtons = document.querySelectorAll(".drum");
for(let i=0;i<drumButtons.length;i++){
    drumButtons[i].addEventListener("click", function(){
        alert("hello");
        // var drumSound=new Audio(".sounds/tom-1.mp3");
        // drumSound.play();
    });
}

二、VS Code无DOM关键词提示的解决方法 #

• 关联HTML文件
  在JS文件顶部添加注释，指定关联的HTML文件，VS Code会读取HTML里的DOM结构提供提示：

  // @ts-check
  // @link ./你的HTML文件名.html
  

• 开启JS类型检查
  打开VS Code设置（Ctrl+,），搜索javascript.implicitProjectConfig.checkJs，勾选该选项，开启隐式类型检查后就能获得DOM相关代码提示。

• 添加类型注释
  对document对象添加类型注释，强制VS Code识别它的类型：

  /** @type {Document} */
  const doc = document;
  // 之后用doc调用方法就会有提示了
  doc.querySelectorAll(".drum");
  

内容的提问来源于stack exchange，提问作者DeeZ