I have looked at almost every question that has been asked here about htmlcollection.

So I have a div and I am fetching data and creating divs inside this div with ajax so they are not hardcoded.

this is how div look like before I fetch the data

    <div id="tivvits"></div>

this is how div#tivvits looks like after I call function show_all_tivvits(); show_all_tivvits() is a function where I create a ajax request and create new divs such as div#tivvit-21, div#tivvit-22, etc.

    <div id="tivvits">
        <div id="tivvit-19" class="grid-container">...</div>
        <div id="tivvit-20" class="grid-container">...</div>
    </div>

this is part of the js file

    document.addEventListener("DOMContentLoaded", function(){
    
        show_all_tivvits();
        var t = document.getElementById('tivvits');
        const j = t.getElementsByClassName("grid-container");
        const k = Array.prototype.slice.call(j)
        console.log(k);
        for (var i = 0; i < k.length; i++) {
            console.log(k[i]);
        }

    });

what I wanted to do in show_all_tivvits() function is I want to get the divs that are already in the div#tivvits and that way I am not gonna create them again but the problem is when I use console.log() to print out document.getElementById('tivvits').getElementsByClassName('grid-container') there are items in the htmlcollection but when I print out length it returns 0.

one more thing when I open inspect>source in chrome my index.php doesn't have updated div#tivvits. I have tried almost every way to loop this htmlcollection but it is not working.

list of things I have tried;

Array.from(links)

Array.prototype.slice.call(links)

[].forEach.call(links, function (el) {...});

HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

HTMLCollection.prototype.forEach = Array.prototype.forEach;

I have looked at almost every question that has been asked here about htmlcollection.

So I have a div and I am fetching data and creating divs inside this div with ajax so they are not hardcoded.

this is how div look like before I fetch the data

    <div id="tivvits"></div>

this is how div#tivvits looks like after I call function show_all_tivvits(); show_all_tivvits() is a function where I create a ajax request and create new divs such as div#tivvit-21, div#tivvit-22, etc.

    <div id="tivvits">
        <div id="tivvit-19" class="grid-container">...</div>
        <div id="tivvit-20" class="grid-container">...</div>
    </div>

this is part of the js file

    document.addEventListener("DOMContentLoaded", function(){
    
        show_all_tivvits();
        var t = document.getElementById('tivvits');
        const j = t.getElementsByClassName("grid-container");
        const k = Array.prototype.slice.call(j)
        console.log(k);
        for (var i = 0; i < k.length; i++) {
            console.log(k[i]);
        }

    });

what I wanted to do in show_all_tivvits() function is I want to get the divs that are already in the div#tivvits and that way I am not gonna create them again but the problem is when I use console.log() to print out document.getElementById('tivvits').getElementsByClassName('grid-container') there are items in the htmlcollection but when I print out length it returns 0.

one more thing when I open inspect>source in chrome my index.php doesn't have updated div#tivvits. I have tried almost every way to loop this htmlcollection but it is not working.

list of things I have tried;

Array.from(links)

Array.prototype.slice.call(links)

[].forEach.call(links, function (el) {...});

HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

HTMLCollection.prototype.forEach = Array.prototype.forEach;

• javascript
• html
• dom
• htmlcollection

Share Improve this question Follow edited Dec 11, 2020 at 20:03 ahmetkca asked Dec 11, 2020 at 19:41 ahmetkcaahmetkca 63722 gold badges1212 silver badges2626 bronze badges 6

• why by id and also class? That doesn't make sense at all – Aalexander Commented Dec 11, 2020 at 19:42
• Just use let links = document.querySelectorAll(".grid-container"); links.forEach(link => {console.log(link)}) – ptothep Commented Dec 11, 2020 at 19:45
• @Alex i was thinking since they are child of div#tivvits that's why I did that. So you are suggesting that I can do document.getElementsByClassName('grid-container') right? – ahmetkca Commented Dec 11, 2020 at 19:46
• imo you should make a tivvits object, which has get, render, show methods then store the values/ponent in an array which you can check before render, you're trying to do too much in one or two functions – Lawrence Cherone Commented Dec 11, 2020 at 19:47
• No I would say use something like pthohtep has mentioned document.querySelectorAll will do a good hob – Aalexander Commented Dec 11, 2020 at 19:48

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 3

It's not really clear, but are you looking for something like this?

targets = document.querySelectorAll('#tivvits > .grid-container')
for (let target of targets)
  {console.log(target.id)}

This should select all <div> nodes which are direct children of the <div id="tivvits"> node and have a class attribute with the value "grid-container", and extract from them the attribute value of the id attribute.

The world has moved on.

The older versions

const arrayLikeCollection = Array.prototype.slice.call(htmlCollection) 

and

[].forEach.call(htmlCollection, function (el) {...});

could be written

[...htmlCollection].arrayMethod(....)

Then we got an update to htmlCollection so it supported .forEach out of the box. However the OTHER array methods like map, filter, some and every still needs the hmtlCollection to be cast to an arrayLike collection.

In 2024, the consensus is to use Array.from due to the very descriptive name.

It is my method of choice too now, since the array spread can generate annoying errors if your statement on the line above does not have a semicolon:

const collection = document.querySelectorAll('.someClass')
[...collection].someMethod(...) // the [] is seen as belonging to the line before

So here is the currently remended way

window.addEventListener("DOMContentLoaded", () => { // when the elements are available
  const getIds = () => {
    const gridContainers = document.querySelectorAll("#tivvits .grid-container");
    const ids = Array.from(gridContainers).map(div => div.id);
    return ids;
  };
  const idsAtLoadTime = getIds(); // can be called elsewhere, like at the end of an AJAX call
  console.log(idsAtLoadTime)
});

<div id="tivvits">
  <div id="tivvit-19" class="grid-container">...</div>
  <div id="tivvit-20" class="grid-container">...</div>
</div>

The HTMLCollection object has a method - item() which can be used to loop through the elements in the collection. The item() method returns the element located at the specified offset from the collection. Example:

const gridContainers = document.getElementsByClassName("grid-container");

for (let i = 0; i < gridContainers.length; i++) {
    console.log(gridContainers.item(i));
}