选择器
学习链接
报错汇总
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 中，getElementById和querySelector都是用来选取页面上的元素，但它们对选择器的解析规则有所不同。
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 选择器规则来调整选择器