Explain .getElementByClassName() in javascript with example

视频信息

答案文本 复制

视频字幕 复制

The getElementsByClassName method is a powerful JavaScript function that allows you to select multiple elements from the DOM based on their class name. It returns a live HTMLCollection containing all elements that have the specified class. Let's see how it works with a simple example. The syntax is straightforward: document dot getElementsByClassName with the class name as a string parameter. It returns an HTMLCollection, which is a live, array-like object. This means it automatically updates when elements are added or removed. You can access elements by index and check the length property. Here's a complete example showing getElementsByClassName in action. The HTML defines several elements with the 'box' class. The JavaScript code selects all elements with this class, then loops through the collection to apply styling. Finally, it modifies the first element specifically by accessing it with index zero. There are several important points to remember when using getElementsByClassName. It returns an HTMLCollection, not an Array, so you can't use array methods directly. The collection is live, meaning it updates automatically. You can convert it to an array using Array.from, or use a for-of loop to iterate. For selecting a single element, consider using querySelector instead. In summary, getElementsByClassName is an essential method for selecting multiple elements by class name. It's perfect for batch operations and dynamic content manipulation. While alternatives like querySelector and querySelectorAll offer more flexibility, getElementsByClassName remains the fastest option for simple class-based selections and provides a live collection that updates automatically.