quertySelector 返回空值是什么？答案

【问题标题】：What does quertySelector return null value?quertySelector 返回空值是什么？
【发布时间】：2017-08-09 21:25:09
【问题描述】：

querySelector 在搜索 id "#b>a" 时返回 null，但 getElementById 返回正确的元素。怎么回事？

var x = document.querySelector('#b>a');
console.log(x);
var y = document.getElementById("b>a");
console.log(y);

Name &lt;input type="text" id="b&gt;a"&gt;

【问题讨论】：

【解决方案1】：

> 字符在 CSS 选择器语法中具有意义。你必须使用"#b\>a"。

> 是“直接子元素”组合子，所以普通的"#b>a" 选择一个<a> 元素，它是您的id 为“b”的元素的子元素。

【讨论】：

...此时您最好使用 document.getElementById()，除非您的用例需要选择器。
它被称为组合子;)
@BoltClock 同意，尽管使用选择器并不奇怪或不好或任何东西，尤其是在某种工具/框架情况的上下文中。 edit 是的，我想记住这个词；在我的辩护中，我在打电话时正在打字；）
确实，有很多情况需要选择器。
CSS.escape() 可能很有用，因为在 CSS 选择器中还有其他字符需要转义。注意browser compabitiliy。

【解决方案2】：

您需要转义 > 字符。见下面的sn-p

var x = document.querySelector('#b\\>a');
console.log(x);
var y = document.getElementById("b>a");
console.log(y);

Name &lt;input type="text" id="b&gt;a"&gt;

【讨论】：

【解决方案3】：

选择器查询将在字符之前查找类型，因此它会查找 a 而不是文本 a。

要使其正常工作，您需要使用

转义选择器

var x = document.querySelector('#b\\>a');

【讨论】：