从脚本标记中提取自定义属性（不使用数据）

Question

我有许多网站，其中包含以下代码：

<script async custom-element="amp-sidebar"....
<script async custom-element="amp-slider"....

如何仅使用vanilla JS提取所有自定义元素属性。脚本标记没有ID，自定义元素 - 元素是非标准属性（因此我可以添加数据前缀）

我也试过以下，没有运气。

document.querySelectorAll('script[custom-element]')

Answer 1

由于.querySelectorAll()没有.map()原型（与.forEach()不同），最好是将类似数组的NodeList解构为普通数组（使用[...NodeList]或Array.from(NodeList)），而不是使用.map()函数迭代器：

const invalidAttrVal = [...document.querySelectorAll("script[custom-element]")].map(el => 
  el.getAttribute("custom-element") 
);

console.log( invalidAttrVal );

<script async custom-element="amp-sidebar"></script>
<script async custom-element="amp-slider"></script>

以上将创建以下数组

[
  "amp-sidebar",
  "amp-slider"
]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Using_map_generically_querySelectorAll

https://github.com/airbnb/javascript#arrays--from-iterable