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

Question

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

这是我所做的：

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

html 是什么：

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

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

Answer 1

使用 DOM select 或者你不能 select 基于内部 HTML 的元素，但你可以使用 class 遍历所有元素并挑出符合您条件的：

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]);
    }
}

Answer 2

没有 DOM 选择器会根据文本节点进行过滤，但您可以使用一些数组方法进行过滤，因为 NodeList 是 array-like.

特别是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>

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

Get all the elements that start with a particular innerHTML using query selector?

javascript

html

dom

innerhtml

selectors-api