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


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


Здесь мы будем использовать JavaScript для работы c веб-страницей.

Как получать элементы со страницы?

Это начало важной темы. Здесь формируется понимание того, как работает JavaScript.

При этом первым делом нужно знать, что такое DOM - Объектная модель документа. Об этом далее.



DOM - Объектная модель документа

О том, что такое DOM - Объектная модель документа - читайте здесь.

Итак, веб-страница - это некий документ, который имеет определенную структуру. И когда документ (страница) существует, то к нему можно обратиться как к объекту. Отсюда и название Объектная модель документа.

У любого объекта есть методы. Таким образом применительно к веб-странице, как к объекту, используются определенные методы: для получения доступа к элементам страницы и для какого-либо взаимодействия с ними.

Глобальный объект document

Чтобы обратиться к DOM используется объект document - это глобальный объект веб-страницы. Это и есть сама страница.

Об объекте document - читайте здесь и немного здесь (для лучшего понимания).

Если набрать в консоли браузера document. то мы увидим список всех свойств и методов глобального объекта document, которые можно использовать применительно к веб-странице.

Для практики, чтобы иметь навыки получения элементов с веб-страницы и взаимодействия с ними, мы будем работать с простой страницей - вот так она выглядит в браузере.

Это ссылка на архив с исходными файлами.

Методы для получения элементов с веб-страницы

Методы для получения элементов с веб-страницы можно разделить на 2 категории:

1) Это методы которые существуют уже давно. Они будут рассмотрены далее.

2) Методы которые появились относительно недавно.

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

Фрагмент кода
Методы для получения элементов с веб-страницы можно разделить на 2 категории:

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.



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



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

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

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

Ваше Имя:

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

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

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


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

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