other ways to pull values from a nodelist of html elements-CodePudding

So, I'm creating an e-commerce page and I have an event when the purchase button is clicked to pull all the names (and quantities) of the items. I'm doing this to eventually check their inventory availability in the DB but this is irrelevant for my question.

I've finally figured out how to get those said item names into an Array. However, the code I found to work seems strange at first glanced. I was wondering if anyone could think of other ways of doing this just for the sake of my curiosity and maybe something that's more sensible to look at for a somewhat amateur programmer like myself

I suppose I should say specifically the [].map.call( section is what looks strange to me... So you're creating an empty array and calling map which is applying a function to every element of the array. then the .call (which is the part where the confusion is sort of coming up) is used to assign a this keyword to the first parameter and the 2nd parameter is the function to grab the value. so is call simply used to assign this to be able to iterate over the nodelist?

here is a mock up html of the cart:

<div >
                <div >
                    <img  src="Images/Shirt.png" width="100" height="100">
                    <span >T-Shirt</span>
                </div>
                <span >$19.99</span>
                <div >
                    <input  type="number" value="1">
                    <button  type="button">REMOVE</button>
                </div>
            </div>
            <div >
                <div >
                    <img  src="Images/coffee_cup.png" width="100" height="100">
                    <span >Coffee Cup</span>
                </div>
                <span >$9.99</span>
                <div >
                    <input  type="number" value="2">
                    <button  type="button">REMOVE</button>
                </div>
            </div>

and here is the JS I used to pull the item titles from the nodelist:

const titlesArray = [].map.call(
  cartItemsContainer.querySelectorAll(".cart-item-title"),
  function (el) {
    return el.innerText;
  }

CodePudding user response：

As you know, nodelist is not an array and just a collection of nodes. So, you cant call array methods on a nodelist but as @Barmar said you can convert a nodelist to array. By this means you are capable to use array methods. When you look at MDN document, you can see that "forEach" method works on nodelist. As an example to reach dom elements and write them to an array:

const yourArray = []
document.querySelectorAll('.cart-item-title').forEach((elem, index) =>  {
console.log('Title '   (index   1)   ': ' ,elem)
yourArray.push(elem.textContent)
})
console.log('with forEach method : ', yourArray)

const myArray = Array.from(document.querySelectorAll('.cart-item-title')).map(elem => elem.textContent)
console.log('with map method : ', myArray)

<div >
    <div >
        <img  src="Images/Shirt.png" width="100" height="100">
        <span >T-Shirt</span>
    </div>
    <span >$19.99</span>
    <div >
        <input  type="number" value="1">
        <button  type="button">REMOVE</button>
    </div>
</div>
<div >
    <div >
        <img  src="Images/coffee_cup.png" width="100" height="100">
        <span >Coffee Cup</span>
    </div>
    <span >$9.99</span>
    <div >
        <input  type="number" value="2">
        <button  type="button">REMOVE</button>
    </div>
</div>