使用JavaScript Document Query Selector抓取职位标题及Href失败，求问题排查指导

Let's break down the issues in your code and fix them step by step:

Key Problems in the Original Code #

1. Wrong element for href: The <h2> element with data-bind="text: job.title" doesn't have an href attribute. The link to the job posting is almost certainly on an <a> (anchor) tag that wraps the h2 or is an ancestor of it. Trying to get href from the h2 will return undefined, breaking your URL construction.

2. Potential dynamic content timing: The page uses Knockout.js (evidenced by the data-bind attributes), which renders content dynamically. If your script runs before Knockout finishes binding data, the elements might not have their text or links populated yet.

3. Using innerHTML unnecessarily: innerHTML includes any HTML tags inside the h2, whereas textContent gives you clean, plain text for the job title.

Corrected Code #

function ExecuteScript() { 
  let response = ''; 
  // Select all h2 elements with the job title data-bind
  document.querySelectorAll('h2[data-bind="text: job.title"]').forEach((titleElement) => { 
    // Find the closest parent anchor tag (the actual link)
    const jobLink = titleElement.closest('a'); 
    
    // Only proceed if we found a valid anchor
    if (jobLink) { 
      const cleanTitle = titleElement.textContent.trim(); 
      // Get the full absolute URL (handles relative links correctly)
      const fullUrl = new URL(jobLink.href).href; 
      response += `${cleanTitle}\t${fullUrl}\n`; 
    } 
  }); 
  return response; 
}

What Changed & Why #

• closest('a'): This traverses up the DOM from the h2 to find the nearest anchor tag, which is where the job's URL is stored. This is robust even if the exact DOM structure shifts slightly.
• textContent.trim(): Gives you the plain text title without extra whitespace or hidden HTML.
• new URL(jobLink.href).href: Ensures you get a full, valid absolute URL instead of a relative path, which avoids broken links when combining with location.host.
• Error checking: The if (jobLink) guard prevents adding invalid entries if an h2 isn't wrapped in a link (unlikely here, but good practice).

Debugging Tips #

1. Inspect the DOM: Right-click a job title in the browser and select "Inspect" to confirm the structure. Verify that the h2 is inside an anchor tag, or that the anchor is a direct parent.
2. Run after page load: If you're running this script in the console, wait until the page has fully loaded (including all job listings) before executing it. For automated scraping, you might need to wait for Knockout's bindings to complete (e.g., using setTimeout or observing DOM changes).
3. Test selectors individually: In the console, run document.querySelectorAll('h2[data-bind="text: job.title"]') to confirm it returns the correct elements. Then run element.closest('a') on one of those elements to make sure it finds the anchor.

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