如何使用 JS 获取所有具有指定属性的 HTML 元素？答案

【问题标题】：How To Get All HTML Elements With A Specified Attribute Using JS?如何使用 JS 获取所有具有指定属性的 HTML 元素？
【发布时间】：2018-03-22 12:41:24
【问题描述】：

我想为我的项目创建一个自定义属性，但我无法这样做。我搜索了Google，但没有得到我想要的。

没有data-* 属性，请...

属性与 Vue.js 或 Angular.js 中的属性类似

这似乎是一个愚蠢的问题，但我是初学者，所以请帮忙。

【问题讨论】：

有什么问题？
在谷歌上找到这个：querySelectorAll
@Ele 在使用querySelectorAll 时我将不得不一一提及所有标签名称，这对于所有元素都很难做到
标签名？不，您可以创建选择器，例如 jQuery 的 [myAttr^="Ele"] <-- 查找属性为 myAttr 的元素，其值以 Ele 开头，例如 <span myAttr="EleFromSO"> 或 <p myAttr="EleSO">，等等。 querySelectorAll
谢谢！将其作为答案发送，以便我将其标记为最佳

【解决方案1】：

你可以使用函数querySelectorAll

例如：

这段代码 sn-p 显示了如何查找属性为 myAttr 的元素，该属性的值以 Ele 开头

Array.prototype.forEach.call(document.querySelectorAll('[myAttr^="Ele"]'), function(elem) {
  console.log(elem.textContent);
});

<span myAttr="EleFromSO">EleFromSO</span>
<p myAttr="EleSO">EleSO</p>
<p myAttr="SOEle">SOEle value starts with SO</p>

如果需要查找属性为myAttr的元素：

Array.prototype.forEach.call(document.querySelectorAll('[myAttr]'), function(elem) {
  console.log(elem.getAttribute('myAttr'));
});

<span myAttr="EleFromSO">EleFromSO</span>
<p myAttr="EleSO">EleSO</p>
<p myAttr="SOEle">SOEle value starts with SO</p>

【讨论】：