將 Node List 轉換成陣列
querySelectorAll
方法回傳一個類似陣列的物件稱為 Node List。這些資料結構簡稱為「類陣列」,因為他們和陣列很相似,但是不能使用陣列的方法像是 map
和 forEach
。這是快速,安全,可重複使用的方式,將 Node List 轉換成 DOM 元素的陣列:
const nodelist = document.querySelectorAll('div');
const nodelistToArray = Array.apply(null, nodelist);
// 之後 ..
nodelistToArray.forEach(...);
nodelistToArray.map(...);
nodelistToArray.slice(...);
// 等等...
apply
方法將參數陣列傳送給一個函式與給定 this 的值。根據 MDN ,apply
採用類陣列物件,而這剛好就是 querySelectorAll
方法所回傳的內容。如果我們不需要在函式的上下文(context)中指定 this
,我們可以傳送 null
或 0
。這個結果實際上是一個 DOM 元素陣列,包含所有可用的陣列方法。
或者,假設你使用 ES2015 你可以使用展開運算符 ...
。
const nodelist = [...document.querySelectorAll('div')]; // 回傳一個實際的陣列
// 之後 ..
nodelist.forEach(...);
nodelist.map(...);
nodelist.slice(...);
// 等等...
MEET THE NEW JSTIPS BOOK
You no longer need 10+ years of experience to get your dream job.
Use the 100 answers in this short book to boost your confidence and skills to ace the interviews at your favorite companies like Twitter, Google and Netflix.
GET THE BOOK NOW
MEET THE NEW JSTIPS BOOK
The book to ace the JavaScript Interview.
A short book with 100 answers designed to boost your knowledge and help you ace the technical interview within a few days.
GET THE BOOK NOW