querySelector() 方法
這個(gè)是h5新增的烹俗。說(shuō)明以前的byID蛤袒，Byclassname鸟蜡，Bytagname也可以乘粒。只不過(guò)加了這個(gè)一些東西更方便豌注。
舉個(gè)例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="demo">id="demo" 的 p 元素</p>
<p> 點(diǎn)擊按鈕修改 id="demo" 的 p 元素內(nèi)容</p>
<button onclick="myFunction()">點(diǎn)我</button>
<script>
function myFunction() {
document.querySelector("#demo").innerHTML="hh"
}
</script>
</body>
</html>
分析
document.querySelector("#demo").innerHTML="hh"
其中document為對(duì)象，querySelector("#demo")為Document對(duì)象下的方法灯萍。
"#demo"是其參數(shù)轧铁。表示選擇的是ID為demo的節(jié)點(diǎn)。當(dāng)然旦棉，此處用getElementById()方法也是可行的齿风。只不過(guò)參數(shù)就不需要#號(hào)了。
再比如
獲取文檔中第一個(gè) p 元素：
document.querySelector("p");
獲取文檔中 class="example" 的第一個(gè) p>元素:
document.querySelector("p.example");
總結(jié)
querySelector（）方法的參數(shù)可以使元素選擇器绑洛，也可以是類(lèi)選擇器救斑，ID選擇器，以及結(jié)合元素選擇器等等真屯。
因此才叫CSS選擇器嘛脸候！
querySelector('ul.list')
//結(jié)合元素選擇器
querySelector('[title="test"]')
//屬性選擇器
參考
HTML DOM querySelector() 方法 | 菜鳥(niǎo)教程
深入理解javascript選擇器API系列第三篇——HTML5新增的3種selector方法 - 小火柴的藍(lán)色理想 - 博客園
HTML5中類(lèi)jQuery選擇器querySelector的使用 - 劉哇勇 - 博客園
