为什么$（'。classname'）和document.getElementsByClassName（'classname'）返回不同的东西？

Question

Why does $('.classname') return just one element when it's javascript equivalent document.getElementsByClassname('classname') returns an array of elements? If it's not each other's equivalent, what is then? How to get all the element which have the same class name using jQuery? Is there any other way other than $('.classname') ? For example,

<tr>
 <td class="currentMonth">1</td>
 <td class="currentMonth">2</td>
 <td class="currentMonth">3</td>
 <td class="currentMonth">4</td>
 <td class="currentMonth">5</td>

If i use document.getElementsByClassName('currentMonth'), then I will get an array of all the elements mentioned above.

[ <td class="currentMonth">1</td>,    <td class="currentMonth">2</td>, <td class="currentMonth">3</td>,    <td class="currentMonth">4</td>,    <td class="currentMonth">5</td> ]

But with $('.currentMonth') , I can see only one element.

How can I get all the elements using $ ?

Answer 1

The $('.currentMonth') returns a jQuery object of all the matching elements. It is wrapped in the jQuery way, but it also returns all the elements. You can get the elements by using:

$('.currentMonth').each(function () {
  this; // Here this refers to each of the matched element.
});

Whereas document.getElementsByClassname('currentMonth') returns a list of DOM Objects.

So for example, if I am executing a script like this:

$('.currentMonth').html("Hello!");

All the <td> s will be changed.

Answer 2

$('.classname') is a jQuery Object, whereas document.getElementsByClassname('classname') is a list of DOM Object

$('.classname') will select all the elements which matches with the class claaname and will make a jQuery Object of it.

$('.classname').html("Whatever") will remove all the .classname elements.

Answer 3

document.getElementsByClassname('classname') 

return a NodeList object , representing collection of elements with specified class name,using browsers built-in methods while $(".className") return jQuery object and you can use jQuery methods to manipulate it

Explore More