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

1. 背景

持续学习ing

2. 遇到的问题

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

// 为每个按钮添加点击事件监听器
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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/844084.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

kafka-守护启动

文章目录 1、kafka守护启动1.1、先启动zookeeper1.1.1、查看 zookeeper-server-start.sh 的地址1.1.2、查看 zookeeper.properties 的地址 1.2、查看 jps -l1.3、再启动kafka1.3.1、查看 kafka-server-start.sh 地址1.3.2、查看 server.properties 地址 1.4、再次查看 jps -l 1…

深入探索C++继承机制:从概念到实践的全面指南

目录 继承的概念及定义 继承的概念 继承的定义 定义格式 继承方式和访问限定符 继承基类成员访问方式的变化 默认继承方式 基类和派生类对象赋值转换 继承中的作用域 派生类的默认成员函数 继承与友元 继承与静态成员 继承的方式 菱形虚拟继承 菱形虚拟继承原理 继承…

【嵌入式】RS485通信+硬件

目录 1.物理层 2.协议层 3.收发电路 3.1三极管开关电路 3.2收发原理图解释 1.物理层 对比 CAN 通讯网络,可发现它们的网络结构组成是类似的,每个节点都是由一个通讯控制器和 一个收发器组成,在 RS-485 通讯网络中,节点中的…

Java基础:异常(三)

Java基础:异常(三) 文章目录 Java基础:异常(三)1. Java异常体系1.1 错误的分类1.2 异常的分类 2. 异常的捕获与处理2.1 try-catch2.2 finally 3. 异常的抛出4. 自定义异常 1. Java异常体系 Java的异常体系是…

ubuntu20 安装Anaconda

Anaconda官网:Anaconda | The Operating System for AI 然后就开始下载了。下载完 直接打开终端运行 bash Anaconda3-2024.02-1-Linux-x86_64.sh 按回车ENTER 一直空格,直到 yes,回车 确认安装路径,默认即可,直接回车…

SQL Server定期收缩日志文件详细步骤——基于SQL Server 2012

SQL Server定期收缩日志文件详细步骤 一、环境配置1、查看数据库的属性2、文件设置3、备份模式4、查看收缩配置5、查看收缩选项 二、编写作业计划1、选择新建作业2、常规配置3、步骤4、输入内容5、脚本详解6、新建计划7、输入名称、选择执行时间8、查看测试9、查看测试结果 一、…

【最优化方法】实验四 约束最优化方法的MATLAB实现

实验的目的和要求:通过本次实验使学生较为熟练使用MATLAB软件,并能利用该软件进行约束最优化方法的计算。 实验内容: 1、罚函数法的MATLAB实现 2、可行方向法的MATLAB实现 学习建议: 本次实验就是要通…

国际标准引脚,宽范围工作温度–40℃ 到 105℃,3W 1.5KVDC 隔离单输出 DC/DC 电源模块 ——TPL-3W系列

TPL-3W系列是一款额定功率为3W的隔离产品,国际标准引脚,宽范围工作温度–40℃ 到 105℃,在此温度范围内都可以稳定输出3W,并且效率非常高,高达88%,同时负载调整率非常低,对于有输出电压精度有要…

失落的方舟台服封号的解决方法 怎么避免封号?

失落的方舟台服封号的解决方法 怎么避免封号? 失落的方舟这款游戏是由Smile Gate研发的MMORPG游戏,这款游戏将于5月30日正式开服。游戏采用虚幻3引擎,为玩家们提供了丰富的游戏玩法与精美的游戏画面。游戏的背景是在中世纪,玩家们…

网络原理-------TCP协议

文章目录 TCP协议TCP协议段格式TCP原理确认应答机制 (安全机制)超时重传机制 (安全机制)连接管理机制 (安全机制)滑动窗口 (效率机制)流量控制 (安全机制)拥塞控制 (安全机制)延迟应答 (效率机制)捎带应答 (效率机制) 基于TCP的应用层协议 TCP协议 TCP, 即 Transmission Contr…

C# TcpClient

TcpClient 自己封装的话,还是比较麻烦的,可以基于线程,也可以基于异步写,最好的办法是网上找个插件,我发现一个插件还是非常好用的:STTech.BytesIO.Tcp 下面是这个插件作者的帖子,有兴趣的可以…

Mac连接虚拟机(Linux系统)

1.确定虚拟机的IP地址 ifconfig //终端命令,查询ip地址 sudo apt install net-tools 安装完成后再次执行 ifconfig: 2.安装SSH(加密远程登录协议) (1).安装OpenSSH服务器软件包: sudo apt-get install openssh-ser…

【惊艳视界】Perfectly Clear Workbench:让您的图像瞬间焕发生机!

在数字化时代,图像已成为我们生活中不可或缺的一部分。无论是摄影爱好者,还是专业设计师,都渴望拥有一款能够轻松提升图像质量的神奇工具。今天,我们为您带来了一款图像清晰处理软件的佼佼者——Perfectly Clear Workbench&#x…

最新!!2024上半年软考【高级】系统分析师 综合知识真题解析

2024上半年软考考试已经结束了,为大家整理了网友回忆版的系统分析师选择题真题及答案,总共30道题。 上半年考试的宝子们可以对答案预估分数!准备下半年考的宝子可以提前把握考试知识点和出题方向,说不定会遇到相同考点的题目&…

【全开源】知识付费问答社区(FastAdmin+ThinkPHP)

此系统是一款基于FastAdmin和ThinkPHP开发的知识付费问答社区系统,提供全部前后台无加密源代码,拥有强大的付费提问、付费阅读、付费查看、付费邀请、全文搜索等功能模块,其整合了强大的标签模块和专区模块,让问题和文章更好的归类…

python办公自动化——(三)替换PPT文档中图形数据-折线图

数据替换前 数据替换后 代码实现 # 单折线 pathE:\\13 python 下侧双x轴折线图\\ prs Presentation(path双x轴测试-01.pptx) data_timepd.read_excel(path"数据.xlsx",sheet_name单折线)ppt_9prs.slides…

初学JavaScript

什么是JavaScrip: JavaScript 是一种高级编程语言,主要用于网页开发。它是一种动态、弱类型的语言,可以在客户端(浏览器)中运行,并与 HTML 和 CSS 一起用于创建交互式网页。JavaScript 可以添加动态功能&a…

电脑误删除的文件怎么恢复?6个方法图文详解!

“我在电脑上误删除了一些比较重要的文件,现在不知道应该怎么操作了,有没有可以分享一下经验的朋友呀?” 在数字化世界的浪潮中,电脑成为了我们处理、存储和分享信息的重要工具。然而,随着我们对电脑的依赖日益加深&am…

【云原生】kubernetes中Configmap原理解析与应用实战

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,…

236. 二叉树的最近公共祖先(C++)

文章目录 前言一、题目介绍二、解决方案三、优化总结 前言 在本篇文章中我们将会讲解二叉树中极为经典的题目236. 二叉树的最近公共祖先 一、题目介绍 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为:“对于有根树 T 的…