DOM节点id如果包含加号,为何无法用querySelector查找呢? - CNode技术社区

如

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

用document.getElementById("aasfd_唉唉唉+恩恩")

可以得到节点

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

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

HTML5 可以使用 Unicode 转义:

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

关于转义序列,看看我这篇文章: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