DOM节点id如果包含加号，为何无法用querySelector查找呢？
发布于 6 年前 作者 chapgaga 4207 次浏览 来自 问答

如

<div id="aasfd_唉唉唉+恩恩">
</div>

用document.getElementById(“aasfd_唉唉唉+恩恩”)

可以得到节点

但是 用document.querySelector("#aasfd_唉唉唉+恩恩")和 document.querySelector("#aasfd_唉唉唉\+恩恩")得到的都是null 为什么会这样呢？

12 回复
1

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

https://www.w3.org/TR/html401/types.html#type-name

1

HTML5 可以使用 Unicode 转义：

document.querySelector("#aasfd_唉唉唉\\00002恩恩")
// 或
document.querySelector("#aasfd_唉唉唉\\+恩恩")
1

关于转义序列，看看我这篇文章：https://zhuanlan.zhihu.com/p/31030352

因为document.querySelector("#aasfd_唉唉唉+恩恩")查询的是<... id="aasfd_唉唉唉" /><恩恩 />的<恩恩 />

document.querySelector("[id=‘aasfd_唉唉唉+恩恩’]") 😝

@justjavac 用CSS.escape为何无效？

@justjavac 其他情况，转义加一个斜杠就够了，为什么加号需要加2个斜杠？

@chapgaga

其它情况加一个斜杠？

加一个斜杠是css的语法，\+，但是在 js 中，斜杠是需要转义的 \\ 这个才是斜杠。

你说的加一个斜杠，那是因为那些字符不需要转义。正好 :、-、_ 也都不是转义字符。

let str = '\';	// SyntaxError: Invalid or unexpected token
'\n'.length === 1
'\+'.length === 1
'\+' === '+'
'\\+'.length === 2

如果你想使用一个斜杠，可以使用 String.raw：

document.querySelector(String.raw`#aasfd_唉唉唉\+恩恩`)

@justjavac

CSS.escape('adb-sd.f_s;df#sdf')
"adb-sd\.f_s\;df\#sdf"
a=CSS.escape('adb-sd.f_s;df#sdf')
"adb-sd\.f_s\;df\#sdf"
a
"adb-sd\.f_s\;df\#sdf"

用1个斜杠没报错啊？

@chapgaga 不。这根本不是一个斜杠。看来你还是没有解决我说的。

我换个说法吧。如果你写一段代码，输出 "\" 你怎么写呢？

@chapgaga 或者你在 Firefox 浏览器里面运行你的代码

如果你还不明白，我再写几行代码给你解释

CSS.escape('adb-sd.f_s;df#sdf').length
20
"adb-sd\.f_s\;df\#sdf".length
17
"adb-sd\\.f_s\\;df\\#sdf".length
20

CSS.escape('adb-sd.f_s;df#sdf') === "adb-sd\.f_s\;df\#sdf"
false

CSS.escape('adb-sd.f_s;df#sdf') === "adb-sd\\.f_s\\;df\\#sdf"
true
回到顶部