Array question

[xilovemusic123x]

I have a bunch of DIVs inside a container DIV and I want to get the number of divs inside the container div dynamically (since the # of divs could change). Could I do this with arrays?

<div class="container">
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
</div>

Thanks a bunch!

[magicyte]

<div class="container" id="container">
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
</div>
<script type="text/javascript">
window.onload = function() {
    var numDivs = document.getElementById("container").getElementsByTagName("div").length;
    alert(numDivs);
};
</script>

Edit: Fixed typo.

[jscheuer1]

You can't actually use arrays, no. But the code presented by magicyte is a workable approach to this issue (even though it has at least one typo). However, it doesn't use arrays. It uses a nodeList. A nodeList varies from an array in that, once it is established, if something in the document tree changes that affects it, it will be automatically updated. A pure array, once established, will not change unless you directly alter it.

Now, to be clear (hopefully), in magicyte's code numDivs will not change if the DOM tree is changed. But if you set like:

var mydivs = document.getElementById("cont").getElementsByTagName("div");

Assuming there is an element with the id 'cont' (that's the typo in magicyte's code, there is no such element), then if that list of divisions changes, so will the mydivs variable.

[xilovemusic123x]

Oh right I forgot all about tagnames. Thanks a ton both of you!

[Twey]

There are other differences between NodeLists and Arrays too. A NodeList, for example, does not have the methods prototyped onto Arrays, such as slice().

[jscheuer1]

There are other differences between NodeLists and Arrays too. A NodeList, for example, does not have the methods prototyped onto Arrays, such as slice().

A good point. A nodeList is not an array. It can be parsed like one (as long as one doesn't alter it in the process), but that's about it.

But if one understands the differences, there can be advantages in the nodeList, as well as in the array. By simply taking advantage of each one's characteristics and working with them, either can be a powerful tool. For example, a nodeList's characteristic of being constantly updated can be utilized in some interesting ways. But, at the most basic level they both are roughly equivalent in nature. Also, a nodeList may be used to generate a true array. Unfortunately - at least as far as I know, the reverse is not the case.

[Twey]

A good point. A nodeList is not an array. It can be parsed like one (as long as one doesn't alter it in the process), but that's about it.

Specifically, the only things they share are numerically-indexed elements and a dynamically updated length property.

Also, a nodeList may be used to generate a true array. Unfortunately - at least as far as I know, the reverse is not the case.

Well, a NodeList needs to be attached to a DOM object. The handiest would seem to be a document fragment:

var Dom = {
  arrayToNodeList: function(arr) {
    var frag = document.createDocumentFragment();

    for (var i = 0, e; e = arr[i]; ++i)
      frag.appendChild(e);

    return frag.childNodes;
  }
};

[jscheuer1]

Another tool for the arsenal.