What is the difference between class and classname in javascript?

Question

In order to find children objects of a certain class name, I had to create my own helper function

findChildrenByTagName = function(obj, name){
    var ret = [];
    for (var k in obj.children){
        if (obj.children[k].className === name){
            ret.push(obj.children[k]);
        }
    }
    return ret;
}

An example of how it works is

var li = document.createElement('li');
var input = document.createElement('input');
input.setAttribute('class','answer_input');
li.appendChild(input);
console.log(findChildrenByTagName(li,"answer_input"));

However when I replace className above by class in the function above, the code doesn't work. So I am naturally wondering what the difference is between class and className. A quick search on google doesn't reveal anything.

Also what's the best way to return a list of children of a particular class name for a generic object? If such doesn't exist, is there a way to add a method to all objects so that I can call

li.findChildrenByTagName("answer_input");

instead of the global function above?

Because "class" is a reserved word in JavaScript, the name of the corresponding property for the "class" attribute is `className`. This applies only if you are accessing it as an object property. — BatScream, Jan 03 '15 at 06:45
Thanks BatScream. Can you give some examples to illustrate waht you mean by "name of the corresponding property" versus "attribute"? — John Jiang, Jan 03 '15 at 06:52
When you use `input.setAttribute("class",value)`, it won't be a problem because here you are not accessing the javascript keyword. But when you try to access it as a property of an javascript object as in `children[k].class`, that becomes invalid. — BatScream, Jan 03 '15 at 06:54

score 31 · Accepted Answer · edited Jun 20 '20 at 09:12

Let's break this into answerable parts:

Question 1:

What is the difference between class and classname in javascript?

Your title question.

Answer 1:

Class is an attribute in an html element <span class='classy'></span>

While, on the other hand, .className is a property that can by called on an element to get/set its class.

var element = document.createElement('span');
element.className = 'classy'
// element is <span class='classy'></span>

Setting the class can also be accomplished with .getAttribute('class') and .setAttribute('class', 'classy'). We change manipulate classes so often, however, that it merited its own .className method.

Question 2:

However when I replace className above by class in the function above, the code doesn't work. So I am naturally wondering what the difference is between class and className.

Answer 2: element.class is not a property.

Class may be an attribute of an element, but you can't call it like el.class. The way you do it is by el.className, like you already figured out. If you look at the MDN for Element, you'll see that elements have many properties and methods, but .class isn't one.

enter image description here

Question 3:

Also what's the best way to return a list of children of a particular class name for a generic object?

Answer 3: Use .getElementsByClassName

Rather than using a purpose-made function, people frequently "chain" methods one-after-another to achieve your desired effect.

Based on your needs, I think you're asking for the .getElementsByClassName method. Here are the full docs and an excerpt:

The Element.getElementsByClassName() method returns returns a live HTMLCollection [array] containing all child elements which have all of the given class names.

To reuse the example from your answer:

var li = document.createElement('li');
var input = document.createElement('input');
input.setAttribute('class','answer_input');
li.appendChild(input);
console.log(li.getElementsByClassName("answer_input")[0]);
// would return the <input class='answer_input'> as the first element of the HTML array

Thank you for the wonderful and comprehensive explanations! I often found getElementsByTagName when I search for select child elements by class name. — John Jiang, Jan 03 '15 at 17:15

score 2 · Answer 2 · edited May 23 '17 at 10:30

2

Don't get confused between the reserved word 'class' and 'className' attribute of DOM element.

According to MDN:

The name className is used for this property instead of class because of conflicts with the "class" keyword in many languages which are used to manipulate the DOM.

EDIT: The 'class' word used on js 1.0 but in js 2.0 was merged with ECMAScript 4 which was rather unpopular and depreciated. but it is still a reserved word.

edited May 23 '17 at 10:30

Community

1
1

answered Jan 03 '15 at 06:49

Or Duan

13,142
6
60
65

3

['class' **is** a reserved word in JS](http://stackoverflow.com/a/7524648/497418). – zzzzBov Jan 03 '15 at 07:02

score 0 · Answer 3 · edited May 19 '23 at 14:35

0

The general concept is that class is an object and className is "one" of its properties. Refer to the links on how to use the class attribute for manipulation. Kindly correct me if my perception/understanding is wrong.

https://www.w3schools.com/jsref/prop_html_classname.asp https://www.w3schools.com/jsref/prop_element_classlist.asp

edited May 19 '23 at 14:35

Jasperan

2,154
1
16
40

answered Sep 06 '17 at 07:39

NIV

458
4
19

What is the difference between class and classname in javascript?

3 Answers3

Question 1:

Answer 1:

Question 2:

Answer 2: element.class is not a property.

Question 3:

Answer 3: Use .getElementsByClassName

Linked