querySelectorAll() 和 getElementBy() 方法的區別

1. querySelectorAll和getElementsBy方法均可以用在element上，可是querySelector做用於Element、nodeList、DocumentFragment時的查找範圍是從整個文檔開始，返回的是一個 Static Node List(對於返回的元素會判斷是否在元素的子樹內，將在 element 子樹內的節點組成 NodeList 返回，返回的順序根據文檔順序定義)，這一點和getElementsBy（返回的是一個 Live Node List）要須要區分開的；
2. getElementById能夠接受一個不合法的id：好比<div id="my.name"></div>用document.querySelectorAll('#my.name')毫無疑問是query不到它的，querySelectorAll 所接收的參數是必須嚴格符合 CSS 選擇符規範的。可是用document.getElementById('my.name')卻能夠
3. 性能上的區別：在Chrome瀏覽器下getElementBy系列的執行速度基本都是高於querySelectorAll，廣泛觀點是getElementBy的性能比querySelectorAll要好不少；
4. querySelectorAll屬於 W3C 中的 Selectors API 規範 [1]。而 getElementBy系列則屬於 W3C 的 DOM 規範 [2]。

整理自：https://www.zhihu.com/question/24702250