javascript - javascript中的类和类名有什么区别？

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"));

但是，当我在上面的函数中用类替换上面的类名时，代码不起作用。所以我很自然地想知道 class 和 className 之间有什么区别。在谷歌上快速搜索不会显示任何内容。

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

li.findChildrenByTagName("answer_input");

而不是上面的全局函数？

Answer 1

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

问题一:

What is the difference between class and classname in javascript?

你的标题问题。

答案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:

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.

回答2:element.class不是属性。

Class 可能是一个元素的属性，但你不能像el.class 那样调用它.你这样做的方式是 el.className , 就像你已经想通的那样。如果您查看 MDN for Element ，你会看到元素有很多属性和方法，但是 .class不是一个。

---

问题三:

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

答案 3:使用 .getElementsByClassName

人们不是使用特制的函数，而是经常“链接”一个接一个的方法来达到您想要的效果。

根据您的需要，我认为您要求的是 .getElementsByClassName方法。这是 full docs和摘录:

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

重用您答案中的示例:

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