Объект document предоставляет ряд методов для поиска и управления элементами на веб-страницые:
getElementById(value): выбирает элемент, у которого атрибут id равен value
getElementsByTagName(value): выбирает все элементы, у которых тег равен value. Возвращает список элементов (список типа
NodeList), который аналогичен массиву.
getElementsByClassName(value): выбирает все элементы, которые имеют класс value. Возвращает список NodeList
getElementsByName(value): выбирает все элементы, которые называются value. Возвращает список NodeList
querySelector(value): выбирает первый элемент, который соответствует css-селектору value
querySelectorAll(value): выбирает все элементы, которые соответствуют css-селектору value. Возвращает список NodeList
Например, найдем элемент по id:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<h1 id="header">Home Page</h1>
<script>
const headerElement = document.getElementById("header");
console.log("Text: ", headerElement.innerText); // Text: Home Page
</script>
</body>
</html>
С помощью вызова document.getElementById("header") находим элемент, у которого id="header". А с помощью свойства
innerText можно получить текст найденного элемента.
Стоит отметить, что если элемент не найден, то метод возвращает null. Поэтому перед использованием элемента рекомендуется проверять его на null.
Поиск по определенному тегу:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<h1>Home Page</h1>
<p>Первый абзац</p>
<p>Второй абзац</p>
<script>
const paragraphs = document.getElementsByTagName("p");
for (p of paragraphs) {
console.log(p.innerText); // выводим текст параграфа
}
</script>
</body>
</html>
С помощью вызова document.getElementsByTagName("p") находим все элементы параграфов. Этот вызов возвращает список типа
NodeList, который во многом аналогичен массиву и который содержит найденные элементы. Чтобы получить отдельные элементы этого списка,
можно пробежаться по этому списку в цикле.
Консольный вывод:
Первый абзац Второй абзац
Если нам надо получить только первый элемент, то можно к первому элементу найденной коллекции объектов:
const p = document.getElementsByTagName("p")[0];
console.log(p.innerText);
Если элементов с указанным тегом нет на странице, то возвращается пустой список. С помощью свойства length (как и в случае массивов) можно проверить количество найденных элементов:
const paragraphs = document.getElementsByTagName("p");
console.log(paragraphs.length);
Для перебора списка естественно можно использовать и другие виды циклов:
const paragraphs = document.getElementsByTagName("p");
for (let i=0; i < paragraphs.length; i++) {
console.log(paragraphs[i].innerText);
}
Получение элементов по классу:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<h1>Home Page</h1>
<p class="text">Page Text</p>
<p class="contacts">Email: supercorp@zmail.com</p>
<p class="contacts">Phone: +1-234-567-8901</p>
<script>
const contacts = document.getElementsByClassName("contacts");
for (contact of contacts) {
console.log(contact.innerText);
}
</script>
</body>
</html>
В данном случае выбираем все элементы с классом "contacts". Консольный вывод:
Email: supercorp@zmail.com Phone: +1-234-567-8901
Метод getElementsByName() позволяет получить список из элементов по имени - атрибуту name. Данный метод применяется к элементам форм. Например:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<form>
<p>Language:</p>
<input type="radio" name="lang" value="Java">
<label>Java</label>
<br>
<input type="radio" name="lang" value="JavaScript" checked>
<label>JavaScript</label>
<br>
<input type="radio" name="lang" value="PHP">
<label>PHP</label>
<br>
</form>
<script>
// выбираем все элементы с атрибутом name="lang"
const langs = document.getElementsByName("lang");
for (lang of langs) {
console.log(lang.value); // получаем значение атрибута value
}
</script>
</body>
</html>
В данном случае выбираем все элементы, у которых атрибут name равен "lang". В примере выше это радиокнопки. Затем на консоль выводим значение
атрибута value каждого полученного элемента. Консольный вывод:
Java JavaScript PHP
Стоит отметить, что этот метод может работать несколько иначе в старых браузерах типа Internet Explorer или Opera. В частности, он выбирает элемент, если не только его атрибут name соответствует переданному значению, но и атрибут id.
Выбор по селектору CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<div class="annotation">
<p>Аннотация статьи</p>
</div>
<div class="text">
<p>Первый абзац</p>
<p>Второй абзац</p>
</div>
<script>
const elem = document.querySelector(".annotation p");
console.log(elem.innerText); // Аннотация статьи
</script>
</body>
</html>
Выражение document.querySelector(".annotation p") находит элемент, который соответствует селектору .annotation p. Если на странице
несколько элементов, соответствующих селектору, то метод выберет первый из них.
Чтобы получить все элементы по селектору, можно подобным образом использовать метод document.querySelectorAll, который возвращает список NodeList из найденных элементов:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<div class="annotation">
<p>Аннотация статьи</p>
</div>
<div class="text">
<p>Первый абзац</p>
<p>Второй абзац</p>
</div>
<script>
const elems = document.querySelectorAll(".text p");
for (elem of elems) {
console.log(elem.innerText);
}
</script>
</body>
</html>
Вывод браузера:
Первый абзац Второй абзац
Подобным образом мы можем искать элементы не только во всем документе, но и в отдельных элементах на веб-странице. Например:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<div id="article">
<h1 id="header">Home Page</h1>
<p class="text">Page Text 1</p>
<p class="text">Page Text 2</p>
</div>
<div id="footer">
<p class="text">Footer Text</p>
</div>
<script>
// получаем элемент с id="article"
const article = document.getElementById("article");
// в этом элементе получаем все элементы с class="text"
const articleContent = article.getElementsByClassName("text");
for(p of articleContent){
console.log(p);
}
</script>
</body>
</html>
В данном случае мы сначала получаем элемент с id="article", затем внутри этого элемента ищем все элементы с class="text". В результате консоль выведет два элемента:
<p class="text">Page Text 1</p> <p class="text">Page Text 2</p>
Перечислю вкратце список базовых CSS-селекторов, которые мы можем применять для поиска элементов:
*: выбирает все элементы
E: выбирает все элементы типа E
[a]: выбирает все элементы с атрибутом a
[a="b"]: выбирает все элементы, в которых атрибут a имеет значение b
[a~="b"]: выбирает все элементы, в которых атрибут a имеет список значений, и одно из этих значений равно b
[a^="b"]: выбирает все элементы, в которых значение атрибута a начинается на b
[a$="b"]: выбирает все элементы, в которых значение атрибута a завершается на b
[a*="b"]: выбирает все элементы, в которых значение атрибута a содержит подстроку b
[a|="b"]: выбирает все элементы, в которых значение атрибута a представляет ряд значений, разделенных дефисами, и первое из этих значений равно b
:root: выбирает корневой элемент документа
:nth-child(n): выбирает n-ый вложенный элемент (отсчет идет с начала)
:nth-last-child(n): выбирает n-ый вложенный элемент (отсчет идет с конца)
:nth-of-type(n): выбирает n-ый сестринский элемент типа type (отсчет идет с начала)
:nth-last-of-type(n): выбирает n-ый сестринский элемент типа type (отсчет идет с конца)
:first-child: выбирает первый вложенный элемент
:last-child: выбирает последний вложенный элемент
:first-of-type: выбирает первый сестринский элемент типа type
:last-of-type: выбирает последний сестринский элемент типа type
:only-child: выбирает все элементы, которые имеют только один вложенный элемент
:only-of-type: выбирает все сестринские элементы типа type
:empty: выбирает все элементы, которые не имеют вложенных элементов
:link: выбирает все ссылки, которые еще не были нажаты
:visited: выбирает все ссылки, которые уже были нажаты
:active: выбирает все ссылки, которые в текущий момент активны (нажимаются)
:hover: выбирает все ссылки, над которыми в текущий момент находится курсор
:focus: выбирает все элементы, которые в текущий момент получили фокус
:target: выбирает все элементы, к которым можно обратиться с помощью адресов url внутри страницы
:lang(en): выбирает все элементы, в которых атрибут lang имеет значение "en"
:enabled: выбирает все элементы форм, которые доступны для взаимодействия
:disabled: выбирает все элементы форм, которые НЕ доступны для взаимодействия
:checked: выбирает все флажки (чекбоксы) и радиокнопки, которые отмечены
.class: выбирает все элементы с классом class
#id: выбирает все элементы с идентификтором id
:not(s): выбирает все элементы, которые не соответствуют селектору s
E F: выбирает все элементы типа F, которые встречаются в элементах типа E
E > F: выбирает все элементы типа F, которые являются вложенными в элементы типа E
E + F: выбирает все элементы типа F, которые располагаются сразу после элементов типа E
E ~ F: ввыбирает все элементы типа F, которые являются сестринскими по отношению к элементам типа E
Стоит отметить, что из всех этих способов выбор по id обычно самый быстрый. При всех прочих условиях лучше выбирать метод getElementById()
Также для оптимизации работы с DOM для того, чтобы избежать повторной выборки одних и тех же элементов, при первой выборке их лучше сохранять в константы/переменные.
Ряд методов - getElementsByTagName(), getElementsByClassName(), getElementsByName(), querySelectorAll()
возвращает список элементов в виде объекта NodeList, который аналогичен массиву и который мы можем перебрать и получить каждый отдельный элемент из этого набора.
Однако метод querySelectorAll() возвращает статический список NodeList, тогда как остальные методы возвращают нестатический список. В чем разница?
При изменении элементов нестатического списка все изменения сразу же применяются к веб-странице. При изменении элементов из статического списка изменения
могут не сразу изменяться.