Последние новости:

Поиск по сайту:

Люби друга, но помни, что он может стать тебе врагом (Сципион).

Введение в DOM

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...
07.11.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.

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

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

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

**ссылки nofollow

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

Статьи партнеров:

0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x

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

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

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

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

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

close

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

close