существует множество полезных методов. я постараюсь перечислить некоторые из наиболее часто используемых.
1–)document.getElementById
он приносит элемент с атрибутом «id». независимо от того, где это
<div id="elem"> <div id="elem-content">Element</div> </div> <script> // get the element let elem = document.getElementById('elem'); // make its background red elem.style.background = 'red'; </script>
нет :
1-) идентификатор должен быть уникальным. может быть только один элемент с указанным
2-) getElementById вызывается только для объекта документа
2-) querySelectorAll или q uerySelector
пока самым универсальным методом является q uerySelectorAll. используется для извлечения всех элементов, подпадающих под критерии
<ul> <li>The</li> <li>test</li> </ul> <ul> <li>has</li> <li>passed</li> </ul> <script> let elements = document.querySelectorAll('ul > li:last-child'); for (let elem of elements) { alert(elem.innerHTML); // "test", "passed" } </script>
Этот метод действительно мощный, потому что можно использовать любой селектор CSS.
Также поддерживаются селекторы CSS, такие как :hover
и :active
. Например, document.querySelectorAll(':hover')
вернет коллекцию с элементами, над которыми сейчас находится указатель (в порядке вложенности: от самого внешнего <html>
к самому вложенному).
3-) getElementsBy*
1-) getElementsByTagName = elem.getElementsByTagName(tag)
ищет элементы с заданным тегом и возвращает их коллекцию. Параметр tag
также может быть звездочкой "*"
для «любых тегов».
2-) getElementsByClassName = elem.getElementsByClassName(className)
возвращает элементы с заданным классом CSS.
3-)getElementsByName =document.getElementsByName(name)
возвращает элементы с заданным атрибутом name
для всего документа. Используется очень редко.
<form name="my-form"> <div class="article">Article</div> <div class="long article">Long article</div> </form> <script> // find by name attribute let form = document.getElementsByName('my-form')[0]; // find by class inside the form let articles = form.getElementsByClassName('article'); alert(articles.length); // 2, found two elements with class "article" </script>
Все методы "getElementsBy*"
возвращают живую коллекцию. Такие коллекции всегда отражают текущее состояние документа и «автообновляются» при его изменении.
В приведенном ниже примере есть два скрипта.
- Первый создает ссылку на коллекцию
<div>
. На данный момент его длина составляет1
. - Второй скрипт запускается после того, как браузер встречает еще один
<div>
, поэтому его длина равна2
.
Напротив, querySelectorAll
возвращает статическую коллекцию. Это как фиксированный массив элементов.