如何用JavaScript定位外部网页HTML DOM元素？解决相关报错

嘿，我之前也踩过这个坑！问题出在你对response的理解上——用$.get默认返回的是纯HTML字符串，不是浏览器里的DOM对象，自然没有getElementById这种DOM方法啦。另外还有个容易忽略的小细节：getElementById的参数是元素的id值，不需要加#，你原来的getElementById('#id')写法本身也会找不到元素哦。

给你两种靠谱的解决方案，按需选择：

方案1：用jQuery处理（更贴合你现有的代码） #

直接把返回的HTML字符串转换成jQuery对象，然后用jQuery的选择器来定位元素，操作起来很顺手：

$.get('myUrl', function(response) {
  // 把HTML字符串转为jQuery对象
  const $targetPage = $(response);
  
  // 获取第一个目标元素
  const storageVariable = $targetPage.find('#id').text();
  console.log(storageVariable);
  
  // 继续获取其他元素的示例：
  const pageTitle = $targetPage.find('h1.main-title').text();
  const ctaLink = $targetPage.find('a.cta-btn').attr('href');
  const contentHtml = $targetPage.find('.article-content').html();
  
  // 把这些变量存起来或者做后续业务处理
})

方案2：用原生JS的DOMParser解析 #

如果你更习惯原生JS的DOM操作，可以用DOMParser把HTML字符串解析成完整的DOM文档，之后就能用所有原生DOM方法了：

$.get('myUrl', function(response) {
  // 创建解析器并把字符串转成DOM文档
  const parser = new DOMParser();
  const doc = parser.parseFromString(response, 'text/html');
  
  // 注意这里不需要加#！直接传id值即可
  const storageVariable = doc.getElementById('id').textContent;
  console.log(storageVariable);
  
  // 其他元素的获取示例：
  const pageTitle = doc.querySelector('h1.main-title').textContent;
  const ctaLink = doc.querySelector('a.cta-btn').getAttribute('href');
  const contentHtml = doc.querySelector('.article-content').innerHTML;
})

两种方法都能解决你的问题，选你顺手的就行～另外要确保你的选择器和目标网页里的元素完全匹配，避免因为选择器写错导致找不到元素哦！

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