javascript中class和classname有什么区别？

Question

为了找到某个类名的子对象，我必须创建自己的辅助函数

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;
}

它是如何工作的一个例子是

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

但是当我在上面的函数中按类替换className时，代码不起作用。所以我很自然地想知道class和className之间的区别。在谷歌上快速搜索并没有透露任何信息。

同样，返回通用对象的特定类名子项列表的最佳方法是什么？如果不存在，有没有办法向所有对象添加方法，以便我可以调用

li.findChildrenByTagName("answer_input");

而不是上面的全局函数？

Answer 1

让我们将其分解为可回答的部分：

问题1：

  

javascript中的class和classname有什么区别？

你的头衔问题。

答案1：

Class是html元素<span class='classy'></span>

中的一个属性

另一方面，.className是一个可以通过调用元素来获取/设置其类的属性。

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

也可以使用.getAttribute('class')和.setAttribute('class', 'classy')来设置课程。我们经常更改操作类，但它应该使用自己的.className方法。

---

问题2：

  

但是当我在上面的函数中按类替换className时，代码不起作用。所以我很自然地想知道class和className之间的区别。

答案2：element.class不是属性。

类可以是元素的属性，但不能像el.class那样调用它。你的方式是el.className，，就像你已经想到的那样。如果查看MDN for Element，您会看到元素包含许多属性和方法，但.class不是一个。

---

问题3：

  

另外，返回通用对象的特定类名子项列表的最佳方法是什么？

答案3：使用.getElementsByClassName

人们经常一个接一个地“链接”方法，而不是使用专门设定的功能，以达到预期的效果。

根据您的需求，我认为您要求使用.getElementsByClassName方法。以下是full docs和摘录：

  

Element.getElementsByClassName（）方法返回一个实时HTMLCollection [array]，其中包含具有所有给定类名的所有子元素。

重复使用答案中的示例：

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

不要在保留字＆＃39; class＆＃39;之间混淆。和＆＃39; className＆＃39; DOM元素的属性。

根据MDN：

  

名称 className 用于此属性而非类，因为与＆＃34; 类＆＃34;冲突？许多语言中用于操纵DOM的关键字。

修改 课程＆＃39; word used on js 1.0 but in js 2.0 was merged with ECMAScript 4这是不受欢迎和贬值的。但它仍然是一个保守的词。

Answer 3

一般概念是类是一个对象，className是其属性的“一”。请参阅如何使用类属性进行操作的链接。如果我的感知/理解是错误的，请纠正我。

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