В своем стремлении научиться разработке я посещал учебные курсы по кодированию. Недавно мы перешли к изучению JavaScript — языка, который обеспечивает большую часть интерактивности, с которой пользователи сталкиваются на веб-страницах. Уже одно это довольно удобно для работы.
Если вы будете использовать JavaScript (обычно обозначаемый как «JS»), вам также необходимо знать, как он взаимодействует с объектной моделью документа («DOM»). DOM представляет веб-страницу и представляет собой API, который JavaScript использует для взаимодействия с содержимым веб-сайта. И DOM был разработан для управления и доступа к документам HTML, XML и основным (также известным как все типы документов). В случае веб-страницы HTML DOM позволяет JavaScript получать доступ и изменять все в HTML для этой веб-страницы.
Размышление о структуре DOM прояснило это для меня; когда веб-страница загружается, браузер создает DOM страницы. Например, HTML DOM выглядит как блок-схема или дерево:
Имея этот удобный DOM, вы теперь можете писать JS-код, способный изменить все на веб-странице — от стилей CSS до элементов и атрибутов HTML — включая добавление и удаление на странице или со страницы.
То, как DOM взаимодействует с HTML, заключается в обращении ко всем элементам HTML как к объектам и разрешении взаимодействия с объектами через их свойства и методы. Свойства — это значения, которые вы можете получить или установить, а методы — это действия, которые вы можете выполнять. Для доступа к содержимому элемента используется свойство innerHTML, а для доступа к HTML-элементам — метод getElementById. (Кстати, innerHTML относится к тексту между открывающим и закрывающим HTML-тегами, который фактически будет отображаться на веб-странице.) Как все это выглядит?
В приведенном выше примере getElementById — это метод, который мы используем для доступа к innerHTML, который является свойством. Надеюсь, это поможет немного объяснить основы DOM в JavaScript, и до следующего раза удачного кодирования.
