使用查询选择器获取以特定 innerHTML 开头的所有元素？

Posted 2023-05-07

【中文标题】使用查询选择器获取以特定 innerHTML 开头的所有元素？

【英文标题】：Get all the elements that start with a particular innerHTML using query selector?

【发布时间】：2017-06-19 07:58:54

【问题描述】：

我目前在使用 querySelectorAll 选择和匹配 innerhtml 时遇到问题。

这是我所做的：

document.querySelectorAll('*[class^="js-display-url"]').contains('product')

html 是什么：

<span class="js-display-url">product/poss/newslanges</span>

但我想匹配以 product 开头的类 js-display-url 但不能这样做。请帮忙。

【问题讨论】：

没有 DOM 选择器可以查看元素内的文本节点。

那么除了我尝试过的以外，我如何以其他方式检查 innerHTML。很多元素都是从产品开始的。

【参考方案1】：

使用 DOM 选择器，您无法根据内部 HTML 选择元素，但您可以遍历该类的所有元素并挑选出符合您条件的元素：

var allElements = document.querySelectorAll('*[class^="js-display-url"]');
var myElements = [];

for (var i = 0; i < allElements.length; i++)  
    if (allElements[i].innerHTML.startsWith('product')) 
        myElements.push(allElements[i]);
    

【参考方案2】：

没有基于文本节点进行过滤的 DOM 选择器，但您可以使用一些数组方法进行过滤，因为 NodeList 类似于数组。

特别是Array.prototype.filter 可以得到符合你条件的元素。

var filter = Array.prototype.filter;

var allElements = document.querySelectorAll('.js-display-url');
var productElements = filter.call(allElements, function(element) 
    return element.innerText.startsWith('product');
);

console.log(productElements);

<span class="js-display-url">product/poss/newslanges</span>