Question

我有几种聚合物元素。

<ps-el-one/>
<ps-el-two/>
<ps-el-three/>
<ps-el-four/>

我希望能够查询所有以＆＃34; ps开头的元素 - ＆＃34;使用CSS选择器或javaScript。

我掀起了以下解决方案，但我想知道是否有更高效的方法？

var allElementsOnPage = document.querySelectorAll('*');
var res = [];
for (var index in allElementsOnPage) {
  var el = allElementsOnPage[index];
  if (el && el.tagName && el.tagName.substr(0, 3) == 'PS-') {
    res.push(el);
  }
}

这个解决方案似乎非常低效。

Answer 1

我不知道任何元素选择器，但可以使用CSS3属性和类子串匹配选择器（IE7 +支持）：

[class^="tocolor-"], [attr*=" tocolor-"] {
    color:red 
}

不确定这是否是您想要的，但可能会为您提供另一种实现目标的方法。

Answer 2

选中此here

<input name="man-news">
<input name="milkman">
<input name="letterman2">
<input name="newmilk">

<script>
$( "input[name*='man']" ).val( "has man in it!" );
</script>

Answer 3

您可以使用类似这样的内容而不是querySelectorAll

function myFunction() {
    var x = document.getElementsByTagName("*");
    var res = [];
    for(var i = 0; i < x.length; i++) {

   if(x[i].tagName.indexOf('PS-') == 0) {

         res.push(x[i]);
    }
    }

}

Answer 4

只要给自然界中常见的所有元素上课。并做：

<强> HTML

<ps-el-one class="ps"/>
<ps-el-two class="ps"/>
<ps-el-three class="ps"/>
<ps-el-four class="ps"/>

<强> CSS

// for all elements together
.ps { /* css for all elements together */ }    

// for individual elements
.ps:nth-of-type(1) { /* css for 1st ele */ }
.ps:nth-of-type(2) { /* css for 2nd ele */ }
.ps:nth-of-type(3) { /* css for 3rd ele */ }
.ps:nth-of-type(4) { /* css for 4th ele */ }

<强> JS

// for all elements together
var ps = document.querySelectorAll('.ps');

// for individual elements
var ps1 = document.querySelectorAll('.ps')[0];
var ps2 = document.querySelectorAll('.ps')[1];
var ps3 = document.querySelectorAll('.ps')[2];
var ps4 = document.querySelectorAll('.ps')[3];

用于以前缀开头的所有元素的CSS选择器

4 个答案: