Question

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

这就是我所做的：

event.preventDefault()

html是什么：

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

但我希望从产品开始匹配类js-display-url但不能这样做。请帮忙。

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

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: