Извлечение пользовательских атрибутов из тега скрипта (не используя data-)

Question

У меня есть множество сайтов со следующим кодом:

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

Как извлечь все свойства пользовательских элементов, используя только vanilla JS. Идентификатор тега скрипта отсутствует, а пользовательский элемент-элемент является нестандартным атрибутом (поэтому я могу добавить префикс данных)

Я тоже попробовал следующее, но не повезло.

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