從腳本標簽中提取自定義屬性（不使用數據）

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