What is the difference between class and class name in javascript?

Question

To find the children of a particular 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

 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 with a class in the above function, the code does not work. So I naturally wonder what the difference is between classes and className. A quick google search reveals nothing.

Also the best way to return a list of children of a specific class name for a shared object? If this does not exist, there is a way to add a method to all objects so that I can call

 li.findChildrenByTagName("answer_input"); 

instead of the global function above?

Answer 1

Let me break it down into critical parts:

Question 1:

What is the difference between class and class name in javascript?

The title of the question.

Answer 1:

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

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

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

Setting a class can also be done using .getAttribute('class') and .setAttribute('class', 'classy') . We often change manipulation classes, however, that it deserves its own .className method.

---

Question 2:

However, when I replace className above with a class in the above function, the code does not work. So I naturally wonder what the difference is between class and class Name.

Answer 2: element.class is not a property.

A class may be an attribute of an element, but you cannot name it as el.class . The way you do this is el.className , as you have already figured out . If you look at the MDN for an element , you will see that the elements have many properties and methods, but .class not one.

---

Question 3:

Also the best way to return a list of children of a specific class name for a shared object?

Answer 3: Use .getElementsByClassName

Instead of using the objective function, people often “hook” methods one by one in order to achieve the desired effect.

Based on your needs, I think you are asking for the .getElementsByClassName method. Here are the complete documents and excerpt:

The returned method Element.getElementsByClassName () returns a live HTMLCollection [array] containing all the child elements that have all the specified class names.

Reusing 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 

Answer 2

Do not confuse the reserved word attribute "class" and "className" of the DOM element.

According to MDN :

The className is used for this property instead of the class due to conflicts with the class keyword in many languages ​​that are used to control the DOM. p>

EDIT: The word "class" used in js 1.0, but in js 2.0, was combined with ECMAScript 4 , which was rather unpopular and depreciated. but this is still a reserved word.

Answer 3

The general concept is that a class is an object, and className is “one” of its properties. See the links on how to use the class attribute for manipulation. Bring me back if my perception / understanding is wrong.

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