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

#javascript #typescript

Вопрос:

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

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

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

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

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

Ответ №1:

Поскольку .querySelectorAll() не имеет .map() прототипа (в отличие от .forEach() ), лучше всего деструктировать массивоподобный список узлов в обычный массив (используя [...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