VSCode 报错 之 运行 js 文件报错 ReferenceError: document is not defined

1. 背景

持续学习ing

2. 遇到的问题

在VSCode 右键 code runner js 文件报错 ReferenceError: document is not defined

eg:

js 复制代码
// 为每个按钮添加点击事件监听器
document.querySelectorAll('button').forEach(function (button) {
    button.addEventListener('click', function () {
        // 获取当前按钮的data-phone和data-password属性值
        const phone = this.getAttribute('data-phone');
        const password = this.getAttribute('data-password');

        // 获取当前活动的标签页
        chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
            // 在当前标签页中注入并执行脚本
            chrome.scripting.executeScript({
                target: { tabId: tabs[0].id },
                function: login,
                args: [0, phone, password]
            });
        });

    });

报错的提醒:

3. 问题的原因

  1. js 脚本的运行环境有浏览器环境和 Node.js 两种,根据 Node.js 官方网站的介绍,Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.
  2. 上述代码调用了 Document 类型提供的方法 document.querySelectorAll('button').forEach(function (button),属于 DOM 的应用,但是对于 DOM 和 BOM 的操作只有在浏览器环境下才能进行,
  3. 在 VSCode 这里我用插件 Code Runner 来运行 js 脚本的,Code Runner 的配置是 Node.js
    环境,如果操作 DOM 就会报错。

4. DOM 和 BOM区别参考文章

https://blog.csdn.net/qq_52736131/article/details/123563321

相关推荐
Cshaosun几秒前
js版本之ES5特性简述【String、Function、JSON、其他】(二)
前端·javascript·es
豆包MarsCode22 分钟前
我用豆包MarsCode IDE 做了一个 CSS 权重小组件
开发语言·前端·javascript·css·ide·html
0zxm33 分钟前
01.Django快速入门
数据库·vscode·python·django·sqlite
X 西安34 分钟前
第十章JavaScript的应用
开发语言·javascript·ecmascript
想你的风吹到了瑞士40 分钟前
变量提升&函数提升
前端·javascript·vue.js
小阿龙...40 分钟前
创建mapreduce项目使用maven
java·ide·hadoop·spark·big data
夫琅禾费米线2 小时前
leetcode2650. 设计可取消函数 generator和Promise
开发语言·javascript·leetcode·ecmascript
战族狼魂3 小时前
html+js实现图片的放大缩小等比缩放翻转,自动播放切换,顺逆时针旋转
javascript·css·html
Komorebi⁼3 小时前
Vue核心特性解析(内含实践项目:设置购物车)
前端·javascript·vue.js·html·html5
明月清风徐徐3 小时前
Vue实训---0-完成Vue开发环境的搭建
前端·javascript·vue.js