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

【问题标题】：Get all the elements that start with a particular innerHTML using query selector?使用查询选择器获取以特定 innerHTML 开头的所有元素？
【发布时间】：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。很多元素都是从产品开始的。

标签： javascript html dom innerhtml selectors-api

【解决方案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);

&lt;span class="js-display-url"&gt;product/poss/newslanges&lt;/span&gt;

【讨论】：