到 javascript 数组的 div 列表（没有 jquery）

Question

I'm wondering how i can convert a list of html divs into a javascript array? So here is the html code i have

<div class="colors">
    <div>Red</div>
    <div>Blue</div>
    <div>Orange</div>
    <div>Green</div>
</div>

so now i want to convert the divs that is inside the first div to a javascript array. How can i do this?

Answer 1

You can use the document.querySelectorAll and then create an array from them through Array.from method:

 console.log(Array.from(document.querySelectorAll('.colors div')));

 <div class="colors"> <div>Red</div> <div>Blue</div> <div>Orange</div> <div>Green</div> </div>

Answer 2

Fairly easy to do - convert the NodeList of the divs to an array, then map the innerText :

 var divArray = Array.prototype.slice.call(document.querySelectorAll(".color div")); divArray = divArray.map(e => e.innerText); console.log(divArray);

 <div class="colors"> <div>Red</div> <div>Blue</div> <div>Orange</div> <div>Green</div> </div>

Or if you want the actual div elements - not their text, eliminate this line:

divArray = divArray.map(e => e.innerText);