Использование `.includes` в атрибутах HTML-элемента?
Я хочу получить массив всех атрибутов элемента HTML (включая их имена и значения), имя которого соответствует строке.
<div id = "myDiv" class = "myClass" myPrefix-template = "artist-group" myPrefix-records = "sculptors" myPrefix-caption = "People Who Sculpt"></div>
Как получить массив всех объектов-атрибутов, имя которых начинается с myPrefix-?
Это не работает:
let myDiv = document.querySelector("#myDiv");
let attribs = myDiv.attributes;
let dataAttribs = attribs.filter(attrib => {
return attrib.name.includes('myPrefix-');
});
Кажется, этот код должен работать. Это основано на этом: https://masteringjs.io/tutorials/fundamentals/filter-array-of-objects
Следующие работы:
const characters = [
{ name: 'MT-caption', value: 'Some People' },
{ name: 'MT-records', value: 'sculptures' },
{ name: 'class', value: 'Deep Space Nine' }
];
tngCharacters = characters.filter(character => {
return character.name.includes('MT-');
});
@JaromandaX И я уверен, вы можете сказать мне, почему моя попытка с data- не работает. replit.com/@johnaweiss/element-dataset#script.js
нет, я не могу тебе этого сказать
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Отличный ответ был любезно опубликован другим участником, но, к сожалению, они удалили свой пост. Вот:
Новый HTML:
Имена настраиваемых атрибутов должны быть строчными буквами «myprefix-etc». .includes не найдет «myPrefix-etc», как указано в вопросе. Следует переписать как:
<div id = "myDiv" class = "myClass" myprefix-template = "artist-group" myprefix-records = "sculptors" myprefix-caption = "People Who Sculpt"></div>
JS:
// get element
const myDiv = document.querySelector("#myDiv");
// convert attributes from NamedNodeMap to array
const attribs = [...myDiv.attributes];
// set search-string
const searchString = "myprefix-"
// filter the array where name includes the search string
const foundAttribs = attribs.filter(attrib => {
return attrib.name.includes(searchString);
});
// print items to console
foundAttribs.forEach((attrib) => console.info(attrib.name))
использованная литература
Как преобразовать список узлов DOM в массив в Javascript?
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
подсказка: все атрибуты
data-*доступны вmyDiv.dataset- ваш фильтр вообще не нужен :p