querySelector() 方法
这个是h5新增的。说明以前的byID，Byclassname，Bytagname也可以。只不过加了这个一些东西更方便。
举个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="demo">id="demo" 的 p 元素</p>
<p> 点击按钮修改 id="demo" 的 p 元素内容</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
document.querySelector("#demo").innerHTML="hh"
}
</script>
</body>
</html>
分析
document.querySelector("#demo").innerHTML="hh"
其中document为对象，querySelector("#demo")为Document对象下的方法。
"#demo"是其参数。表示选择的是ID为demo的节点。当然，此处用getElementById()方法也是可行的。只不过参数就不需要#号了。
再比如
获取文档中第一个 p 元素：
document.querySelector("p");
获取文档中 class="example" 的第一个 p>元素:
document.querySelector("p.example");
总结
querySelector（）方法的参数可以使元素选择器，也可以是类选择器，ID选择器，以及结合元素选择器等等。
因此才叫CSS选择器嘛！
querySelector('ul.list')
//结合元素选择器
querySelector('[title="test"]')
//属性选择器
参考
HTML DOM querySelector() 方法 | 菜鸟教程
深入理解javascript选择器API系列第三篇——HTML5新增的3种selector方法 - 小火柴的蓝色理想 - 博客园
HTML5中类jQuery选择器querySelector的使用 - 刘哇勇 - 博客园
