В этой статье будет показана структура документа, с которым он работает. JavaScript. Имея практические знания об объектной модели абстрактного документа, вы можете Написание кода JavaScript И это работает на любой веб-странице.
Быстрые ссылки
Введение
Как это работает Веб-страницы и JavaScript вместе и как они могут разговаривать друг с другом? Ответы заключаются в понимании того, как это работает Объектная модель документа (ДОМ).
ЦЕЛЬ ДОМА
Модель DOM организует содержимое веб-страницы и предоставляет в ней дорожную карту. Модель состоит из узлов. Узлы расположены в иерархии, которую лучше всего рассматривать как древовидную структуру. Мы должны иметь возможность взять любой HTML-код и представить его таким образом.
Например, текст этого абзаца является узлом в объектной модели документа. Абзац - это еще один узел, являющийся родителем текстового узла. Сам документ в конечном итоге является родительским узлом для обоих.
Мы можем написать JavaScript для работы на веб-странице, определив узлы. Поскольку каждая часть содержимого является узлом, мы можем написать JavaScript, связанный с любой сущностью, которую мы хотим изменить. Вы заметите, что это похоже на то, как CSS работа: Он применяет визуальный стиль или внешний вид к контенту, используя атрибуты идентификатора и класса HTML-элементов, точно так же, как ведет себя JavaScript.
Важно отметить, что код CSS и JavaScript находятся не в DOM, а вне ее. Они оба обрабатывают содержимое DOM, а не вы внутри него.
Повторное использование кода
Почему исходный код веб-страниц управляется таким образом? Есть две основные причины:
- Хранение JavaScript в отдельных файлах упрощает повторное использование кода. Когда код JavaScript написан встроенным, рядом с содержимым, на которое он ссылается, его необходимо скопировать, чтобы те же функции выполнялись в другом месте.
- Разделение JavaScript во внешний файл делает исходный код более читабельным за счет удаления функциональности веб-страницы (JavaScript) из содержимого (HTML).
КУПОЛЬНЫЙ договор
Создаваемые и управляемые узлы ограничены тем, что поддерживают спецификации HTML и браузеры. Это одна из причин, почему введение HTML5 Для новых предметов верхнего уровня это важно.
Для наших целей наиболее важными типами узлов являются:
- Элемент
- Атрибут
- Текст
Хотя список спецификаций в Фактически всего двенадцать.
Используйте сценарий для создания узлов в DOM
В целях простой демонстрации мы будем использовать JavaScript для создания определенного элемента.
Здесь мы покажем вам, насколько мощным является JS, используя его для создания одного из самых популярных базовых объектов веб-страницы, а именно: Адрес.
Чтобы следовать этому примеру, создание полностью виртуального сервера не стоит проблем, поэтому лучше использовать онлайн-песочницу. Вам понадобится виджет, чтобы попробовать лайкнуть JSBin. JSBin хорош, потому что он состоит из нескольких частей и включает в себя способ видеть и управлять всем: HTML, JS, CSS и превью веб-страниц за один раз.
(Codepen Похоже, и для этого примера это будет работать так же.)
JSBin также может динамически генерировать URL-адреса для инструкций JS, которыми можно поделиться позже. тебе Пример, который я создал для этой темы.
Я воссоздал и аннотировал следующие фрагменты, чтобы создать новый заголовок H1 в теле:
Фрагмент HTML
фрагмент javascript
//declare a new variable to hold a new h1 element
var newHeading = document.createElement("h1");
//add the text node to the document
var h1Text = document.createTextNode("Heading Level 1");
//make it a child node of the new heading
newHeading.appendChild(h1Text);
//append this as a child of element defined as "bt"
document.getElementById("bt").appendChild(newHeading);
который создает элемент H1 Новое и его содержание напрямую связано с тегом .
Обратите внимание, что исходный HTML-код на правой панели не изменяется. Этот код довольно легко прочитать в этом примере. В расширенной справке по Javascript все может усложниться.
Узнайте немного о структуре словаря JavaScript
Приведенный выше фрагмент требует объяснения.
Создайте вар Переменная, она хранит случайное значение для вашего кода.
= Это агент по найму. Здесь это работает с использованием термина вар и имя новой переменной (например, новыйЗаголовок), чтобы сформировать полную переменную.
объект.метод Это вызов, в котором используется синтаксис "dotЧтобы отделить объекты, такие как документ, от методов, используемых по отношению к ним, как в getElementById.
достойная концепцияобъектыВ программировании много дискуссий, и это выходит за рамки данной статьи. Достаточно сказать, что они являются важными компонентами вашего приложения.
методы Это то, что вы ожидаете: конкретное действие или запланированное действие, которое можно применить к объектам.
Мы обязательно рассмотрели множество отличных ресурсов Чтобы изучить JavaScript. Вернитесь в наш раздел программирования для дополнительной информации.
Что дальше
Одним из самых популярных фреймворков, использующих JavaScript, является JQuery. Это важная основа для последней версии многофункциональных веб-страниц и приложений, и с нее вы, возможно, захотите начать дальше.
JQuery - это библиотека JavaScript, которая сокращает многие повторяющиеся сценарии и задачи, чтобы упростить программирование. JQuery - бесплатное программное обеспечение с открытым исходным кодом под моей лицензией Массачусетский технологический институт وJBL.
