Получить все элементы, которые начинаются с определенного innerHTML с помощью селектора запросов?

Question

У меня возникла проблема с выбором и соответствием innerHTML с помощью querySelectorAll.

Вот что я сделал:

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

Что HTML является:

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

Но я хочу, чтобы соответствовать классу JS-дисплей-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 может получить элементы, соответствующие вашим критериям.

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>