一.JS獲取DOM元素的方法（8種）
你可以記住,Element加s的是獲取集合
/*通過ID獲取*/ getElementById
/*通過name屬性*/ getElementsByName
/*通過標簽名*/ getElementsByTagName //加了Tag的是獲取標簽名的
/*通過類名*/ getElementsByClassName
/*獲取html的方法*/ document.documentElement
/*獲取body的方法*/ document.body
/*通過選擇器獲取一個元素*/ querySelector
/*通過選擇器獲取一組元素*/ querySelectorAll//用法
//用集合獲取第一個
let box = document.getElementsByClassName('box')[0];
querySelector獲取第一個
let li = document.querySelector('選擇器');
//let li = document.querySelector('.box');
//let li = document.querySelector('li');
//let li = document.querySelector('#logo');
如果是querySelectorAll獲取集合需要遍歷
二.querySelectorAll與getElementByTagName的區別
這兩個方法都是用來獲取元素的DOM方法，不同的是 querySelectorAll 方法回傳的是一個 NodeList 節點串列，而 getElementByTagName 方法回傳的是一個 HTMLCollection 集合，
兩個方法的區別就在于 NodeList 與 HTMLCollection 的區別，
NodeList 是一個靜態物件，從捕獲到這個物件開始，里面的元素就是固定不變的，
HTMLCollection 是一個動態集合，里面的元素是動態變化的，
這么說可能有些人會一頭霧水，舉例說明就一目了然了，上代碼：
<body>
<ul id="demo">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
//獲取id
let ul = document.getElementById('demo');
//獲取標簽集合
let get = ul.getElementsByTagName('li');
// 獲取標簽集合
var quer = ul.querySelectorAll('li');
// 插入元素li
let li1 = document.createElement('li');
ul.appendChild(li1);
console.log(get.length, quer.length); // 5, 4
// 插入元素
let li2 = document.createElement('li');
ul.appendChild(li2);
console.log(get.length, quer.length); // 6, 4
console.log(get,quer); //列印集合進行比較
</script>
</body>querySelectorAll 獲取到的是到這個方法執行為止之前的元素，之后即使再有元素變化，quer中始終只有之前的4個元素，而getElementsByTagName則不同，get里面的元素數量是動態變化的，會隨著實際元素數量的變化而實時更新，
三.querySelector相比getElement(s)在性能上的區別
首先，getElement(s) By 在性能上是劣勢,querySelector在性能上是優勢
getElement(s)By 系列獲取到的集合是動態的，每次訪問都相當于對查詢范圍內進行一次重新查詢，因此就算你避免了死回圈，每次訪問集合時，它在 DOM 查詢這塊仍然會消耗不少時間，
querySelectorAll 獲取到的是一個"快照"，它在訪問時，內容是不會動態更新的，因此它的訪問效率必然更快，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/379193.html
標籤：其他
上一篇：如何異步處理Stream事件并等待所有異步處理在dart中完成？
下一篇：React中的Hooks是什么？