ДОМ
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
Подробнее об этом читайте здесь!