javascript中class和classname有什么区别？ [英] What is the difference between class and classname in javascript?

问题描述

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

  findChildrenByTagName = function （obj，name）{
 var ret = []; 
 for（var j in obj.children）{
 if（obj.children [k] .className === name）{
 ret.push（obj.children [k]）; 
} 
} 
返回ret; 
} 
  

它的工作原理示例是

  var li = document.createElement（'li'）; 
 var input = document.createElement（'input'）; 
 input.setAttribute（'class'，'answer_input'）; 
 li.appendChild（输入）; 
 console.log（findChildrenByTagName（li，answer_input））; 
  

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

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

  li.findChildrenByTagName （ answer_input）; 
  

而不是上面的全局函数？

解决方案

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

问题1：

javascript中class和classname有什么区别？

您的标题问题。

答案1：

类是html元素中的一个属性< span class ='classy'>< / span>

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

  var element = document.createElement（'span'）; 
 element.className ='classy'
 //元素是< span class ='classy'>< / span> 
  

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

---

问题2：

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

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

类可以是元素的属性，但不能像 el.class 那样调用它。你这样做的方式是 el.className ，就像你已经想出的那样。如果你看一下和摘录：

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

要重复使用答案中的示例：

  var li = document.createElement（'li'）; 
 var input = document.createElement（'input'）; 
 input.setAttribute（'class'，'answer_input'）; 
 li.appendChild（输入）; 
 console.log（li.getElementsByClassName（answer_input）[0]）; 
 //将返回< input class ='answer_input'>作为HTML数组的第一个元素
  

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.

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?

解决方案

Let's break this into answerable parts:

Question 1:

What is the difference between class and classname in javascript?

Your title question.

Answer 1:

Class is an attribute in an html element <span class='classy'></span>

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 .getAttribute('class') and .setAttribute('class', 'classy'). We change manipulate classes so often, however, that it merited its own .className method.

---

Question 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.

Answer 2: 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 you 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.

---

Question 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

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 .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 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

这篇关于javascript中class和classname有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！