作业求助：用document.getElementById()和.querySelectorAll实现div类内单词搜索

Hey there! Let's walk through building this word search feature for your assignment, making sure we use both document.getElementById() and document.querySelectorAll() as required. I'll break it down with a clear example so you can follow along easily.

Here's a sample HTML setup that gives us elements to hook into with our JavaScript—we'll need a search input, a trigger button, and a target div with your specified class (I'll use word-content as the class here):

<!-- Search controls -->
<input type="text" id="search-input" placeholder="Type a word to search...">
<button id="search-btn">Search</button>

<!-- Target area to search within -->
<div class="word-content">
  <p>JavaScript is a core web development language.</p>
  <p>We're required to use getElementById and querySelectorAll for this task.</p>
  <p>Word search helps users locate specific content quickly.</p>
  <p>Don't forget to test edge cases like empty inputs!</p>
</div>

Now let's write the JS code that brings the search functionality to life. I'll explain each section to show how the required methods fit in:

// 1. Use document.getElementById() to grab single, unique elements (search input + button)
const searchInput = document.getElementById('search-input');
const searchBtn = document.getElementById('search-btn');

// Add event listeners to trigger search (click button or press Enter)
searchBtn.addEventListener('click', runSearch);
searchInput.addEventListener('keyup', (e) => {
  if (e.key === 'Enter') runSearch();
});

function runSearch() {
  const searchTerm = searchInput.value.trim().toLowerCase();
  
  // Handle empty input
  if (!searchTerm) {
    alert('Please enter a word to search!');
    clearHighlights();
    return;
  }

  // 2. Use document.querySelectorAll() to get all text elements inside the target div
  const targetElements = document.querySelectorAll('.word-content p');

  // Loop through each element to check for matches
  targetElements.forEach(element => {
    const text = element.textContent.toLowerCase();
    // Reset previous highlights first
    element.innerHTML = element.textContent;

    if (text.includes(searchTerm)) {
      // Highlight the matching word(s)
      const highlightedText = element.textContent.replace(
        new RegExp(searchTerm, 'gi'),
        match => `<span style="background: #ffeb3b;">${match}</span>`
      );
      element.innerHTML = highlightedText;
    }
  });
}

// Helper function to clear highlights when input is empty
function clearHighlights() {
  const targetElements = document.querySelectorAll('.word-content p');
  targetElements.forEach(element => {
    element.innerHTML = element.textContent;
  });
}

• document.getElementById(): We use this for the search input and button because they have unique IDs—this method is fast and ideal for grabbing single, specific elements directly.
• document.querySelectorAll(): This is perfect for fetching all paragraph elements inside our target word-content div. It returns a NodeList of all matching elements, which we can loop through to check for our search term.

• If your target div has text nodes not wrapped in <p> tags, adjust the selector to .word-content * or traverse the div's child nodes directly.
• You can add a "Clear" button to reset highlights using the same querySelectorAll logic.
• For stricter word matching (not partial matches), modify the regex to new RegExp(\b${searchTerm}\b, 'gi') (the \b denotes word boundaries).

内容的提问来源于stack exchange，提问作者Wolk