element plus - 报错Uncaught DOMException: Failed to execute ‘querySelectorAll‘ on ‘Element‘: ‘x‘ is no

已于 2024-09-12 16:26:11 修改
阅读量3.5k 收藏 3
点赞数 3
分类专栏： 前端常见问题解决 前端组件与功能(开箱即用) 文章标签： vue3 element plus 虚拟化表格组件报错 鼠标放到表格上就会疯狂报错 element虚拟表格一直出错 详细解决教程方法 el-table
于 2024-06-01 10:40:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/139368444
版权
前端组件与功能(开箱即用) 同时被 2 个专栏收录
354 篇文章 2460 订阅 ¥9.90 ¥99.00
订阅专栏
前端常见问题解决
133 篇文章 158 订阅 ¥9.90 ¥99.00
订阅专栏
在Vue3+Element Plus环境下，遇到虚拟化表格组件在鼠标滑过时引发DOMException错误。报错信息提示querySelectorAll的参数无效。本文提供三种解决方案，包括更新组件版本、修改id字段值以及创建新的字段来避免使用可能引起报错的值。通过这些方法可以彻底解决该问题。
摘要由CSDN通过智能技术生成

报错说明

在vue3+element-plus开发中，解决虚拟化表格用鼠标滑过时报错问题，虚拟化表格组件当鼠标在表格上经过时浏览器控制台一直警告和报错问题，当然了不一定是鼠标经过才报错，其他情况也可能会触发。具体报错：Uncaught DOMException: Failed to execute ‘querySelectorAll’ on ‘Element’: ‘x’ is not a valid selector. | [Vue warn]: Unhandled error during execution of native event handler。

其他教程都无法解决，本文提供的解决方案完美搞定此问题。

在这里插入图片描述
在这里插入图片描述

问题解决

