CSS--选择器

选择器

学习链接

CSS6大种选择器(超详细!!!)

报错汇总

document.querySelector('#rdpmPrjApproval|rdpmPrjApprovalInfoGroup')获取失败

document.getElementById('rdpmPrjApproval|rdpmPrjApprovalInfoGroup')可以获取到对象

document.querySelector('#rdpmPrjApproval|rdpmPrjApprovalInfoGroup')获取失败,报错VM262411:1 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#rdpmPrjApproval|rdpmPrjApprovalInfoGroup' is not a valid selector.

是为何?该如何解决?

document.querySelector('#rdpmPrjApproval\|productRiskGrade').querySelector('#rdpmPrjApproval\|tips').children
在 JavaScript 中,getElementByIdquerySelector 都是用来选取页面上的元素,但它们对选择器的解析规则有所不同。
getElementById 方法是专门用来通过元素的 ID 来获取元素,所以它接受一个简单的 ID 字符串,如 'rdpmPrjApproval|rdpmPrjApprovalInfoGroup'。如果页面上存在这样一个 ID,它将返回对应的元素对象。然而,querySelector 方法则遵循 CSS 选择器的规则。在 CSS 中,| 字符不是一个有效的 ID 选择器。报错信息 "Failed to execute 'querySelector' on 'Document': '#rdpmPrjApproval|rdpmPrjApprovalInfoGroup' is not a valid selector" 表明这个字符串不能被解析为有效的 CSS 选择器。如果这个 ID 确实存在于你的 HTML 中,并且你需要使用 querySelector,你需要确保 ID 选择器的格式正确。由于 | 字符在 CSS 中有特定的用途(用于命名空间选择器),在一般的 ID 选择中是不被允许的。所以,你需要将 ID 作为字符串传递,如:javascriptdocument.querySelector('#rdpmPrjApproval\\|rdpmPrjApprovalInfoGroup')在上述代码中,我们使用了反斜杠 \| 进行转义,让它作为一个字符串传递,而非 CSS 特殊字符。这样,querySelector 就能够正确地解析并找到对应的元素。请注意,确保在实际的 HTML 中 ID 的确是用这种方式定义的,或者根据实际的 HTML 结构和 CSS 选择器规则来调整选择器

二级目录

三级目录

相关推荐
周亚鑫5 分钟前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
Justinc.22 分钟前
CSS3新增边框属性(五)
前端·css·css3
fruge29 分钟前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia38 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫38 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
嚣张农民1 小时前
JavaScript中Promise分别有哪些函数?
前端·javascript·面试
光影少年1 小时前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_1 小时前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu10830189111 小时前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾1 小时前
前端基础-html-注册界面
前端·算法·html