querySelector 和 querySelectorAll 方法是 W3C Selectors API 規範中定義的。他們的作用是根據 CSS 選擇器規範,便捷定位文檔中指定元素。
目前幾乎主流瀏覽器均支持了他們。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="bluemeng">
<p>藍夢博客</p>
<a href="http://www.bluemeng.com/">藍夢博客</a>
<a href="http://www.bluemeng.com/">藍夢博客</a>
<a href="http://www.bluemeng.com/">藍夢博客</a>
</div>
<script>
window.onload=function(){
var d1 = document.getElementById('bluemeng');
var obj1 = d1.querySelector('a');
var obj11 = d1.querySelector('a');
var obj2 = d1.querySelectorAll('a');
console.log(obj1);//<p>藍夢博客</p>
console.log(obj1.length);//undefind
console.log(obj11);//<a href="http://www.bluemeng.com/">藍夢博客</a>
console.log(obj2.length);//3
}
</script>
</body>
</html>
總結:
(1)querySelector 在文檔內找符合選擇器描述的節點第一個。
(2)querySelectorAll 在文檔內找全部符合選擇器描述的節點包括Element本身。