javascript高級選擇器querySelector和querySelectorAll區別

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本身。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章