Вы слышали, что наш JavaScript имеет возможность получать доступ ко всем элементам HTML-документа и изменять их, или что данные внутри веб-страницы могут обновляться без обновления. Или, если вы находите способ реализовать логику в своем HTML и отображать динамический контент, вы находитесь в нужном месте.
Я собираюсь пройти через это один за другим, и DOM - тот человек, который меня поддержит.
Узнайте о веб-браузере
Давайте сделаем обзор веб-браузера, прежде чем переходить к DOM.
- Навигатор представляет состояние и идентификатор браузера и представлен объектом
Navigator
в JavaScript. Он содержит информацию об операционной системе, поставщике программного обеспечения и информации о программном обеспечении. - Окно - это вкладка браузера, на которой загружается веб-страница, представленная в JavaScript объектом
Window
. Этот объект помогает получить текущую ширину / высоту окна, получить доступ к хранилищу пользователя или присоединить обработчик событий. - Документ - это фактическая страница, которая загружается в окно, и она представлена в JavaScript объектом
Document
. Манипулируя документом, мы вносим большинство изменений в Интернет. Итак, это основная тема данной статьи.
Что такое DOM?
Согласно стандарту консорциума W3C (World Wide Web Consortium), объектная модель документа (DOM) - это не зависящий от платформы и языка интерфейс, который позволяет программам и сценариям динамически получать доступ и обновлять содержимое, структуру и стиль документа.
Стандарт W3C DOM состоит из следующих частей в зависимости от их консорциума:
- Core DOM - стандартная модель для всех типов документов
- XML DOM - стандартная модель для XML-документов
- HTML DOM - стандартная модель для HTML-документов
Что такое HTML DOM?
HTML DOM - это стандартная объектная модель и объектно-ориентированное представление документа HTML в виде логической древовидной структуры, где каждый узел содержит объект, представляющий часть документа. Это содержит:
- HTML-элементы как объекты
- Свойства всех элементов HTML
- Методы для доступа ко всем элементам HTML
- События для всех элементов HTML.
Модель HTML DOM - это стандарт для получения, изменения, добавления или удаления элементов HTML. Когда веб-страница загружается, браузер создает объектную модель документа веб-страницы.
Модель HTML DOM строится как дерево объектов следующим образом:
Давайте перейдем к пониманию некоторых основ DOM.
- Документ - это вся страница, на которую документ загружается в веб-браузер.
- Узел - чтобы добавить новый элемент в HTML DOM, сначала необходимо создать узел элемента, а затем добавить его к существующему элементу.
<div id="parag"> <p id="para1">Here is myparagraph.</p> <p id="para2">Here is my second paragraph.</p> </div> <script> var para = document.createElement("p"); var node = document.createTextNode("Here is my new one."); para.appendChild(node); var element = document.getElementById("parag"); element.appendChild(para); </script>
3. Методы HTML DOM. Методы HTML DOM - это действия, которые вы можете выполнять с элементами HTML, например добавлять или удалять элементы HTML. Свойство - это значение, которое можно получить или установить, как при изменении содержимого элемента HTML.
<p id="parag"></p> <script> document.getElementById("parag").innerHTML = "Heyyy DOM!"; </script>
Здесь getElementById
- это метод, а innerHTML
- это свойство.
4. HTMLCollection - объект HTMLCollection
возвращается методом getElementsByTagName()
. Объект HTMLCollection
представляет собой список (набор) элементов HTML в виде массива.
<p>Hello DOM!</p> <p id="parag"></p> <script> var myCollection = document.getElementsByTagName("p"); document.getElementById("parag").innerHTML = "The innerHTML of the paragraph is: " + mydomCollection[0].innerHTML; </script>
Приведенный выше код выбирает все элементы ‹p› в документе, и к ним можно получить доступ через индексный номер для этих элементов в коллекции.
Общие методы манипуляции с DOM
Теперь я собираюсь показать вам, как использовать объект документа для доступа и управления HTML.
Поиск элементов HTML
document.getElementByID(id)
Найти элемент по идентификатору элементаdocument.getElementByTagName(name)
Найти элементы по имени тегаdocument.getElementByClassName(name)
Найти элементы по имени класса
Добавление и удаление элементов
document.createElement(element)
Создайте элемент HTMLdocument.removeChild(element)
Удалить элемент HTMLdocument.appendChild(element)
Добавить элемент HTMLdocument.replaceChild(new, old)
Заменить элемент HTMLdocument.write(text)
Записать в выходной поток HTML
Добавление обработчиков событий
document.getElementById(id).onclick=function(){code}
Добавление кода обработчика событий к событию onclick
Упаковать
Объектная модель документа (DOM) - это платформа, которая позволяет программам и скриптам получать доступ и обновлять содержимое, структуру и стиль документа динамически. Объектная модель документа - это спецификация для переносимости сценариев JavaScript и программ Java между веб-браузерами. Итак, давайте еще раз встретимся с другой интересной темой в ближайшее время.
А пока оставайтесь в безопасности!