I am trying to check whether the a css class is used inside the DOM or not. So, I have

var x = document.getElementsByClassName('classname');

When I print x out, I get a [object NodeList] for classes that exist on the page and classes that dont. Is there a property of x that I can access ? Like the tag name or something. Would be great if somebody can tell me the different properties of x and the ways I can access them.

Thank you :)

I am trying to check whether the a css class is used inside the DOM or not. So, I have

var x = document.getElementsByClassName('classname');

When I print x out, I get a [object NodeList] for classes that exist on the page and classes that dont. Is there a property of x that I can access ? Like the tag name or something. Would be great if somebody can tell me the different properties of x and the ways I can access them.

Thank you :)

• javascript
• css
• dom

3 Answers 3

Notice that it's plural:

var x = document.getElementsByClassName('classname');
                           ^

You need to iterate over x to get the individual elements:

for (var i = 0; i < x.length; i++) {
  var element = x[i];

  console.log(element);
}

Make sure to add fallback support for Internet Exploder: http://ejohn/blog/getelementsbyclassname-speed-parison/

If you just want to check for the presence of a class in the document, you can also use querySelector.

var x = document.querySelector('.classname');

It returns null if no elements have that class, otherwise the first element with that class name. If you want all elements using classname:

var x = document.querySelectorAll('.classname');

Now x is null if the class is not used in the document, otherwise a Nodelist, containing all elements with class classname, which can be iterated the way Blender showed. In that iteration you can, for example, retrieve the elements tagName or its id. Like:

for (var i=0;i<x.lenght;(i=i+1)){
   console.log(x[i].id + ': ' + x[i].tagName);
}

document.querySelector is available in all modern browsers, and for IE version 8 and up.

I almost always use document.querySelector (which: "Returns the first element within the document that matches the specified group of selectors"), which returns an element object and it's.

I don't know why but in my Chrome's console I write:

var img = document.getElementsByClassName('image__pic');
img[0]...

img[0], despite its happy existance, it doesn't generate any further attributes/methods to use in the pletion window. Like there were none (even though I could use img[0].src for instance)

On the other hand:

var imgq = document.querySelector('.image__pic')

Gives me very useful autopletion on the Console:

As far as its browser support it is phenomenal:

It is also less tricky to use, because getElementsByClassName returns an HTMLCollection, which is a little beast of its own.

Another plus for querySelector is its versatility: any kind of CSS selector goes!

On the negative side, querySelector is a bit slower, but I think it's worth it.