Html collection get element

HTMLCollection

Интерфейс HTMLCollection является обобщённой коллекцией (объектом, ведущим себя подобно массиву) элементов (в порядке упоминания в документе) и предоставляет методы и свойства для получения хранящихся в нём элементов.

Примечание: Интерфейс назван HTMLCollection по историческим причинам. До стандарта DOM4 коллекции, реализующие данный интерфейс, использовались только для хранения HTML-элементов.

HTMLCollection , хранящая элементы DOM, является динамической. При изменении документа она моментально отражает все произведённые изменения.

Свойства

Возвращает количество элементов в коллекции.

Методы

Возвращает узел с порядковым номером 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 со всеми найденными элементами.

Спецификации

Смотрите также

Found a content problem with this page?

Источник

DOM HTMLCollection

An HTMLCollection is an array-like collection (list) of HTML elements.

The elements in a collection can be accessed by index (starts at 0).

The length Property returns the number of elements in the collection.

HTMLCollection vs NodeList

An HTMLCollection is almost the same as a NodeList.

See the description below.

WHO Returns an HTMLCollection?

Properties and Methods

The following properties and methods can be used on an HTMLCollection:

Name	Description
length	Returns the number of elements in an HTMLCollection
item()	Returns the element at a specified index
namedItem()	Returns the element with a specified id

Examples

Example

Example

The number of

elements in the document are:

Example

Loop over the elements in an HTMLCollection:

Not an Array

An HTMLCollection is not an Array!

An HTMLCollection may look like an array, but it is not.

You can loop through an HTMLCollection and refer to its elements with an index.

But you cannot use Array methods like push(), pop(), or join() on an HTMLCollection.

The Difference Between an HTMLCollection and a NodeList

A NodeList and an HTMLcollection is very much the same thing.

Both are array-like collections (lists) of nodes (elements) extracted from a document. The nodes can be accessed by index numbers. The index starts at 0.

Both have a length property that returns the number of elements in the list (collection).

An HTMLCollection is a collection of document elements.

A NodeList is a collection of document nodes (element nodes, attribute nodes, and text nodes).

HTMLCollection items can be accessed by their name, id, or index number.

NodeList items can only be accessed by their index number.

The getElementsByClassName() and getElementsByTagName() methods return a live HTMLCollection.

The querySelectorAll() method returns a static NodeList.

The childNodes property returns a live NodeList.

Источник

HTML Collection и Node List

Коллекции элементов DOM-дерева. Похожие, но отличающиеся.

Время чтения: меньше 5 мин

Обновлено 21 февраля 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

HTML Collection и Node List — это очень похожие на массив коллекции. Они хранят элементы веб-страницы (узлы DOM). Node List может хранить любые типы узлов, а HTML Collection — только узлы HTML элементов. К элементам коллекций можно обращаться по индексу, но у них нет привычных методов массива.

Node List возвращают метод query Selector All ( ) и свойство child Nodes .

Полный список всех методов, возвращающих типы Node List или HTML Collection можно узнать в стандарте DOM.

Как понять

Скопировать ссылку «Как понять» Скопировано

HTML Collection возвращают методы, которые работают с DOM — представлением HTML-кода страницы в JavaScript.

Полученная один раз коллекция всегда остаётся актуальной — JavaScript будет обновлять её в случае, если на странице появляется подходящий элемент. Поэтому HTML Collection называют «живой» коллекцией.

Например, единожды получив коллекцию мы можем не заботиться о её поддержке:

Node List работает почти так же, как и HTML Collection .

1. Node List может хранить любые типы узлов, например текстовые узлы и комментарии, а HTML Collection — только узлы HTML элементов;
2. HTML Collection позволяет обращаться к элементам не только по индексу, но и по имени с помощью метода named Item ;
3. Node List может быть не только «живой» коллекцией, но и статической. Такая коллекция не обновляется при появлении на странице новых элементов.

«Живой» Node List возвращают метод get Elements By Name ( ) и свойство child Nodes .

Статический Node List возвращает метод query Selector All ( ) .

На практике

Скопировать ссылку «На практике» Скопировано

Николай Лопин советует

Скопировать ссылку «Николай Лопин советует» Скопировано

🛠 Используй индексы для получения отдельных элементов коллекции:

 const paragraphs = document.getElementsByTagName('p')console.log(paragraphs[0]) const paragraphs = document.getElementsByTagName('p') console.log(paragraphs[0])    Скопировать Скопировано Не удалось скопировать   

🛠 Если нужно обойти все элементы в цикле, то можно написать классический цикл for :

 const paragraphs = document.getElementsByTagName('p')for (let i = 0; i < paragraphs.length; ++i)  console.log(paragraphs[i].id) // печатаем значение атрибута id элемента> const paragraphs = document.getElementsByTagName('p') for (let i = 0; i  paragraphs.length; ++i)  console.log(paragraphs[i].id) // печатаем значение атрибута id элемента >    Скопировать Скопировано Не удалось скопировать   

Другой вариант — воспользоваться синтаксисом for . . of :

 const paragraphs = document.getElementsByTagName('p')for (let item of paragraphs)  console.log(item.id)> const paragraphs = document.getElementsByTagName('p') for (let item of paragraphs)  console.log(item.id) >    Скопировать Скопировано Не удалось скопировать   

🛠 При создании цикла над HTML Collection убедитесь, что подходящие элементы не добавляются или удаляются со страницы в момент работы цикла. Так как коллекция живая, её обновление во время цикла может создать бесконечный цикл.

🛠 Если очень нужны методы массива, то преобразуйте HTML Collection или Node List в массив с помощью Array . from ( ) .

 const paragraphs = document.getElementsByTagName('p')let array = Array.from(paragraphs) console.log(array.pop()) const paragraphs = document.getElementsByTagName('p') let array = Array.from(paragraphs) console.log(array.pop())    Скопировать Скопировано Не удалось скопировать   

Источник

HTMLCollection item()

The item() method returns the element at a specified index in an HTMLCollection.

HTMLCollection

An HTMLCollection is an array-like collection (list) of HTML elements.

The elements in a collection can be accessed by index (starts at 0).

The length Property returns the number of elements in the collection.

See Also

Syntax

Parameters

Return Value

More Examples

Example

Loop over all elements with and change their font size:

const collection = document.getElementsByClassName(«myclass»);

for (let i = 0; i < collection.length; i++) collection.item(i).style.fontSize ="24px";
>

Example

Get the content of the second

element inside «myDIV»:

const div = document.getElementById(«myDIV»);
const collection = div.getElementsByTagName(«p»);
let text = collection[1].innerHTML;

Browser Support

HTMLCollection.item() is supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник