Философы утверждают, что они ищут; стало быть, они еще не нашли (Тертуллиан).

Введение в DOM

4 мин для чтения
FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
7 ноября 2017
Введение в DOM

Введение

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

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

Примечание:
Хотя DOM является язык агностик, или создан, чтобы быть независимым от конкретного языка программирования, на протяжении всего этого ресурса мы сосредоточимся и обратимся к реализации JavaScript в HTML DOM.

Предпосылки

Для того, чтобы эффективно понять DOM и как он относится к работе с сетью, необходимо иметь имеющиеся знания HTML и CSS. Также полезно иметь знакомство с фундаментальным синтаксисом JavaScript и структурой кода.

Что такое DOM?

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

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

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

index.html
<!DOCTYPE html>
<html lang="ru">

  <head>
    <title>Учебник по DOM</title>
  </head>

  <body>
    <h1>Объектная модель документа</h1>
  </body>

</html>

 

Этот код является знакомым HTML-источником нового скелета сайта. Он содержит абсолютное большинство необходимых аспектов документа сайт — с doctype, HTML-тег с body и head внутри.

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

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

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

Объект document является встроенным объектом, который имеет много свойств и методов, которые можно использовать для доступа и изменений веб – сайтов. Для того, чтобы понять, как работать с DOM, вы должны понимать, как объекты работают в JavaScript.

В инструментах разработчика на index.html, перейдите к вкладке Concole. Введите document в консоль и нажмите ENTER. Вы увидите то, что выводится, и то что вы видели в вкладке Elements.

Output
#document
<!DOCTYPE html>
<html lang="ru">

  <head>
    <title>Учебник по DOM</title>
  </head>

  <body>
    <h1>Объектная модель документа</h1>
  </body>

</html>

 

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

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

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

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

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

< document.body;

 

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

<body>
  <h1>Объектная модель документа</h1>
</body>

 

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

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

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

 

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

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

Вывод

<body style="background-color: fuchsia;">
  <h1>Объектная модель документов</h1>
</body>

 

Примечание:
Для того, чтобы изменить свойство background-color в CSS, мы должны были ввести backgroundcolor в JavaScript. Любой дефис свойства CSS будет написан в стиле camelCase в JavaScript.

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

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

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

Вывод

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

Для получения дополнительной информации для углубленного изучения DOM, смотрите обзор Объектная модель документов (DOM) на странице разработчиков Mozilla (https://developer.mozilla.org/ru/docs/DOM/DOM_Reference).

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Просмотров: 92

Если статья понравилась, то поделитесь ей в социальных сетях:

Читайте также

    Добавить комментарий

    Войти с помощью: 

    Ваш e-mail не будет опубликован. Обязательные поля помечены *

    Сообщить об опечатке

    Текст, который будет отправлен нашим редакторам:

    Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

    badge
    Обратный звонок 1
    Отправить
    galka

    Спасибо! Ваша заявка принята

    close
    galka

    Спасибо! Ваша заявка принята

    close