ИТ Блог. Создание сайтов с применением JavaScript
(Пока оценок нет)
Загрузка...
Объектная модель документа, как правило, упоминается как DOM, является важной частью создания интерактивных веб — сайтов. Это интерфейс, который позволяет языку программирования управлять контентом, структурой и стилем сайта. JavaScript является клиентом языка сценариев, который подключается к DOM в интернет — браузере.
Почти каждый раз, когда веб — сайт выполняет действие, например, поворот между изображениями в слайд — шоу, отображая сообщение об ошибке, когда пользователь пытается отправить неполную форму, или переключая меню навигации, это является результатом JavaScript доступа и манипулирования DOM. В этой статье мы узнаем, что такое DOM, как работать с объектом document, и какая разница между исходным кодом HTML и DOM.
[gn_box title=»Примечание:» box_color=»#91b5ff»]Хотя DOM является язык агностик, или создан, чтобы быть независимым от конкретного языка программирования, на протяжении всего этого ресурса мы сосредоточимся и обратимся к реализации JavaScript в HTML DOM.[/gn_box]
Для того, чтобы эффективно понять DOM и как он относится к работе с сетью, необходимо иметь имеющиеся знания HTML и CSS. Также полезно иметь знакомство с фундаментальным синтаксисом JavaScript и структурой кода.
На самом базовом уровне, веб-сайт состоит из HTML-документа. Браузер, который вы используете для просмотра веб-сайта является программа, которая интерпретирует HTML и CSS и делает стиль, содержание и структуру на страницу, которую вы видите.
Помимо разбора стиля и структуры HTML и CSS, браузер создает представление документа, известный как объектная модель документа. Эта модель предоставляет JavaScript доступ к содержимому текста и элементам документа веб-сайта в качестве объектов.
JavaScript является интерактивным языком, и это легче понять новые концепции на практике. Давайте создадим очень простой сайт. Создайте файл 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>
Ввод документа и работа с ним напрямую в консоли-это не то, что вы обычно будете делать за пределами отладки, но это помогает точно определить, что такое объект документа и как его изменить, как мы узнаем ниже.
В настоящее время, в этом примере, кажется, что исходный код HTML и DOM являются одно и тоже. Есть два случая, в котором браузер сгенерированного DOM будет отличаться от исходного кода HTML:
Продемонстрируем, как 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>
[gn_box title=»Примечание:» box_color=»#91b5ff»]Для того, чтобы изменить свойство background-color в CSS, мы должны были ввести backgroundcolor в JavaScript. Любой дефис свойства CSS будет написан в стиле camelCase в JavaScript.[/gn_box]
Код 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).
Спасибо!
Теперь редакторы в курсе.