在接入外部友商的sdk，友商使用了一些特殊字符串作为选择器，导致获取该元素失败。针对这种情况列举下一些处理方案
原因：
CSS 中，标识符是用于命名选择器、类、ID、动画名称、变量名等的名称。CSS 标识符必须遵循一定的语法规则，以确保它们能够被正确解析和使用。以下是 CSS 标识符的规则：
- 字符集：标识符可以包含字母（A-Z 和 a-z）、数字（0-9）、连字符（-）、下划线（_）和 Unicode 字符。
- 开头字符：标识符不能以数字、连字符、两个连字符开头。
- 特殊字符：!、@、#、$、%、^、&、*、(、)、[、]、{、}、|、\、:、;、'、"、<、>、,、.、?、/ 和空格
解决方案：
设置id比较特殊的选择器
<div id="a/b/c#_d"></div>
- 1、直接使用document.getElementById(id)
const id="a/b/c#_d";
const ele= document.getElementById(id);
console.log("ele", ele);
- 2、
querySelector+ 设置转义
const id = "a/b/c#_d".replace(/([ !"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~])/g, '\\$1');
const ele = document.querySelector(`#${id}`);
console.log("ele", ele);
- 3、(取巧)
querySelector+使用属性id选择器
const id="a/b/c#_d";
const ele = document.querySelector(`[id="${id}"]`);
console.log("ele", ele);
getElementById与querySelector差异：
- getElementById 是 DOM 的一种方法，专门用于通过 id 属性来获取元素。因为 id 在 HTML 中是唯一的字符串标识符，不涉及到 CSS 选择器的语法，所以不需要转义
- querySelector 是基于 CSS 选择器语法的通用选择方法。由于 CSS 选择器中，特殊字符有特定含义（例如 # 用于选择 id，. 用于选择 class 等），所以这些字符需要进行转义以确保选择器能够正确解析和匹配
