How to Get Elements by Class with JavaScript Without getElementById?

Get Element by Class with JavaScript without getElementById

In JavaScript, the getElementById method is commonly used to retrieve elements by their unique ID. However, when working with dynamically generated elements or elements that share the same ID, it becomes necessary to find elements by their class attribute. While getElementByClass is natively supported in modern browsers, it is still not supported in all major browsers, such as Internet Explorer.

Using a Function to Get Elements by Class

JavaScript does not provide a built-in method to retrieve elements by class. However, we can overcome this limitation by using a function to search for elements based on their class attribute. One popular implementation is the Dustin Diaz method:

<code class="javascript">function getElementsByClassName(node, classname) {
  if (node.getElementsByClassName) { // native implementation available
    return node.getElementsByClassName(classname);
  } else {
    var classElements = [],
        els = node.getElementsByTagName("*"),
        elsLen = els.length,
        pattern = new RegExp("(^|\s)"+classname+"(\s|$)", "i");

    for (var i = 0, j = 0; i < elsLen; i++) {
      if ( pattern.test(els[i].className) ) {
          classElements[j] = els[i];
          j++;
      }
    }
    return classElements;
  }
}</code>

This function takes a node (typically the document object) and a class name as input and returns an array of elements that match the specified class. It first checks if the native getElementsByClassName method exists, and if so, uses it. Otherwise, it iterates through all the elements in the node and checks if their class attribute contains the specified classname.

Integrating with the Toggle Script

Once we have a function to get elements by class, we can modify our toggle visibility script to use it:

<code class="javascript">function toggle_visibility(className) {
  var elements = getElementsByClassName(document, className),
      n = elements.length;
  for (var i = 0; i < n; i++) {
    var e = elements[i];
    if(e.style.display == 'block') {
      e.style.display = 'none';
    } else {
      e.style.display = 'block';
    }
  }
}</code>

By replacing the getElementById function call with the getElementsByClassName function, our script can now toggle the visibility of elements based on their class attribute. This allows us to control the visibility of dynamically generated elements without relying on unique IDs.

The above is the detailed content of How to Get Elements by Class with JavaScript Without getElementById?. For more information, please follow other related articles on the PHP Chinese website!