Using Object.prototype.toString.call() to return object type with Javascript - not working in IE

Question

Hopefully I can ask this in an understandable way...

Overall, I am trying to determine what type of object I am currently dealing with.

I'm creating a collection (HTML is example, not literal) and I need to filter my collection to certain elements eg:

        <div id="tabContentWrap">
            <div id="tab">
                <a href="http://somelink">Link Element</a><img src="img.jpg" alt="img" />
                <select id="my_select"><option value="1">1</option></select>
            </div>
        </div>

function getFilteredElements() {
    var tabContent = getElementsByClass("tabContentWrap", document.getElementById(tabWrapId), "div");

    for (var j = 0; j < tabContent.length; j++){
        tabContentLinks = tabContent[j].getElementsByTagName('*');
        for (var k = 0; k < tabContentLinks.length; k++){
            // Here i attempt to filter the collection
            if (tabContentLinks[k] == '[object HTMLSelectElement]') {
                alert("found select list");
            }
         }
     }
 }

Which works fine in Mozilla but not in Internet Explorer 8, tabContentLinks[k] returns [object] instead of [object 'ObjectType']

So I investigated and discovered that you can use Object.prototype.toString.call(object) to get the object type, which again works fine in Mozilla but returns [object Object] in IE8...

I call

get_type(tabContentsLink[k]);

which runs the following function:

function get_type(thing){
    if (thing === null) return "[object Null]";
    // special case
    return Object.prototype.toString.call(thing);
}

But this just returns [object Object]

Does Object.prototype.toString.call() ever return the type of object in IE or am I very far off and barking up a lamppost instead of a tree?

Solution 1

Well, first of all I want to tell you that Object.prototype.toString returns the value of the object's internal [[Class]] property, it isn't really a Type.

The value of this internal property represents the specification defined classification of an object (more info here).

Javascript has only 6 language types: Object, String, Number, Boolean, Null and Undefined, that's it.

The value of the [[Class]] internal property for host objects -as DOM elements- can be anything, it is completely implementation-dependent, on built-in objects is safe to use it -except with some exceptions in IE as @Alex pointed out in the article linked in his answer-.

You are working with DOM elements, and you want to figure out what kind of node it is, my suggestion to this, is to simply use the nodeName property _{(please avoid using tagName)}.

The nodeName property contains the name of the node you are dealing it, in upper case, therefore you could use it as this:

function getFilteredElements() {
  var tabContent = getElementsByClass("tabContentWrap", 
  document.getElementById(tabWrapId), "div");

  for (var j = 0; j < tabContent.length; j++){
    tabContentLinks = tabContent[j].getElementsByTagName('*');
    for (var k = 0; k < tabContentLinks.length; k++){
      // Here i attempt to filter the collection
      if (tabContentLinks[k].nodeName == 'SELECT') { // <- SELECT elements
        alert("found select list");
      }
    }
  }
}

Solution 2

Rather than recreate the entire discussion and possible solutions, I'll just point you to a blog post that discusses this exact issue.