Далее на странице...
Продолжаем работать с методами объекта document, которые используются для получения элементов с веб-страницы?
В прошлой статье были рассмотрены уже давно существующие методы - getElementById, getElementsByTagName и getElementsByClassName.
Здесь будут рассмотрены более современные и функциональные методы получения элементов с веб-страниц (поэтому они часто используются в реальных проектах).
Это методы querySelectorAll и querySelector.
Для работы будет использоваться тестовая страница из прошлой статьи. Ниже представлен ее код.
Метод querySelectorAll - Возвращает все элементы
Метод querySelectorAll - универсальный и возвращает все элементы по указанному CSS селектору или группе селекторов.
Подробно о селекторах читайте здесь.
Синтаксис метода querySelectorAll при работе с классами отличен от синтаксиса метода getElementsByClassName.
А при работе с id - от синтаксиса метода getElementById.
При использовании метода querySelectorAll перед именем класса ставится точка .class (см. пример ниже). А перед id-элемента - символ решетка #id.
Пример 1.1
HTML-код
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Elements - Udemy</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="box" id="box"></div>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="wrapper">
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
</div>
<script src="js/script.js"></script>
</body>
</html>
Результат в Браузере
JavaScript-код
'use strict';
const hearts = document.querySelectorAll('.heart');
console.log(hearts);Результат в консоли
NodeList(3) [div.heart, div.heart, div.heart]
0: div.heart
1: div.heart
2: div.heart
length: 3
__proto__: NodeList
entries: ? entries()
forEach: ? forEach()
item: ? item()
keys: ? keys()
length: (...)
values: ? values()
constructor: ? NodeList()
Symbol(Symbol.iterator): ? values()
Symbol(Symbol.toStringTag): "NodeList"
get length: ? length()
__proto__: Object
Метод querySelectorAll возвращает коллекцию элементов, которые соответствуют указанному CSS селектору (в данном случае указанному классу) в качестве статического объекта NodeList. Эта коллекция является псевдомассивом. Но....
Метод querySelectorAll также, как и методы getElementsByClassName и getElementsByTagName возвращает псевдомассив.
Но в отличии от них, при работе с методом querySelectorAll к псевдомассиву применим метод forEach (это видно из примера выше: результат в консоли - строка №8).
Пример 1.2
JavaScript-код
'use strict';
const hearts = document.querySelectorAll('.heart');
console.log(hearts);
hearts.forEach(item => {
console.log(item);
});
Результат в консоли
NodeList(3) [div.heart, div.heart, div.heart]
<div class="heart">...</div>
<div class="heart">...</div>
<div class="heart">...</div>
Для перебора элементов псевдомассива, который вернул метод querySelectorAll используется метод forEach.
Напомним, что метод forEach выполняет callback-функцию. В данном случае используется стрелочная callback-функция. И так как она имеет один параметр item, то он указывается без скобок.
Следующие три записи идентичны...
// Стрелочная callback-функция - Аргумент item без скобок
hearts.forEach(item => {
console.log(item);
});
// Стрелочная callback-функция - Аргумент item в круглых скобках
hearts.forEach((item) => {
console.log(item);
});
// callback-функция с использованием ключевого слова function
hearts.forEach(function(item){
console.log(item);
});
Метод querySelector - Возвращает первый элемент
Метод querySelector - возвращает первый элемент по указанному CSS селектору.
Пример 2.1
Продолжим работать с html-кодом из примера 1.1. И для метода querySelector укажем все тот же класс .heart.
JavaScript-код
'use strict';
const oneHearts = document.querySelector('.heart');
console.log(oneHearts);
Результат в консоли
<div class="heart">...</div>
В результате метод querySelector вернул первый элемент - первый тег div с классом .heart.
Пример 2.2
Далее при помощи метода querySelector получим первый тег div всей страницы.
JavaScript-код
'use strict';
const firstDiv = document.querySelector('div');
console.log(firstDiv);
Результат в консоли
<div class="box" id="box"></div>
Получение элементов - Подводим итог
Подведем итог: в этой и предыдущей статье были рассмотрены методы, работающие с объектной моделью документа DOM.
Для обращения к DOM используется объект document.
Объект document работает только внутри браузера.
У объекта document есть два метода, которые получают только один элемент: это метод getElementById и метод querySelector.
Также у объекта document есть методы для получения HTML-коллекций (это псевдомассивы из элементов страницы). Это методы getElementsByTagName, getElementsByClassName и метод querySelectorAll.
Теперь мы имеем доступ ко всем элементам html-страницы с помощью различных методов, рассмотренных в этой и предыдущей статье.
JavaScript-код
'use strict';
const box = document.getElementById("box"),
btns = document.getElementsByTagName('button'),
circles = document.getElementsByClassName('circle'),
hearts = document.querySelectorAll('.heart'),
oneHearts = document.querySelector('.heart');
В JavaScript есть еще одна возможность для получения доступа к элементам страницы. Часто она неочевидна для начинающих. Новички ее часто забывают и не используют. Это доступ к элементам через родителя.
Доступ к элементам через родителя
Из фрагмента JavaScript-кода представленного выше видно, что доступ ко всем элементам осуществляется через объект document.
В случае с сердцами (это две последние строки кода) можно поступить иначе.
У элементов с классом heart есть родительский элемент с классом wrapper. Поэтому доступ к сердцам можно получить через родителя. При этом объект document уже не участвует.
JavaScript-код
'use strict';
// Доступ к родителю сердец
const wrapper = document.querySelector('.wrapper'),
// Доступ к сердцам через родителя - Объект document уже не участвует
hearts = wrapper.querySelectorAll('.heart'),
oneHearts = wrapper.querySelector('.heart');
// Удаление одного из сердец
hearts[1].remove();
Результат в Браузере
Доступ к элементам страницы через родительский элемент - это очень удобно. Представим, что на странице есть другие элементы с одноименным классом - в нашем случае с классом heart. А здесь мы имеем возможность указать, что нам нужны элементы с классом heart, но именно те, что являются дочерними по отношению к элементу с классом wrapper.
Итак, здесь были рассмотрены устаревшие и современные способы получения доступа к элементам страницы. А также доступ через родительский элемент.
Читайте далее о действиях с элементами на странице - о том, как изменяется стиль элементов страницы.
