ДОМ

DOM — это стандарт W2C, который разбивает веб-страницу на набор объектов. Это позволяет нам получить доступ к каждому элементу через небольшой код!

Зачем мне знать об этом?

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

Вы будете использовать DOM при работе с контактными формами, регистрацией и всем, что вы хотите динамически изменить в ответ на действия пользователей, например, изменение фона после прокрутки!

Доступ к DOM

Javascript можно использовать для доступа к различным частям DOM.

document.getElementById('submit') #Uses the id set in the html tag
document.getElementByClassName('submit') #Uses the class set in the html tag
#Cool other syntax! Use . for class and # for IDs just like in CSS!
document.querySelector('#submit')

Помните, что рекомендуется выбрать один синтаксис и сделать его единым для всего кода.

Затем вы можете сохранить доступный контент в переменную, добавив «.value» в конце, используя приведенный ниже синтаксис. Это позволяет вам получить текстовое содержимое, которое находится в элементе, к которому вы перешли.

Пример:

var message = document.getElementById(‘message’).value;

Наконец-то вы можете сохранить это и распечатать или даже отправить на свой сервер!

Подробнее об этом читайте здесь: Доступ к элементам в DOM

Манипуляции с DOM

Получив доступ к DOM, что теперь? Javascript также можно использовать для изменения стиля и содержания чего-либо в DOM!

Допустим, мы хотим скрыть кнопку отправки после того, как они ее нажмут! Мы бы сделали что-то подобное!

document.querySelector('#submit').style.display = 'none';

Посмотрите, как он показывает шаги: стиль → отображение → значение

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

document.getElementById(‘intro’).value = “Hello World!”;

Посмотрите, как это может выглядеть здесь: https://dev.to/giorgosilias/manipulating-dom-in-javascript-for-beginners-4kac

Проверьте свое понимание

Попробуйте!

<html>
	<body>
		<p>Hello World!</p>
	</body>
	<script src="PATH TO YOUR JS FILE HERE">
</html>

Попробуйте сделать «Hello World!»:

  • Исчезнуть (подсказка: показать)
  • Изменить цвет
  • Стать больше (подсказка: размер шрифта)

Вывод

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

Следующие шаги

DOM можно манипулировать, но есть несколько иные способы сделать это. Затем проверьте фреймворки и посмотрите, как они взаимодействуют с DOM, такими как Vue или React!

Попробуйте эти упражнения: https://www.w3resource.com/javascript-exercises/javascript-dom-exercises.php

Подробнее об этом читайте здесь!

JavaScript HTML DOM