1、参考:https://www.cnblogs.com/yoyoketang/p/11516138.html
2、querySelector()方法:
#:表示ID属性
.:表示class属性
[name = '']:表示name属性
3、 querySelector转义特殊字符
如果要匹配的ID或选择器不符合 CSS 语法(比如不恰当地使用了冒号或者空格),你必须用反斜杠将这些字符转义。由于 JavaScript 中,反斜杠是转义字符,所以当你输入一个文本串时,你必须将它转义两次(一次是为 JavaScript 字符串转义,另一次是为 querySelector
转义):
<div id="foo\bar"></div>
<div id="foo:bar"></div>
<script>
console.log('#foo\bar') // "#fooar"
document.querySelector('#foo\bar') // 不匹配任何元素
console.log('#foo\\bar') // "#foo\bar"
console.log('#foo\\\\bar') // "#foo\\bar"
document.querySelector('#foo\\\\bar') // 匹配第一个div元素
document.querySelector('#foo:bar') // 不匹配任何元素
document.querySelector('#foo\\:bar') // 匹配第二个div
</script>