Methods and Practices for Retrieving Multiple Elements by Class Name in JavaScript

Problem Background and Requirement Analysis

In web development practice, scenarios frequently arise where multiple elements with identical characteristics need to be manipulated. As described by the user: the page contains multiple anchor tags sharing the same ID attribute but with different name attribute values. From a technical perspective, this design exhibits clear specification issues since, according to HTML standards, the ID attribute must be unique within a document.

Standard Solution: Using Class Names Instead of IDs

The most HTML-compliant solution involves converting duplicate IDs to class names. This approach not only resolves standardization issues but also offers better maintainability. Implementation occurs in two primary steps:

First, modify the HTML markup by replacing ID attributes with class attributes:

<a class="test" name="Name 1"></a>
<a class="test" name="Name 2"></a>
<a class="test" name="Name 3"></a>

Then, use JavaScript's getElementsByClassName method to retrieve all relevant elements:

var elements = document.getElementsByClassName("test");
var names = '';
for(var i = 0; i < elements.length; i++) {
    names += elements[i].name;
}
document.write(names);

Method Deep Dive

The getElementsByClassName method returns an HTMLCollection object, an array-like structure containing all elements with the specified class name. Unlike getElementById, this method can return multiple elements, perfectly addressing batch operation requirements.

When processing in loops, note that HTMLCollection is live, dynamically reflecting DOM changes. This characteristic can be useful in certain scenarios but may also lead to unexpected behavior, requiring developers to fully understand this feature.

Alternative Approach Comparison

Beyond the class name solution, modern JavaScript offers other options:

Using the querySelectorAll method:

var elements = document.querySelectorAll('[id="test"]');

This approach uses attribute selectors to retrieve elements. While technically feasible, it violates the fundamental HTML standard principle of ID uniqueness. In practical projects, this usage should be carefully considered.

jQuery approach:

$('[id="test"]');

jQuery provides concise syntax, but the underlying principles align with native JavaScript. In performance-sensitive scenarios, native methods are generally preferable.

Compatibility Considerations

For projects requiring support for older browsers, consider implementing custom class name retrieval functions. As shown in reference code:

function getAllByClass(classname, node) {
    if (!document.getElementsByClassName) {
        if (!node) {
            node = document.body;
        }
        var a = [],
            re = new RegExp('\\b' + classname + '\\b'),
            els = node.getElementsByTagName("*");
        for (var i = 0, j = els.length; i < j; i++) {
            if (re.test(els[i].className)) {
                a.push(els[i]);
            }
        }
    } else {
        return document.getElementsByClassName(classname);
    }
    return a;
}

This implementation uses regular expressions to match class names, ensuring availability in environments lacking native support.

Best Practice Recommendations

Based on HTML standards and practical development experience, adhere to the following principles:

Strictly maintain ID uniqueness—this is a fundamental HTML specification requirement and a prerequisite for ensuring script correctness.

Appropriately use class names for element grouping; class names specifically identify collections of elements with shared characteristics or behaviors.

When selecting solutions, prioritize standard compliance and code maintainability, avoiding short-term convenience at the expense of long-term stability.

Performance Considerations

Different methods exhibit performance variations: getElementsByClassName typically offers optimal performance due to browser-specific optimizations. querySelectorAll, while powerful, may be slower with complex selectors. Custom functions are necessary for older browser compatibility but should be secondary to native methods.

In practical development, choose the most suitable method based on specific requirements and conduct benchmark tests in performance-sensitive scenarios.