Раздел: Сайтостроение / JavaScript /
DOM и JavaScript
Что такое JavaScript
Небольшая книга о JavaScript, которая поможет вам в изучении JavaScript. В книге и рассылке сведения для начинающих: что такое JavaScript, как это работает, письма, которые помогут принять решение, надо ли вам это или нет, а также полезные ссылки на обучающие материалы. Подробнее... |
Возможно, вы уже слышали или видели такое наименование, как DOM - Document Object Model (Объектная Модель Документа). Непосредственно к JavaScript это не имеет отношения, однако работа с DOM в JavaScript используется очень широко. В этой статье я кратко расскажу о DOM и приведу пару простых примеров её использования.
Как всегда напоминаю, что полный обучающий курс по JavaScript можно найти здесь:
>>> JavaScript, jQuery и Ajax с нуля до гуру >>>
Итак, DOM - это прикладной программный интерфейс (API), определяющий порядок доступа к объектам, из которых состоит документ.
Этот интерфейс достаточно хорошо стандартизирован и поддерживается всеми браузерами. Internet Explorer (IE) версии 4, как всегда, немного повыпендривался, и имел свою DOM. Однако она так и не была стандартизирована, поэтому уже с 5-й версии даже IE перестал выёживаться и перешёл на DOM стандарта W3C, который поддерживается всеми остальными браузерами. Хотя модель IE4 DOM была сохранена и даже частично стала поддерживаться другими браузерами.
Управление содержимым документа - это основная цель клиентского JavaScript. Поэтому, если вы всерьёз решили заняться этим языком, без изучения и понимания DOM вам никак не обойтись. Просто смиритесь с этим. А если вы не готовы изучать этот вопрос именно сейчас, то его, конечно, можно отложить. Но всегда держите у себя в голове мысль, что рано или поздно к нему придётся вернуться.
ПРИМЕЧАНИЕ
На всякий случай скажу, что такое клиентский JavaScript. Это код,
который выполняется на стороне клиента, то есть непосредственно в браузере.
В общем-то, JavaScript (если говорить о сайтостроении) только на стороне клиента и работает, поэтому слово “клиентский” можно и не добавлять. Однако это словосочетание вы наверняка можете встретить в других источниках, поэтому надо понимать, что это такое.
Вообще с применением DOM мы уже сталкивались, только, возможно, вы об этом не
догадывались. Я говорю о методе write
объекта Document
. С помощью этого метода мы динамически выводим текст в браузере. Примерно так:
document.write("Простой пример использования DOM");
Здесь есть несколько особенностей, о которых я не буду говорить в этой статье, чтобы не раздувать её до объёма “Войны и мира”. Просто ещё раз хочу напомнить, что DOM - это довольно большая тема, и если вы хотите всерьёз заняться JavaScript, то и изучать её надо серьёзно, а не по одной статье.
Свойства объекта Document
У документа есть свойства. Эти свойства можно читать, а иногда и изменять. Этих свойств довольно много даже в первых версиях DOM, поэтому перечислять их все не буду. Просто приведу пару примеров.
document.write(document.title);
Здесь мы выводим на экран значение свойства title текущего документа, то есть текст, который находится между тегами <title> и </title>.
document.bgColor = "yellow";
Здесь мы динамически изменяем значение свойства bgColor, которое отвечает за цвет фона документа. Это свойство соответствует HTML-атрибуту, поэтому использовать его таким образом не советуют. Однако для примера оно вполне подходит.
Как я уже говорил, DOM - это сложная и большая тема. Целью этой статьи было только показать вам в общих чертах, что это такое и как это можно использовать. Если хотите знать больше, то вам сюда:
>>> JavaScript, jQuery и Ajax с нуля до гуру >>>
Вступить в группу "Основы программирования"
Подписаться на канал в РУТУБ Подписаться на Дзен-канал Подписаться на рассылки по программированию |
Программирование на JavaScript
Видеокурс о программировании на JavaScript. Содержит 8 больших разделов от основ до работы с сетевыми запросами. В комплекте 5 подарков - мини-курсов по темам, связанным с сайтостроением. 72 урока продолжительностью более 13 часов. Упражнения и примеры исходных кодов. Поддержка от автора. Подробнее... |