使用查询选择器获取以特定 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);
&lt;span class="js-display-url"&gt;product/poss/newslanges&lt;/span&gt;

【讨论】:

以上是关于使用查询选择器获取以特定 innerHTML 开头的所有元素?的主要内容,如果未能解决你的问题,请参考以下文章

使用 JSoup 选择以特定模式开头的标签

C# 解析字符串/innerhtml 以获取特定数据

如何使用 CSS 选择器通过其 innerHTML 值获取 Child? [复制]

Jquery 选择器:属性值以开头和结尾

CSS学习Id和Class选择器

Smack - 获取条目以特定字母开头