Одной из первых вещей, которую мы рассмотрели, когда начали изучать Javascript во Flatiron, была модель DOM. Кто он? Чем он занимается? Он больше машина, чем человек? Ну да довольно много. ДОМ - это не человек. DOM на самом деле означает объектную модель документа. На самом базовом уровне это представление данных объекта, которые составляют структуру и содержание веб-сайта. Он представляет страницу, чтобы программы могли изменять и манипулировать стилем, структурой и содержимым веб-документов. По сути, это то, как вещи попадают на веб-сайт в стране Javascript.
Итак, как мы его используем? Что ж, к счастью, все, что нужно, — это три основных шага, чтобы манипулировать DOM и заставить что-то появиться на вашей странице. Перво-наперво мы начнем с нашего основного HTML-документа.
Важной частью здесь является ссылка на файл Javascript, который позволит нам получить доступ и поиграть с DOM. Так что же делать? Как насчет того, чтобы добавить какой-нибудь контент в этот ‹раздел›! Вот как мы это делаем:
Шаг 1: Возьмите элемент HTML, которым вы хотите управлять, с помощью document.querySelector и установите для этого значения константу.
Шаг 2: Манипулируйте этим элементом так, как вам нужно. В этом примере мы создадим тег ‹p› для перехода в раздел ‹section›, а затем добавим в него текстовое содержимое.
Шаг 3: Добавьте его! Возьмите то, что мы сделали, и добавьте его обратно к элементу, который мы выбрали на первом шаге. Это должно выглядеть примерно так:
И вуаля! Раздел ‹section› в HTML-документе теперь содержит этот тег ‹p› и текстовое содержимое, которое мы для него установили. Вы можете делать что угодно, особенно с динамическими данными, которые могут меняться в зависимости от того, что вы им даете.
Теперь идите и манипулируйте этими DOM!!!
