javascript javascript中的类和类名有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27752441/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the difference between class and classname in javascript?
提问by John Jiang
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.
但是，当我在上面的函数中用类替换上面的 className 时，代码不起作用。所以我很自然地想知道 class 和 className 之间有什么区别。在谷歌上快速搜索并没有发现任何东西。
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?
而不是上面的全局函数？
回答by Adam
Let's break this into answerable parts:
让我们将其分解为可回答的部分：
Question 1:
问题 1：
What is the difference between class and classname in javascript?
javascript中的类和类名有什么区别？
Your title question.
你的标题问题。
Answer 1:
答案 1：
Class is an attribute in an html element <span class='classy'></span>
类是 html 元素中的一个属性 <span class='classy'></span>
While, on the other hand, .classNameis a property that can by called on an element to get/set its class.
而另一方面，它.className是一个可以在元素上调用以获取/设置其类的属性。
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 .classNamemethod.
设置类也可以用.getAttribute('class')和来完成.setAttribute('class', 'classy')。然而，我们经常更改操作类，因此它值得拥有自己的.className方法。
Question 2:
问题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.
但是，当我在上面的函数中用类替换上面的 className 时，代码不起作用。所以我很自然地想知道 class 和 className 之间有什么区别。
Answer 2: element.class is not a property.
答案 2： element.class 不是属性。
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 .classisn't one.
Class 可能是一个元素的属性，但你不能像el.class. 你这样做的方式是通过el.className，就像你已经想通了。如果您查看Element的MDN，您会看到元素有许多属性和方法，但.class不是一个。
Question 3:
问题 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
答案 3：使用 .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 .getElementsByClassNamemethod. Here are the full docsand an excerpt:
根据您的需求，我认为您是在要求.getElementsByClassName方法。以下是完整的文档和摘录：
The Element.getElementsByClassName() method returns returns a live HTMLCollection [array] containing all child elements which have all of the given class names.
Element.getElementsByClassName() 方法返回一个实时 HTMLCollection [array]，其中包含所有具有所有给定类名称的子元素。
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
回答by Or Duan
Don't get confused between the reserved word 'class' and 'className' attribute of DOM element.
不要混淆 DOM 元素的保留字 'class' 和 'className' 属性。
According to MDN:
根据MDN：
The name classNameis used for this property instead of class because of conflicts with the "class" keyword in many languages which are used to manipulate the DOM.
名称className用于此属性而不是 class，因为与许多用于操作 DOM 的语言中的“ class”关键字冲突。
EDIT:The 'class' word used on js 1.0 but in js 2.0 was merged with ECMAScript 4which was rather unpopular and depreciated. but it is still a reserved word.
编辑：在 js 1.0 上使用但在 js 2.0 中使用的“类”一词与 ECMAScript 4 合并，后者相当不受欢迎且已贬值。但它仍然是一个保留字。
回答by NIV
The general concept is that class is an object and className is "one" of its properties.Refer the links on how to use the class attribute for manipulation.Kindly correct me if my perception/understanding is wrong.
一般概念是 class 是一个对象，而 className 是其属性的“一个”。请参阅有关如何使用 class 属性进行操作的链接。如果我的看法/理解有误，请纠正我。
https://www.w3schools.com/jsref/prop_html_classname.asphttps://www.w3schools.com/jsref/prop_element_classlist.asp
https://www.w3schools.com/jsref/prop_html_classname.asp https://www.w3schools.com/jsref/prop_element_classlist.asp
