Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <blockquote> <p>Does the browser instantiate a new nodeList object for every pass through the loop or does the browser simply refer to a single generated list every time;</p> </blockquote> <p>You can test this easily by testing whether two calls to <code>getElementsByTagName</code> return the same object:</p> <pre><code>document.getElementsByTagName('div') === document.getElementsByTagName('div') // true </code></pre> <p>It seems that calling this method with the same argument does indeed return the same <code>NodeList</code> object (in Firefox and Chrome at least). <strong>It does not generate a new list every time</strong>. </p> <p>So you might think that calling it in the loop over and over again won't make a difference. However, as I see it, there are multiple reasons why would want to store the list in a variable:</p> <ul> <li><p>You have an unnecessary function call in each loop.</p></li> <li><p>You don't know what actually happens behind the scenes. Even though the same object is returned, the might be procedures running which make sure that the list reflects the current state of the document, which would not happen if you didn't call the function.</p></li> <li><p>Most importantly: <a href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-A6C9094" rel="nofollow">The DOM specification</a> doesn't seem to require that the same list is to be returned. That it does in Firefox and Chrome (where I tested it) might just be an implementation detail, so I wouldn't rely on this behavior. In fact, the specification explicitly states to return a <em>new</em> list:</p> <blockquote> <p>Return Value: A new NodeList object containing all the matched Elements.</p> </blockquote></li> </ul> <hr> <blockquote> <p>I've been wondering if its better to store the nodeList object to a variable and reference it when needed.</p> </blockquote> <p>Yes it is. You don't even have to call <code>getElementsByTagName</code> again when elements are added or removed because the returned <code>NodeList</code> is <em>live</em>, i.e. any changes made to the document are directly reflected in the list, without you having it to update explicitly.<br> Certain operations, like accessing the <code>length</code> of the list will also trigger a reevaluation. So, additionally to storing the list in a variable, you might want to cache the length as well:</p> <pre><code>var nodes = object.getElementsByTagName(tagName); for (var index = 0, l = nodes.length; index &lt; l; index++) { nodes[index].property = value; } </code></pre> <p>This can be very handy or very confusing, depending on what you need. If you only want a list of nodes that exist at the moment the function is called, you have to convert the NodeList to an array:</p> <pre><code>var nodes = Array.prototype.slice.call(object.getElementsByTagName(tagName), 0); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload