HTMLCollection
Интерфейс HTMLCollection является обобщённой коллекцией (объектом, ведущим себя подобно массиву) элементов (в порядке упоминания в документе) и предоставляет методы и свойства для получения хранящихся в нём элементов.
Примечание: Интерфейс назван HTMLCollection по историческим причинам. До стандарта DOM4 коллекции, реализующие данный интерфейс, использовались только для хранения HTML-элементов.
HTMLCollection , хранящая элементы DOM, является динамической. При изменении документа она моментально отражает все произведённые изменения.
Свойства
HTMLCollection.length (en-US) Только для чтения
Возвращает количество элементов в коллекции.
Методы
Возвращает узел с порядковым номером index ; отсчёт ведётся от нуля. Возвращает null , если index выходит за границы допустимого диапазона.
Возвращает узел, идентификатор или имя (в целях совместимости) которого совпадает со строкой, переданной в аргументе name . Соответствие имени проверяется в самую последнюю очередь, только для HTML-элементов и только для тех из них, которые поддерживают свойство name . Возвращает null , если искомый элемент отсутствует.
Использование в JavaScript
HTMLCollection предоставляет своё содержимое как собственные свойства, доступные как по имени, так и по индексу (как в массиве). Это связано с тем, что идентификаторы HTML-элементов, содержащие точки и двоеточие (допустимо в HTML5), адресуемы исключительно через синтаксис доступа к массиву. Однако, при числовых идентификаторах невозможно определить, производится ли запрос по индексу или по идентификатору, неявно приведённому к числу.
Пусть в документе присутствует элемент с id , равным « myForm »:
var elem1, elem2; // document.forms имеет тип HTMLCollection elem1 = document.forms[0]; elem2 = document.forms.item(0); alert(elem1 === elem2); // выводит "true" elem1 = document.forms.myForm; elem2 = document.forms.namedItem("myForm"); alert(elem1 === elem2); // выводит "true" elem1 = document.forms["named.item.with.periods"];
Поддержка браузерами
Браузеры по разному ведут себя при наличии нескольких элементов с одинаковыми индексами, либо значениями свойств namedItem . Firefox 8 действует в соответствии с DOM2 и DOM4, возвращая первое совпадение. Internet Explorer и браузеры на основе WebKit возвращают новый экземпляр HTMLCollection . Opera возвращает NodeList со всеми найденными элементами.
Спецификации
- DOM Level 2 HTML, Section 1.4, Miscellaneous Object Definitions
- DOM4: HTMLCollection
Смотрите также
- NodeList
- HTMLFormControlsCollection (en-US), HTMLOptionsCollection (en-US)
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
Как перебрать коллекцию элементов? [дубликат]
Код должен скрывать и показывать картинки и видео по щелчку на
Как перебрать html коллекцию js
Чтобы перебрать html-соллекцию, нужно сначала ее перевести в массив. Для этого можно воспользоваться методом Array.from() или с помощью спред-оператора [. htmlCollection] . После этого массив можно обработать обычным способом. Пример:
const allButtons = document.getElementsByTagName('button'); // Создаем массив с помощью Array.from() const buttons1 = Array.from(allButtons); for (const button of buttons1) // . > // тоже самое со спред-оператором const buttons2 = [. allButtons]; for (const button of buttons2) // . > Как перебрать html коллекцию js
Set — это тип объекта, коллекция или структура данных, где хранятся только уникальные значения, которые могут быть, как примитивами, так и объектами. При добавлении элемента в Set происходит проверка, если значение уже встречается, тогда повторно оно не записывается. Элементы в Set не проиндексированы и располагаются в коллекции в порядке их добавления.
Как создать новый Set
let newSet = new Set()
При создании Set в коллекцию сразу же можно добавить элементы используя переменную или напрямую вставив массив.
let array = [1,1,3,3,4,5,6] let newSet = new Set(array) // let newSetVar2 = new Set([1,1,3,3,4,5,6]) //
Результатом будет коллекция с неповторяющимися элементами.
Для проверки элементов на дубли используется строгое сравнение, так, что если добавить в коллекцию 1 и ‘1’ в Set попадет и то и другое.
let newSet = new Set(['1', 1]) //
Также стоит учитывать, что если добавить два объекта с одинаковыми свойствами, но хранимые, например, в разных переменных (имеют разные ссылки на место в памяти), то в Set попадет, как первый, так и второй объект.
let newSet = new Set() const firstElem = < JavaScript: 'basic' >const secondElem = < JavaScript: 'basic' >newSet.add(firstElem) newSet.add(secondElem) newSet.size // 2
Методы для работы с Set
add()
Добавляет элемент в коллекцию и возвращает обновленный Set .
let newSet = new Set() newSet.add('new element') //
Для того, чтобы добавить еще один элемент, необходимо записать новый add() , если перечислять элементы через запятую в объект будет записан только первый.
newSet.add('new element', 1, 3, 4) // newSet.add('second element') //
delete()
Удаляет элемент из коллекции и возвращает true , если такой был в Set и false если нет.
newSet.delete('new element') // true
clear()
Удаляет все элементы из объекта.
let newSet = new Set(['new element', 'second element']) newSet.clear() // <>
has()
Проверяет, есть ли элемент в коллекции, если да, то возвращает true , в противном случае false .
let newSet = new Set(['new element', 'second element']) newSet.has('second element') // true newSet.has('third element') // false
size
Свойство которое хранит в себе информацию о количестве элементов в Set .
let newSet = new Set(['new element', 'second element']) console.log(newSet.size) // 2
Перебор элементов Set
Так как элементы Set не содержат индексов, обратиться к ним напрямую не получиться, но перебрать можно, используя метод forEach() или цикл for … of .
let newSet = new Set(['JS', 'HTML', 'CSS', 'React']) newSet.forEach(elem => < console.log(elem) >)
let newSet = new Set(['JS', 'HTML', 'CSS', 'React']) for (let elem of newSet)
Также Set имеет следующие встроенные методы
- values() — возвращает новый объект со всеми значениями коллекции в порядке их добавления в Set ;
- keys() — возвращает, тоже, что и values() ;
- entires() — возвращает объект, который при переборе возвращает элементы в виде [value, value] .
Skypro — научим с нуля