如何使用通配符在querySelectorAll NodeList中匹配指定域名的a.href元素

如果你不想通过ID或类选择器，而是直接根据<a>元素的href属性匹配指定域名（比如www.youtube.com），可以利用CSS属性选择器配合querySelectorAll实现，以下是几种常用的匹配方式：

1. 匹配以指定域名开头的href #

使用^=操作符，精准匹配href属性值以指定域名开头的链接，适合匹配直接指向该域名的完整链接：

// 匹配所有href以http://www.youtube.com开头的<a>元素
var youtubeLinks = document.querySelectorAll('a[href^="http://www.youtube.com"]');

如果要同时匹配https开头的链接，可以用逗号分隔多个条件：

var youtubeLinks = document.querySelectorAll('a[href^="http://www.youtube.com"], a[href^="https://www.youtube.com"]');

2. 匹配任意位置包含指定域名的href #

使用*=操作符，匹配href属性值任意位置包含指定域名的链接，能覆盖更多场景（比如带路径参数、跳转链接里包含该域名的情况）：

// 匹配所有href中包含www.youtube.com的<a>元素
var youtubeLinks = document.querySelectorAll('a[href*="www.youtube.com"]');

3. 对比类选择器的实现 #

你提供的这段代码是通过类选择器匹配：

var youtubeID = document.querySelectorAll('.youtubelink');

这种方式需要目标<a>元素提前添加youtubelink类名，而属性选择器则直接基于链接地址匹配，无需额外标记元素。

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