Далее на странице...
Здесь мы будем использовать JavaScript для работы c веб-страницей.
Как получать элементы со страницы?
Это начало важной темы. Здесь формируется понимание того, как работает JavaScript.
При этом первым делом нужно знать, что такое DOM - Объектная модель документа. Об этом далее.
DOM - Объектная модель документа
О том, что такое DOM - Объектная модель документа - читайте здесь.
Итак, веб-страница - это некий документ, который имеет определенную структуру. И когда документ (страница) существует, то к нему можно обратиться как к объекту. Отсюда и название Объектная модель документа.
У любого объекта есть методы. Таким образом применительно к веб-странице, как к объекту, используются определенные методы: для получения доступа к элементам страницы и для какого-либо взаимодействия с ними.
Глобальный объект document
Чтобы обратиться к DOM используется объект document - это глобальный объект веб-страницы. Это и есть сама страница.
Об объекте document - читайте здесь и немного здесь (для лучшего понимания).
Если набрать в консоли браузера document. то мы увидим список всех свойств и методов глобального объекта document, которые можно использовать применительно к веб-странице.
Для практики, чтобы иметь навыки получения элементов с веб-страницы и взаимодействия с ними, мы будем работать с простой страницей - вот так она выглядит в браузере.
Это ссылка на архив с исходными файлами.
Методы для получения элементов с веб-страницы
Методы для получения элементов с веб-страницы можно разделить на 2 категории:
1) Это методы которые существуют уже давно. Они будут рассмотрены на этой странице.
2) Методы которые появились относительно недавно. О них читайте здесь.
Итак, начнем с 1-ой группы методов, которые существуют уже давно и используются для получения элементов с веб-страницы.
1) Это методы которые существуют уже давно. Они будут рассмотрены далее.
2) Методы которые появились относительно недавно.
Итак, начнем с 1-ой группы методов, которые существуют уже давно и используются для получения элементов с веб-страницы.
Метод getElementById - Выборка по id
Метод getElementById существуют уже давно и отвечает за выбор элемента страницы по id идентификатору.
Напомним, что id-идентификатор уникален и может быть только один на странице.
Дополнительно о методе getElementById читайте здесь.
Пример 1.1
HTML-код
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JavaScript</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-код
const box = document.getElementById("box");
console.log(box);
Результат в консоли
<div class="box" id="box"></div>
В результате мы видим элемент страницы - это блок div с id="box". Так работает метод getElementById. Это довольно простой метод.
Метод getElementsByTagName - Выборка по имени тега
Рассмотрим примеры того, как работает метод getElementsByTagName.
Метод getElementsByTagName существуют уже давно и отвечает за выбор элементов страницы по имени тега.
Таких элементов может быть не один, не два, а десятки, сотни и даже тысячи. Метод getElementsByTagName возвращает псевдомассив из указанных элементов.
Дополнительно о методе getElementsByTagName читайте здесь.
Продолжим работать с кодом из примера 1.1 и сделаем выборку всех кнопок - это тег button.
Пример 2.1
HTML-код
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JavaScript</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-код
const btns = document.getElementsByTagName('button');
console.log(btns);
Результат в консоли
HTMLCollection(5) [button, button, button, button, button]
0: button
1: button
2: button
3: button
4: button
length: 5
__proto__: HTMLCollection
В результате мы получили HTMLCollection (HTML-коллекцию): псевдомассив из элементов button - из 5-ти кнопок.
Как получить доступ к конкретному элементу - к конкретной кнопке?
Для этого нужно обратиться к ней как к элементу массива.
Продолжим работать с html-кодом из примера 2.1.
И получим доступ ко 2-ой кнопке, то есть к элементу массива с индексом 1.
Пример 2.2
JavaScript-код
const btns = document.getElementsByTagName('button')[1];
console.log(btns);
Результат в консоли
<button>2</button>
Это был первый способ: на этапе формирования запроса при помощи метода getElementsByTagName, было указано, к какому элементу псевдомассива, мы хотим получить доступ.
Мы увидим тот же результат, если сделаем так:
Пример 2.3
JavaScript-код
const btns = document.getElementsByTagName('button');
console.log(btns[1]);
Результат в консоли
<button>2</button>
Здесь мы сначала сформировали псевдомассив, сделав выборку всех кнопок. И после этого указали, какая кнопка (какой элемент массива) нас интересует.
Что если на странице будет один элемент/один тег? В данном случае - одна кнопка (один тег button). Что в этом случае возвращает метод getElementsByTagName?
Пример 2.4
HTML-код
<body>
<div class="box" id="box"></div>
<button>1</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>
JavaScript-код
const btns = document.getElementsByTagName('button');
console.log(btns);
console.log(btns[0]);
Результат в консоли
HTMLCollection [button]
0: button
length: 1
__proto__: HTMLCollection
<button>1</button>
В любом случае мы будем иметь дело с псевдомассивом. Поэтому для взаимодействия с конкретным элементом страницы, полученным в результате работы метода getElementsByTagName, к нему следует обращаться как к элементу массива.
Важно усвоить этот момент.
Следует понимать, как работает метод getElementsByTagName.
В реальной практике метод getElementsByTagName используется редко.
Метод getElementsByClassName - Использование классов
Помимо тегов для доступа к элементам страницы можно использовать и классы.
Метод getElementsByClassName существуют уже давно и отвечает за выбор элементов страницы по имени класса.
Метод getElementsByClassName работает также, как и метод getElementsByTagName и возвращает псевдомассив из элементов с указанным классом.
Продолжим работать с кодом из примера 2.1 и сделаем выборку всех элементов с классом circle.
Пример 3.1
HTML-код
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JavaScript</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-код
const circle = document.getElementsByClassName('circle');
console.log(circle);
Результат в консоли
HTMLCollection(3) [div.circle, div.circle, div.circle]
0: div.circle
1: div.circle
2: div.circle
length: 3
__proto__: HTMLCollection
В результате выборки по классу мы получили HTMLCollection (HTML-коллекцию): псевдомассив из 3-х элементов страницы - это теги div с классом circle.
Здесь была рассмотрена работа трех методов, предназначенных для получения элементов в веб-страницы: getElementById, getElementsByTagName и getElementsByClassName.
Далее читайте о получении элементов по CSS селектору: это методы queryselectorall и queryselector.
