How do I find the classes assigned to an element in javascript (without jQuery)

Question

I have hold of an "A" tag, and I would like to know what classes it's parents have got...so:

<div class="topone">
    <div class="middleone">
        <a href="#" class="thisone">tag</a>
    </div>
</div>

So I've got "thisone", but I want to know if there is a div above it somewhere that has the class of "topone"

...no jquery though, can't use jquery for this

This might help http://stackoverflow.com/questions/6856871/getting-parent-div-of-element-javascript — ramsinb, Sep 06 '12 at 11:05

ThiefMaster · Accepted Answer · 2012-09-06T11:08:30.070

4

You can use the .className property to access an element's class and .parentNode to go to the parent element.

var classes = [];
for(var el = document.getElementById('#yourlink'); el; el = el.parentNode) {
    classes.push(el.className);
}

Note that classes[0] contains the classes of the element itself - but I'm sure it's no problem for you to modify the code accordingly if you do not want that.

edited Sep 06 '12 at 11:08

answered Sep 06 '12 at 11:03

ThiefMaster

310,957
84
592
636

Vishal Suthar · Answer 2 · 2012-09-06T11:24:23.987

1

You can use .parentNode and className properties.

This is the way:

document.getElementById("MyElement").className

Fiddler Demo

edited Sep 06 '12 at 11:24

answered Sep 06 '12 at 11:03

Vishal Suthar

17,013
3
59
105

But where has "MyElement" come from? This doesn't really answer the question – Paul Sep 06 '12 at 11:07

score 0 · Answer 3 · edited Sep 06 '12 at 11:58

0

You can write something like this

give your a tag an id, say bottomone

var e = document.getElementById("bottomone").parentNode.className will give you the class name as middle one.

and for the upper div, you can write

var e = document.getElementById("bottomone").parentNode.parentNode.className

edited Sep 06 '12 at 11:58

nmc

8,724
5
36
68

answered Sep 06 '12 at 11:17

user1651198

31
2
7

but he is not sure where the element is – Gyan Chandra Srivastava Sep 06 '12 at 11:18

score 0 · Answer 4 · answered Sep 06 '12 at 11:26

var element =document.getElementById("topone");      
var liArray = element.childNodes;
      var i=0, item;
    if(element != null)
    {var status=0;
      while (item = liArray[i++]) {
        if (item.nodeType == 1) {
         if(item.className=="thisone"){status=1;}
        }
      }
    if(status==1){alert('it have parent node');}else{alert('it doen`t have parent node');}
    }else{alert('it doesn`t have parent node');}

i have tried at my level as per your requirement may it help you

How do I find the classes assigned to an element in javascript (without jQuery)

4 Answers4