Что такое DOM? Это не человек, на самом деле это означает объектную модель документа, которая позволяет создавать динамический HTML, например, изменять элементы HTML или изменять стили CSS на веб-странице.
DOM очень тесно связан с событиями JavaScript; это когда что-то происходит внутри HTML-элемента, поэтому JavaScript может отреагировать на это событие, изменив элемент или выполнив другое «выходное» действие. Есть много событий JavaScript, среди них «onclick», активируемый щелчком пользователя по элементу HTML; когда браузер завершает загрузку веб-страницы, вызывая «реагирование» JavaScript, это еще одно распространенное событие JS, называемое «загрузка».
Как и таблицы стилей CSS, внешние коды JavaScript также должны быть связаны внутри HTML-страницы. Это просто делается путем указания типа и источника сценария в ‹head› HTML. Например,
<script type="text/javascript" src="fileLocationOfJS.js"></script>
будет блоком кода, добавленным в ‹head›. Обратите внимание, что источник или src (в HTML) указывает местоположение фактического внешнего файла JavaScript; это означает, что если “.js” не находится в корневой папке “.html”, в src следует сначала указать папку (за которой следует /), а затем внешний файл JavaScript. (напр. src= "jsFolder/actualJSfile.js")
Как же на самом деле использовать DOM для изменения HTML-элемента? Простым примером является использование объектной модели документа для изменения имени класса элемента HTML.
Для начала представим, что ‹div› имеет идентификатор, установленный на «example_id», и имя класса «class1». Сначала мы начнем с использования,
document.getElementById("example_id")
чтобы специально вызвать определенную часть структуры HTML, в данном случае это атрибут «id». Затем в конец оператора DOM добавляется “.className”, чтобы указать, что имя класса изменяется (используйте “.id”). > при изменении имя идентификатора в HTML-документе).
document.getElementById("example_id").className = "class2"
Наконец, новое значение имени класса переназначается (=) как «class2». И точно так же мы изменили имя класса HTML div, используя JavaScript и DOM.
