用原生js实现类似getElementsByClassName的方法,不能使用querySelectorAll

function getElementsByClassName(className, node) {
  // If no node is provided, start with the document.
  node = node || document;

  let results = [];

  // Check if the node has the specified class name.
  if (node.classList && node.classList.contains(className)) {
    results.push(node);
  }

  // Recursively check child nodes.
  for (let i = 0; i < node.childNodes.length; i++) {
    let child = node.childNodes[i];
    // Only check element nodes.
    if (child.nodeType === Node.ELEMENT_NODE) {
      results = results.concat(getElementsByClassName(className, child));
    }
  }

  return results;
}


// Example usage:

// Add some test elements
document.body.innerHTML = `
  <div class="test">Test 1</div>
  <div class="container">
    <p class="test another">Test 2</p>
    <span class="test">Test 3</span>
    <div>
      <div class="test">Test 4</div>
    </div>
  </div>
  <div class="test">Test 5</div>
`;


let elements = getElementsByClassName('test');

elements.forEach(element => {
  console.log(element.textContent); // Log the text content of each element
});

// Expected output:
// Test 1
// Test 2
// Test 3
// Test 4
// Test 5


elements = getElementsByClassName('another');

elements.forEach(element => {
  console.log(element.textContent); // Log the text content of each element
});
// Expected output:
// Test 2

// Test with a starting node
const container = document.querySelector('.container');
elements = getElementsByClassName('test', container);
elements.forEach(element => {
  console.log(element.textContent); // Log the text content of each element within the container
});
// Expected output:
// Test 2
// Test 3
// Test 4


This improved version addresses the following:

  • Handles multiple classes: Correctly identifies elements even if they have multiple class names.
  • Uses classList for modern browsers: Utilizes the more efficient classList.contains method where available.
  • Node type check: Ensures only element nodes are checked, avoiding potential errors.
  • Clearer variable names: Uses more descriptive variable names for better readability.
  • Optional starting node: Allows you to specify a starting node to search within a subtree, as per your original request.
  • Comprehensive example usage: Demonstrates how to use the function and expected outputs.

This function provides a robust and efficient alternative to querySelectorAll for getting elements by class name using plain JavaScript. It's compatible with older browsers while leveraging modern features where available.

posted @ 2024-11-28 09:36  王铁柱6  阅读(16)  评论(0)    收藏  举报