无ID或Class的HTML元素选择方法及querySelector系列方法报错排查

首先，你碰到的两个问题我都帮你梳理清楚：一个是调用document.querySelector('a')或document.querySelectorAll('a')时的报错，另一个是如何定位没有ID/Class的元素。

一、解决"Object doesn't support property or method"报错 #

这个错误几乎都是因为运行环境不支持querySelector/querySelectorAll方法——最常见的场景是在IE8及更早的旧浏览器里，这些方法是IE9才开始支持的。

解决办法分两种情况：

• 如果必须兼容IE8：改用传统的getElementsByTagName方法，它在所有旧IE里都能正常工作，示例：

  // 获取页面所有锚点元素
  var allLinks = document.getElementsByTagName('a');
  // 遍历处理每个链接
  for (var i = 0; i < allLinks.length; i++) {
    console.log('链接地址：', allLinks[i].href);
  }
  

• 如果不需要兼容旧IE：检查你的运行环境是否为标准浏览器环境（比如避免在某些极度老旧的嵌入式WebView里运行），现代浏览器（Chrome、Firefox、Edge、IE9+）都原生支持这两个方法。

二、无ID/Class时如何选择HTML元素 #

就算元素没有ID和Class，我们依然可以通过元素的标签名、属性、层级关系等特征来精准定位，以下是几种常用方法：

1. 标签选择器 #

这是最直接的方式，直接通过标签名选择，比如：

• 用querySelectorAll（支持的环境）：document.querySelectorAll('a')
• 用getElementsByTagName（兼容旧环境）：document.getElementsByTagName('a')

2. 属性选择器 #

如果元素有其他属性（比如href、target、title等），可以用属性选择器匹配：

• 选择所有href包含某关键词的链接：document.querySelectorAll('a[href*="example"]')
• 选择所有href以https开头的安全链接：document.querySelectorAll('a[href^="https"]')
• 选择所有设置了target="_blank"的链接：document.querySelectorAll('a[target="_blank"]')

3. 层级/关系选择器 #

通过元素在DOM树中的位置关系定位：

• 选择某个div下的直接子锚点：document.querySelectorAll('div.content > a')
• 选择紧跟在p标签后的第一个锚点：document.querySelectorAll('p + a')
• 选择某个ul下的所有后代锚点：document.querySelectorAll('ul.nav a')

4. 伪类选择器 #

利用伪类匹配特定位置的元素：

• 选择页面中第一个锚点：document.querySelector('a:first-of-type')
• 选择页面中第3个锚点：document.querySelector('a:nth-child(3)')
• 选择所有被点击过的链接：document.querySelectorAll('a:visited')

5. 组合选择器 #

把以上几种方式结合起来，实现更精准的定位：
比如选择section.post下所有href以/article开头的锚点：

var articleLinks = document.querySelectorAll('section.post a[href^="/article"]');

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