使用查询选择器获取以特定 innerHTML 开头的所有元素?
Posted
技术标签:
【中文标题】使用查询选择器获取以特定 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>
【讨论】:
以上是关于使用查询选择器获取以特定 innerHTML 开头的所有元素?的主要内容,如果未能解决你的问题,请参考以下文章