TOC

Введение в DOM

Вступление

  • Объектная модель документа *, обычно называемая * DOM *, является важной частью создания веб-сайтов интерактивными. Это интерфейс, который позволяет языку программирования управлять содержимым, структурой и стилем веб-сайта. JavaScript - это клиентский язык сценариев, который подключается к DOM в интернет-браузере.

Практически каждый раз, когда веб-сайт выполняет какое-либо действие, например, переключение между слайд-шоу изображений, отображение ошибки, когда пользователь пытается отправить неполную форму, или переключение навигационного меню, это является результатом доступа JavaScript к DOM и манипулирования им. В этой статье мы узнаем, что такое DOM, как работать с объектом + document + и чем отличается исходный код HTML от DOM.

Предпосылки

Для того, чтобы эффективно понять DOM и как это связано с работой с сетью, необходимо иметь знания о HTML и https : //developer.mozilla.org/en-US/docs/Web/CSS [CSS]. Также полезно иметь представление о фундаментальном синтаксисе и структуре кода JavaScript.

Что такое DOM?

На самом базовом уровне веб-сайт состоит из HTML-документа. Браузер, который вы используете для просмотра веб-сайта, - это программа, которая интерпретирует HTML и CSS и отображает стиль, контент и структуру на странице, которую вы видите.

В дополнение к анализу стиля и структуры HTML и CSS браузер создает представление документа, известного как объектная модель документа. Эта * модель * позволяет JavaScript получать доступ к текстовому контенту и элементам веб-сайта * document * как * objects *.

JavaScript - это интерактивный язык, и с его помощью легче понять новые концепции. Давайте создадим очень простой веб-сайт. Создайте файл + index.html и сохраните его в новом каталоге проекта.

index.html

<!DOCTYPE html>
<html lang="en">

 <head>
   <title>Learning the DOM</title>
 </head>

 <body>
   <h1>Document Object Model</h1>
 </body>

</html>

Этот код является знакомым HTML источником нового каркаса сайта. Он содержит самые важные аспекты документа веб-сайта - тип документа и тег + html +, в которые вложены + head + и + body +.

Для наших целей мы будем использовать браузер Chrome, но вы можете получить аналогичный вывод из другого современного браузера. В Chrome откройте + index.html. Вы увидите простой веб-сайт с заголовком «Объектная модель документа». Щелкните правой кнопкой мыши в любом месте страницы и выберите «Осмотреть». Это откроет Инструменты разработчика.

На вкладке Elements вы увидите DOM.

изображение: https: //assets.digitalocean.com/articles/eng_javascript/dom/the-dom.png [Пример DOM]

В этом случае при развертывании он выглядит точно так же, как и исходный код HTML, который мы только что написали, - тип документа и несколько других тегов HTML, которые мы добавили. При наведении курсора на каждый элемент будет выделен соответствующий элемент на отображаемом веб-сайте. Маленькие стрелки слева от элементов HTML позволяют переключать вид вложенных элементов.

Объект документа

Объект + document + - это встроенный объект, который имеет множество * свойств * и * методов *, которые мы можем использовать для доступа и изменения веб-сайтов. Чтобы понять, как работать с DOM, вы должны понимать, как объекты работают в JavaScript. Прочтите Understanding Objects in JavaScript, если вам не нравится концепция объектов.

В Инструментах разработчика на * index.html * перейдите на вкладку Console. Введите + document в консоли и нажмите` + ENTER`. Вы увидите, что вывод такой же, как и на вкладке Elements.

document;
Output#document
<!DOCTYPE html>
<html lang="en">

 <head>
   <title>Learning the DOM</title>
 </head>

 <body>
   <h1>Document Object Model</h1>
 </body>

</html>

Ввод + document + и другая работа непосредственно в консоли - это не то, что вы вообще когда-либо будете делать вне отладки, но это помогает точно определить, что такое объект + document + и как его изменить, как мы узнаем ниже. ,

В чем разница между DOM и исходным кодом HTML?

В настоящее время с этим примером кажется, что исходный код HTML и DOM - это одно и то же. Есть два случая, в которых сгенерированный браузером DOM будет отличаться от исходного кода HTML:

  • DOM модифицируется клиентским JavaScript

  • Браузер автоматически исправляет ошибки в исходном коде

Давайте продемонстрируем, как DOM может быть изменен клиентским JavaScript. Введите в консоль следующее:

document.body;

Консоль ответит этим выводом:

Output<body>
 <h1>Document Object Model</h1>
</body>

+ document - это объект,` + body + - это свойство того объекта, к которому мы получили доступ с точечной нотацией. Отправка `+ document.body + на консоль выводит элемент + body + и все, что внутри него.

В консоли мы можем изменить некоторые живые свойства объекта + body + на этом сайте. Мы отредактируем атрибут + style, изменив цвет фона на` + fuchsia`. Введите это в консоли:

document.body.style.backgroundColor = 'fuchsia';

После ввода и отправки приведенного выше кода вы увидите живое обновление сайта, так как цвет фона изменится.

изображение: https: //assets.digitalocean.com/articles/eng_javascript/dom/modifying-the-dom.png [DOM Live Modification]

Переключившись на вкладку Elements или снова набрав + document.body + в консоли, вы увидите, что DOM изменился.

Output<body style="background-color: fuchsia;">
 <h1>Document Object Model</h1>
</body>

Код JavaScript, который мы ввели, присваивая + fuchsia + к цвету фона + body +, теперь является частью DOM.

Тем не менее, щелкните правой кнопкой мыши на странице и выберите «View Source Source». Вы заметите, что источник сайта не содержит новый атрибут стиля, который мы добавили через JavaScript. Источник веб-сайта не изменится и никогда не будет зависеть от клиентского JavaScript. Если вы обновите страницу, новый код, который мы добавили в консоль, исчезнет.

Другой случай, когда DOM может иметь выход, отличный от исходного кода HTML, - это ошибки в исходном коде. Одним из распространенных примеров этого является тег + table - тег` + tbody` требуется внутри + table +, но разработчики часто не включают его в свой HTML. Браузер автоматически исправит ошибку и добавит + tbody +, модифицируя DOM. DOM также исправит теги, которые не были закрыты.

Заключение

В этом уроке мы определили DOM, получили доступ к объекту + document +, использовали JavaScript и консоль для обновления свойства объекта + document + и рассмотрели разницу между исходным кодом HTML и DOM.

Для получения более подробной информации о DOM просмотрите страницу Document Object Model (DOM) в сети разработчиков Mozilla.

В следующем уроке мы рассмотрим важную терминологию HTML, узнаем о дереве DOM, узнаем, что такое узлы, узнаем о наиболее распространенных типах узлов и начнем создавать интерактивные сценарии с использованием JavaScript.

Related