The Difference Between Class and ClassName
From Stack Overflow:
Let's break this into answerable parts:
The title question.
A1: Attribute v. Property
Class is an attribute in an html element
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
.setAttribute('class', 'classy'). We manipulate classes so often, however, that it merited its own
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.
A2: 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 the original question had 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.
Also what's the best way to return a list of children of a particular class name for a generic object?
A3: Use .getElementsByClassName
Rather than using a purpose-made function, people frequently "chain" methods one-after-another to achieve the desired end-effect.
Based on the question's needs, I think he's 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 the question:
comments powered by Disqus
var li = document.createElement('li'); var input = document.createElement('input'); input.setAttribute('class','answer_input'); li.appendChild(input); console.log(li.getElementsByClassName("answer_input")); // would return the <input class='answer_input'> as the first element of the HTML array