«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript


Игра на «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих


Продолжаем работать с методами объекта 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.

Итак, здесь были рассмотрены устаревшие и современные способы получения доступа к элементам страницы. А также доступ через родительский элемент.

Читайте далее о действиях с элементами на странице - о том, как изменяется стиль элементов страницы.



Читайте также...



Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 3
Помощь сайту
Yandex-деньги/Ю-Money
410011236419322
Перевод на карту СБ
4276 1300 1671 5819
WebMoney
R711879515665 Z861169301432

Тематические публикации
Популярные заметки
Последние заметки