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

二级目录

三级目录

相关推荐

  1. 有关CSS选择

    2024-04-29 21:06:02       39 阅读
  2. css选择

    2024-04-29 21:06:02       55 阅读
  3. 前端---css 选择

    2024-04-29 21:06:02       43 阅读
  4. CSS常见选择

    2024-04-29 21:06:02       19 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-29 21:06:02       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-29 21:06:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-29 21:06:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-29 21:06:02       18 阅读

热门阅读

  1. C++基础经典算法题(必刷)

    2024-04-29 21:06:02       12 阅读
  2. C# 获取一个字符串中数字部分?

    2024-04-29 21:06:02       11 阅读
  3. python中json.dumps将中文变成unicode字符的解决办法

    2024-04-29 21:06:02       13 阅读
  4. Spring Boot应用部署 - War包部署

    2024-04-29 21:06:02       11 阅读
  5. 第30篇 RPC概述

    2024-04-29 21:06:02       12 阅读
  6. 题解:CF1946D(Birthday Gift)

    2024-04-29 21:06:02       10 阅读
  7. python第三方库

    2024-04-29 21:06:02       12 阅读
  8. CF1709B - Also Try Minecraft 题解

    2024-04-29 21:06:02       14 阅读
  9. jquery html(““)造成内存上涨

    2024-04-29 21:06:02       10 阅读