这个报错，是由于

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
专栏目录
订阅专栏
Vue3 - 解决报错 Uncaught (in promise) DOMException: Failed to execute ‘insertBefore‘ on ‘Node‘: The node
最新发布
王佳斌
08-19 4291
vue3，报错，vue3报错，Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node，如何解决这个错误，动态渲染，v-if，v-show，insertBefore，详细解决方法，vue3未能在“Node”上执行“insertBefore”：要插入
vue v-for渲染数据出现DOMException: Failed to execute ‘removeChild‘ on ‘Node‘: The node .....
AIGC大前端小王子
03-24 3024
本文主要介绍 vue v-for渲染数据出现DOMException: Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of this node.处理方案 data(){ // 是否操作中 使用了vue的v-for渲染数组数据,在一次改变数组的时候出现异常报错,而实际的数组是已经变化过的了,页面卡死 opting: true, }, methods:{ // 切换二级菜单栏 ch.
element-plus使用虚拟化表格报错：Failed to execute ‘querySelectorAll‘ on ‘Element‘: ‘[rowkey=1]‘ is not a valid
超小少的博客
05-20 673
element-plus使用虚拟化表格组件el-table-v2报错：Failed to execute 'querySelectorAll' on 'Element': '[rowkey=1]' is not a valid selector。版本更新后才有这个问题，排查后发现，与数据的id值有关
DOMException: Failed to execute ‘querySelectorAll‘ on ‘Document‘ is not a valid selector 报错处理
MichaelAn的博客
07-16 1万+
DOMException: Failed to execute ‘querySelectorAll’ on ‘Document’ is not a valid selector 报错处理 问题过程 今天开发过程中，遇到一个报错信息： react-dom.production.min.js:5058 DOMException: Failed to execute ‘querySelectorAll’ on ‘Document’: ‘0bb64d67-b455-4130-9b73-55eda6a1975c8Bu
DOMException: Failed to execute 'querySelectorAll' on 'Document' is not a valid selector 报错处理...
MichaelAn的博客
02-13 4940
DOMException: Failed to execute 'querySelectorAll' on 'Document' is not a valid selector 报错处理 问题过程 今天开发过程中，遇到一个报错信息： react-dom.production.min.js:5058 DOMExcept...
DOMException: Failed to execute ‘querySelectorAll‘ on ‘Element‘:小白求助 这个报错咋解决啊
iwt2cuo的博客
09-13 588
ag-grid 报错: Failed to execute ‘querySelectorAll‘ on ‘Element‘: ‘.xxx‘ is not a valid selector
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
08-19 821
最近在用ag-grid，使用 sideBar 时遇到了一些问题，特此记录一下。ag-grid 官网ag-grid 用了很多新的技术，所以它对浏览器版本相对要求高，如果遇到 问题可以先去 issues里查一下。然后升级 版本试试。
Odoo16 SyntaxError: Failed to execute ‘querySelectorAll‘ on ‘Element‘: ‘footer:not(field footer)‘ is
fqfq123456的专栏
04-11 881
访问 odoo16 表单页时如果出现如题的报错，一般是由于浏览器的兼容性问题导致的，比如在旧的浏览器内访问就容易出现这个问题，升级至最新版本，问题解决。今天碰到一次，装上后每次点设置时提示此错误，重装几次数据库，新库安装时还乱，没装项目却装了项目等等。
quill.js 编辑器报错Uncaught DOMException: Failed to execute ‘setStart‘ on ‘Range‘: The offset 4294967294
小豆包
04-28 998
编辑器quill 底层有个bug , 装好后需要修改 quill.js。
Uncaught DOMException: Failed to execute ‘drawImage‘ on ‘CanvasRenderingContext2D‘
qq_43519050的博客
12-22 4727
前端小白记录Vue踩到的坑。 首先这是公司另一位已经离职同事的代码，然后大屏展示页面是用jq引入了一个地图样式。 进入大屏展示都是没什么问题的，看起来一切都十分完美。 但是！！！！ 问题出来了！ 当我离开大屏展示页面，调整窗口大小的时候，无数个 Uncaught DOMException: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’； 就来了！ 我在网上各种搜索，都说是图片路径问题或者v-show/v-if控制的dom元素隐藏和
Javascript报错Failed to execute ‘querySelectorAll‘ on ‘Document‘: ‘#123456‘ is not a valid sele
热门推荐
宇宙的黑洞
12-19 3万+
Javascript报错：Failed to execute ‘querySelectorAll’ on ‘Document’: ‘#123456’ is not a valid selector 解决方式(除开特殊符号,第一个字符必须是字母)： 第一种： 将ID前面加字母，例如：document.querySelectorAll('#id123456') 第二种: 根据ID属性,例如：docum...
前端踩坑DOMException: Failed to execute ‘querySelector‘ on ‘Document‘: ‘#091.....‘
qq_58307541的博客
08-14 457
前端踩坑DOMException: Failed to execute 'querySelector' on 'Document': '#091.....'
关于Failed to execute 'querySelectorAll' on 'Document': '#1517905886124' is not a valid selector."
yang1067155909的专栏
02-06 7788
Failed to execute 'querySelectorAll' on 'Document': '#1517905886124' is not a valid selector.在开发中我想使用时间   戳作一个唯一的ID，可是在进行querySelector操作的时候一直报错，原来querySelector操作是不允许查找的内容为全数字的，在时间戳前面加上一个字母之类的字符即可
【JS】querySelector选择器不能以数字开头 | Failed to execute ‘querySelector‘ on ‘Element‘: ‘#8339397322295738]‘
此人太懒，没有任何简介
03-15 319
html js
Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Element': '#00' is not a valid select
fd214333890的专栏
09-25 2万+
之前在写代码的时候遇到这么一个问题。出问题的代码是这样的 var toPage = 00; $('body').find("#" + toPage).addClass("CURRENT"); 然而在find("#" + toPage)这里出了问题 很蛋疼啊，按照自己的理解这里应该是没问题的。但是偏偏就在这里出了问题，百度了一下，找到了一个和这个有关的讲解http://www.cnblogs.
d3+ts：DOMException: Failed to execute ‘querySelector‘ on ‘Document‘: The provided selector is empty.
特仑苏的博客
08-28 642
d3+ts:The provided selector is empty
【一句话博客】SyntaxError: Failed to execute ‘querySelector’ on ‘Document’: “xxx” is not a valid selector."
等时钟成长
04-14 1万+
出现了报错 SyntaxError: Failed to execute ‘querySelector’ on ‘Document’: “xxx” is not a valid selector." 原因 我使用了guid做div的id，出现了数字为首的id形式，而querySelector不识别数字开头的命名，所以报错。 解决办法 改用getElementById()即可 ...
前端踩坑_Failed to execute ‘querySelector‘ on ‘Document‘: ‘#5d...,is not a valid selector.
m0_52724742的博客
11-29 1383
is not a valid selector
vitepress运行报错：Uncaught (in promise) DOMException: Failed to execute ‘setAttribute‘ on ‘Element‘: ‘a
Lee_01的博客
03-10 486
对文章内容增量删减，确定到问题文本。这个对象导致的报错。前后加反引号，渲染成行内代码。
const elements = form1.querySelectorAll('[name]:not([name^="skus"]):not([type="hidden"]:not([style*="display:none"])');报错grounding.js:447 Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Element': '[name]:not([name^="skus"]):not([type="hidden"]:not([style*="display:none"])' is not a valid selector.
05-24
这个错误的原因可能是因为该选择器语法错误。可以尝试将选择器拆分为单独的选择器并逐个调试，找出哪个选择器导致了错误。 例如，您可以将选择器改为以下形式，以便更好地调试： ``` const elements = form1.querySelectorAll('[name]:not([name^="skus"])'); ``` 如果没有错误，则可以将其他选择器添加回去，逐个调试，直到找出导致错误的选择器。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值