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

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_genericically_querySelectorAll

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