How to detect HTMLCollection/NodeList in JavaScript?

htmlcollection vs nodelist
nodelist to array
nodelist foreach
nodelist map
htmlcollection foreach
nodelistof
htmlcollection childnodes
get value from nodelist javascript

I'm not sure my current implementation is available all the time:

function isNodeList(nodes) {
    var result = Object.prototype.toString.call(nodes);
    // modern browser such as IE9 / firefox / chrome etc.
    if (result === '[object HTMLCollection]' || result === '[object NodeList]') {
        return true;
    }
    //ie 6/7/8
    if (typeof(nodes) != 'object') {
        return false;
    }
    // detect length and item 
    if (!('length' in nodes) || !('item' in nodes)) {
        return false;
    }
    // use the trick NodeList(index),all browsers support
    try {
        if (nodes(0) === null || (nodes(0) && nodes(0).tagName)) return true;
    }
    catch (e) {
        return false;
    }
    return false;
}

A common situation is {length:1,item:function(){return [];}} The value of result in chrome / safari / opera is '[object NodeList]'. In firefox and IE 9 , it is '[object HTMLCollection]'.

Which is the standard value?

The following should return true, if nodes is of type NodeList

NodeList.prototype.isPrototypeOf(nodes)

@DavidSpector, for HTMLCollection you can similarly use :

HTMLCollection.prototype.isPrototypeOf(collection)

JavaScript DOM Nodelist, A NodeList and an HTML collection is very much the same thing. Both an HTMLCollection object and a NodeList object is an array-like list (collection) of objects. The document.getElementsByTagName () method can be used to extract an HTMLCollection from the DOM. The length property returns the total number of elements inside an HTMLCollection object. You can either use the simple for loop (for old browsers) or the forof statement to iterate over the collection elements.

NodeList, Okay let's try one of the getElementBy% methods and check what is To convert the NodeList or HTMLCollection object to a javascript array,  The JavaScript node list is a collection of DOM elements. The NodeList can be live or static, which means that modifications to the DOM are either automatically applied to collections or do not affect them at all. In this tutorial, you will learn all about JavaScript NodeList, what it is and how to navigate it.

script:

Element.prototype.isNodeList = function() {return false;}
NodeList.prototype.isNodeList = HTMLCollection.prototype.isNodeList = function(){return true;}

use like this:

var d; // HTMLCollection|NodeList|Element
if(d.isNodeList()){
  /*
    it is HTMLCollection or NodeList
    write your code here
  */
}else{
  /*
    it is not HTMLCollection and NodeList
    write your code here
  */
}

HTMLCollection, NodeList and array of objects, The JavaScript node list is a collection of DOM elements. The NodeList can be live or static, which means that modifications to the DOM are  The Difference Between an HTMLCollection and a NodeList. An HTMLCollection (previous chapter) is a collection of HTML elements. A NodeList is a collection of document nodes. A NodeList and an HTML collection is very much the same thing. Both an HTMLCollection object and a NodeList object is an array-like list (collection) of objects.

Here is how to test if an object is a NodeList in modern browsers:

if (nodes instanceof NodeList) {
  // It's a NodeList object
}

Tutorial on JavaScript NodeList: NodeList vs. HTMLCollection, https://stackoverflow.com/questions/7238177/how-to-detect-htmlcollection-​nodelist-in-javascript. */. Element.prototype.isNodeList = function () {. return false;. };. Then you just do a true/false type check to see if you got a valid object. In your case, I would get a reference to the select item like you are now, and then use its getOptions() method to get an HTMLCollection that represents the options. This object type is very similar to a NodeList, so you should have no problem working with it.

Check if variable is an HTMLcollection or a dom element

  var foo = document.getElementById('mydiv');
  var foo2 = document.getElementsByClassName('divCollection');
  console.log(foo instanceof HTMLElement);
  console.log(foo instanceof HTMLCollection);

How to detect HTMLCollection/NodeList in JavaScript. · GitHub, The main difference between an HTMLCollection and a NodeList is that is appended to the DOM, a live node will recognize the new element… First I will explain the difference between NodeList and HTMLCollection. Both interfaces are collections of DOM nodes. They differ in the methods they provide and in the type of nodes they can contain. While a NodeList can contain any node type, an HTMLCollection is supposed to only contain Element nodes.

HTMLCollection vs NodeList - Celeste Layne, It'll return a string like "[object HTMLCollection]" or "[object NodeList]" . [see JS: Determine Type of Object]. Even Browsers and W3C Are  As of Dec. 2017, this capability works in Edge 41.16299.15.0 for a nodeList as in document.querySelectorAll(), but not an HTMLCollection as in document.getElementsByClassName() so you have to manually assign the iterator to use it in Edge for an HTMLCollection. It is a total mystery why they'd fix one collection type, but not the other.

DOM: NodeList vs HTMLCollection, These days that I have been working with javascript for DOM Cover image for Difference between HTMLCollection and NodeList At first hand the HTMLCollection updates itself automatically every time it detects a change  The HTMLCollection Object. An HTMLCollection object is an array-like list of HTML elements. Methods like the getElementsByTagName() returns an HTMLCollection.

Difference between HTMLCollection and NodeList - DEV, These article goes into details of NodeLists and HTMLCollections. In case you want to read more about these I recommend to check out the  Previously answered questions here said that this was the fastest way: //nl is a NodeList var arr = Array.prototype.slice.call(nl); In benchmarking on my browser I have found that it is more than 3

Comments
  • How to check if an object is an instance of a NodeList in IE?
  • @Matt Ball -- typeof nodes.item returns 'string' in ie6,not 'function'.so we need more detection.
  • Yes, but this doesn't answer the question: how to tell if an object is an HTML Collection.
  • occasionally getting this error live: '0.nodeType' is null or not an object . any idea what could have slipped through?
  • why even have the return true/false… just return the value you're testing in the if. i.e. remove the if statement + returns and just replace it with return.
  • nodes.hasOwnProperty('length') returning false in Chrome for me. maybe typeof nodes.length === 'number' is better?
  • @MaxGJPanas Yes, that worked at the time, but apparently things change. I've modified my answer accordingly, thanks for the heads-up.
  • Extremely slow method by the way.
  • @Frondor why so?
  • @Horay I hope this helps.
  • Thanks! Yes it does help! How can I check if it's not instanceof HTMLCollection? Where do I put the (!) exclamation mark?
  • The good solution... thanks. @Horay Probably it's too late, but... if (!(stuff instanceof That)) { ... }
  • It's actually foo instanceof window.HTMLCollection if you use the standard style - standardjs.com