How do I Select Elements by Class Name in JavaScript?

How to Obtain Elements by Class Name

In JavaScript, retrieving elements by their IDs is straightforward using the document.getElementById() method. However, obtaining elements by class is slightly different and can initially cause confusion.

The correct method name for selecting elements by class is document.getElementsByClassName(). This is because multiple elements on a web page can share the same class, hence the use of 'Elements', which returns a NodeList or an array-like object.

Here's an example:

<code class="javascript">var elementsByClass = document.getElementsByClassName('class_name');
console.log(elementsByClass[0]); // Accesses the first element with the provided class name</code>

If you need to convert the NodeList to an actual array, you can use the following methods:

<code class="javascript">var arrayFromList1 = Array.prototype.slice.call(elementsByClass);

// Alternatively, you can use the following syntax to convert the NodeList to an array
var arrayFromList2 = [].slice.call(elementsByClass);</code>

It's worth noting that using querySelector() or querySelectorAll() for selecting elements by class is generally preferred due to better cross-browser support.

Finally, it's recommended to refer to reputable sources like MDN for accurate and up-to-date JavaScript information.

The above is the detailed content of How do I Select Elements by Class Name in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!