使用Tampermonkey获取网页表格元素返回undefined的解决建议

Hey there, let's work through why your Tampermonkey script is hitting undefined when trying to grab those table rows in the "Driver" section. Here are targeted fixes to try out:

1. Make Sure Your Script Runs After the Table Renders #

Most modern web apps (especially SPAs) load content dynamically long after the initial page loads. If your script fires too early, the table won’t exist yet—leading to empty or undefined results.

Fix Options: #

• Set the right run timing in your Tampermonkey script header. Add this line to ensure the script runs once the DOM is fully ready:

  // @run-at        document-idle
  

• Use a DOM observer to wait for the table (more reliable for dynamic content). Here’s a MutationObserver implementation you can drop into your script:

  // Wait for the table to appear and watch for DOM changes
  const observer = new MutationObserver((mutations, observerInstance) => {
    const rows = document.querySelectorAll("#app table.table-component tr");
    if (rows.length > 0) {
      console.log("Successfully found rows:", rows);
      // Add your custom functionality here
      observerInstance.disconnect(); // Stop observing once we have our target elements
    }
  });
  
  // Start observing the #app container for new child elements
  const appContainer = document.querySelector("#app");
  if (appContainer) {
    observer.observe(appContainer, { childList: true, subtree: true });
  } else {
    console.error("Could not locate the #app container to observe");
  }
  

2. Verify Your Selector is Correct #

undefined often means your selector doesn’t match any elements. Let’s confirm this first:

• Log into the site, navigate to the "Driver" section, open your browser’s DevTools (F12), go to the Console tab, and run:

  document.querySelectorAll("#app table.table-component tr")
  

  If this returns an empty NodeList, your selector is off. Check the actual element structure via the Elements tab:
  • Is the table really nested inside an element with ID #app?
  • Does the table have the exact class table-component (no extra suffixes like table-component--loaded)?
  • Is the table inside an iframe? If so, you’ll need to target the iframe’s content document first:

    const iframe = document.querySelector("iframe");
    if (iframe) {
      iframe.contentWindow.addEventListener("load", () => {
        const rows = iframe.contentDocument.querySelectorAll("#app table.table-component tr");
        console.log(rows);
      });
    }
    

3. Check for Shadow DOM Encapsulation #

Some sites use Shadow DOM to isolate components, which blocks regular querySelectorAll from accessing elements inside. If the table is in a shadow root:

• Use DevTools to inspect the element (look for a #shadow-root tag in the Elements panel).
• If present, access the shadow root first before querying:

  const shadowHost = document.querySelector("#element-with-shadow-root");
  if (shadowHost && shadowHost.shadowRoot) {
    const rows = shadowHost.shadowRoot.querySelectorAll("#app table.table-component tr");
    console.log(rows);
  }
  

Quick Debugging Hack #

Add console.log(document.querySelector("#app")) to your script first. If this returns null, the #app element doesn’t exist when the script runs—confirming the issue is timing-related.

内容的提问来源于stack exchange，提问作者Марк Гілюта