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,你会发现元素有很多属性和方法,但.class不是一个.

问题3:

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

答案3:使用.getElementsByClassName

人们经常一个接一个地"链接"方法,而不是使用特制的功能,以达到您想要的效果.

根据您的需求,我认为您要求的.getElementsByClassName方法.以下是完整的文档和摘录:

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