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 选择器规则来调整选择器

二级目录

三级目录

相关推荐
孤水寒月3 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀3 小时前
html初学者第一天
前端·html
耶啵奶膘6 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家6 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689977 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽8 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头8 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全9 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing9 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆9 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试