CNode

DOM节点id如果包含加号,为何无法用querySelector查找呢?

问答
Cchapgaga发布于8 年前最后回复8 年前12 回复4914 浏览0 收藏

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

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

可以得到节点

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

查看回复

回复 (12)

J
justjavac#1·8 年前

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

J
justjavac#2·8 年前

HTML5 可以使用 Unicode 转义:

document.querySelector("#aasfd_唉唉唉\\00002恩恩")
// 或
document.querySelector("#aasfd_唉唉唉\\+恩恩")
J
justjavac#3·8 年前

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

D
dislido#4·8 年前

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

N
noe132#5·8 年前

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

C
chapgaga#6·8 年前
引用 justjavacHTML5 可以使用 Unicode 转义:

@justjavac 用CSS.escape为何无效?

C
chapgaga#7·8 年前
引用 justjavacHTML5 可以使用 Unicode 转义:

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

J
justjavac#8·8 年前
引用 chapgaga@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_唉唉唉\+恩恩`)
C
chapgaga#9·8 年前
引用 justjavac@chapgaga 其它情况加一个斜杠? 加一个斜杠是css的语法,\+,但是在 js 中,斜杠是需要转义的 \\ 这个才是斜杠。 你说的加一个斜杠,那是因为那些字符不需要转义。正好 :、 、...

@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个斜杠没报错啊?

J
justjavac#10·8 年前
引用 chapgaga@justjavac 用1个斜杠没报错啊?

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

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

J
justjavac#11·8 年前
引用 chapgaga@justjavac 用1个斜杠没报错啊?

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

J
justjavac#12·8 年前

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

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
参与回复
登录后即可参与回复。登录