定義：
querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素。
注意： querySelector() 方法僅僅返回匹配指定選擇器的第一個元素。如果你需要返回所有的元素，請使用 querySelectorAll() 方法替代。
語法
document.querySelector(CSS selectors)
參數值
<body> <p>這是一個 p 與元素。</p> <p>這也是一個 p 與元素。</p> <p>點擊按鈕修改文檔中第一個 p 元素的背景顏色。</p> <button onclick="myFunction()">點我</button> <script> function myFunction() { document.querySelector("p").style.backgroundColor = "red"; } </script> </body>
多選擇器時：
其他選擇器：
常見的其他獲取元素的方法有3種，分別是通過
元素ID、通過
標簽名字和通過
類名字來
獲取。
1.DOM提供了一個名為 getElementById的方法，這個方法將返回一個與之對應id屬性的節點對象，它是document對象特有的函數，只能通過其來調用該方法，使用方法如下:document.getElementById('idName');
2.
getElementsByTagName方法返回一個對象數組（准確的說是HTMLCollection集合）,返回元素的順序是它們在文檔中的順序,傳遞給 getElementsByTagName() 方法的字符串可以不區分大小寫,使用方法如下:document.getElementsByTagName(tagName);
3.DOM還提供了
getElementsByClassName方法來獲取指定class名的元素,該方法返回文檔中所有指定類名的元素集合，作為 NodeList 對象。NodeList 對象代表一個有順序的節點列表。NodeList 對象 我們可通過節點列表中的節點索引號來訪問列表中的節點(索引號由0開始), 所以有時使用時要指定下標，使用方法如下:document.getElementsByClassName('className');
1 比較： 2 獲取頁面I屬性D為test的元素： 3 document.getElementById("test"); 4 //or 5 document.querySelector("#test"); 6 document.querySelectorAll("#test")[0];
1 獲取頁面class屬性為”red”的元素: 2 document.getElementsByClassName('red') 3 //or 4 document.querySelector('.red') 5 //or 6 document.querySelectorAll('.red')
由於querySelector是按css規范來實現的，所以它傳入的字符串中第一個字符不能是數字.
querySelector() 方法返回匹配指定 CSS 選擇器元素的第一個子元素 。 該方法只返回匹配指定選擇器的第一個元素。如果要返回所有匹配元素，需要使用 querySelectorAll() 方法替代．
query選擇符選出來的元素及元素數組是靜態的，而getElement這種方法選出的元素是動態的。靜態的就是說選出的所有元素的數組，不會隨着文檔操作而改變．
所以 在使用的時候getElement這種方法性能比較好，query選擇符則比較方便．
<div id="test1">
<a href="http://www.bilibili.com/">嗶哩嗶哩</a>
<a href="http://www.acfun.com/">ACfun</a>
<a href="http://www.niconico.com/">泥扣泥扣</a>
</div>
<pid="bar">111</p>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
var d1 = document.getElementById('test1'),
obj1 = d1.querySelector('div a'),
obj2 = d1.querySelectorAll('div a');
obj3 = $(d1).find('div a');
console.log(d1) //DOM結構
console.log(obj1) //<a href="http://www.bilibili.com/">嗶哩嗶哩</a>
console.log(obj2.length) //3
console.log(obj2)
console.log(obj2[2])
console.log(obj3) //null
</script>
getElementById獲得一個DOM結構，注意querySelectorAll返回的是一個NodeList，不是一個數組，不是一個可觀的DOM結構，可以試下打印obj2，只有加上下標可返回對應元素。
記住不能通過下面這樣的forEach遍歷：
document.querySelectorAll('div a').forEach(function() {
});
要想循環遍歷querySelectorAll返回的結果，對於一個NodeList，我們可以用下面的技巧來循環遍歷它：
(利用回調函數轉換this，原因在下一篇博客專門來解釋)
var divs = document.querySelectorAll('div');
var divs = document.querySelectorAll('div');
[].forEach.call(divs, function(div) {
// do whatever
div.style.color = "red";
});
// do whatever
div.style.color = "red";
});
當然，我們也可以用最傳統的方法遍歷它：
var divs = document.querySelectorAll('div'), i;
var divs = document.querySelectorAll('div'), i;
for (i = 0; i < divs.length; ++i) {
divs[i].style.color = "green";
}
divs[i].style.color = "green";
}
還有一種更好的方法，就是自己寫一個：
// forEach method, could be shipped as part of an Object Literal/Module
var forEach = function (array, callback, scope) {
for (var i = 0; i < array.length; i++) {
callback.call(scope, i, array[i]); // passes back stuff we need
}
};
// forEach method, could be shipped as part of an Object Literal/Module
var forEach = function (array, callback, scope) {
for (var i = 0; i < array.length; i++) {
callback.call(scope, i, array[i]); // passes back stuff we need
}
};
// 用法:
// optionally change the scope as final parameter too, like ECMA5
var myNodeList = document.querySelectorAll('li');
forEach(myNodeList, function (index, value) {
console.log(index, value); // passes index + value back!
});
// optionally change the scope as final parameter too, like ECMA5
var myNodeList = document.querySelectorAll('li');
forEach(myNodeList, function (index, value) {
console.log(index, value); // passes index + value back!
});
還有一種語法：for..of 循環，但似乎只有Firefox支持：
/* Be warned, this only works in Firefox */
/* Be warned, this only works in Firefox */
var divs = document.querySelectorAll('div );
for (var div of divs) {
div.style.color = "blue";
}
div.style.color = "blue";
}
---------------------
作者：Lawliet_ZMZ
來源：CSDN
原文：https://blog.csdn.net/major_zhang/article/details/78118823
作者：Lawliet_ZMZ
來源：CSDN
原文：https://blog.csdn.net/major_zhang/article/details/78118823