Вы слышали, что наш 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.

  1. Документ - это вся страница, на которую документ загружается в веб-браузер.
  2. Узел - чтобы добавить новый элемент в 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)Создайте элемент HTML
  • document.removeChild(element)Удалить элемент HTML
  • document.appendChild(element)Добавить элемент HTML
  • document.replaceChild(new, old)Заменить элемент HTML
  • document.write(text)Записать в выходной поток HTML

Добавление обработчиков событий

  • document.getElementById(id).onclick=function(){code} Добавление кода обработчика событий к событию onclick

Упаковать

Объектная модель документа (DOM) - это платформа, которая позволяет программам и скриптам получать доступ и обновлять содержимое, структуру и стиль документа динамически. Объектная модель документа - это спецификация для переносимости сценариев JavaScript и программ Java между веб-браузерами. Итак, давайте еще раз встретимся с другой интересной темой в ближайшее время.

А пока оставайтесь в безопасности!

Использованная литература:

Https://www.w3.org/TR/WD-DOM/introduction.html