Объект Document в JavaScript

В JavaScript имеется объект, который отвечает за документ в целом. Этот объект является свойством объекта Window, и используется он безумно часто. Этот объект называется Document. И именно он является свойством объекта Window. Через объект Document в JavaScript мы можем получить доступ к любому элементу нашей страницы.

Мы не будем разбирать методы объекта Document просто потому, что ничего особо интересного там нет. Единственный метод, который регулярно используется - это write(). Но мы с ним так часто встречались, что, думаю, что Вы с ним уже разобрались, и не стоит о нём больше упоминать. Мы разберём только свойства объекта Document. И начнём мы со свойства bgColor, отвечающего за цвет фона. Сразу говорю, что свойства объекта Document доступны как для чтения, так и для записи:

document.bgColor = "red";

После запуска скрипта фон станет красным. Давно мы с Вами не писали интересных задач, и пора бы это исправить. Давайте сделаем с Вами мигающий фон:

var counter = 0;
setInterval(blink, 1000);
function blink() {
if (counter % 2 == 0) document.bgColor = "red";
else document.bgColor = "white";
  counter++;
}

Теперь поясняю, как он работает. Вначале создаётся переменная counter, которая отвечает за количество запусков функции. Затем запускается таймер, который вызывает функцию blink() через каждые 1000 миллисекунд. Внутри функции blink() проверяется на чётность переменная counter(операция % - это остаток от деления, в нашем случае остаток от деления на 2). Если counter - чётное число, то есть остаток при делении на 2 равен 0, то фон становится красным. Если остаток при делении не равен 0 (то есть в нашем случае он может быть равен только 1), то, соответственно, сделать фон белым. И после этого увеличиваем на 1 переменную counter (чтобы она изменила чётность). Затем следующий запуск и так до бесконечности. Это был пример использования свойства bgColor.

Следующие три свойства относятся к цвету ссылок. Свойство linkColor - цвет не посещённой ссылки, vlinkColor - цвет посещённой ссылки, а свойство alinkColor - цвет активной ссылки (то есть ту, которую мы в данный момент нажимаем). Давайте простейший пример приведу:

document.linkColor = "green";
document.vlinkColor = "red";
document.alinkColor = "blue";

Думаю, что здесь всё прозрачно. Также заметьте, что это будет работать не всегда. В частности, это зависит от браузера и его настроек. Например, "посещённых ссылок" вообще не будет, если пользователь отключил сохранение истории посещений в браузере.

Ещё одно свойство отвечает за заголовок страницы. Свойство называется title, и давайте его выведем, а затем ещё и поменяем:

document.write(document.title);
document.title = "Title JavaScript";

И если Вы запустите этот скрипт, то увидите в окне браузера заголовок страницы. А также обратите внимание, что заголовок поменялся на "Title JavaScript". То есть Вы можете динамическим образом менять заголовки страниц. Например, сделать заголовок страницы в виде бегающей строки. Как это сделать? Делаю подсказку: у Вас должны быть использованы "пробелы". То есть сначала строка должна быть такой: "     Title JavaScript", потом "  Title JavaScript". В конце концов, исчезнут "пробелы" и дальше можно будет убирать по одной букве. Это идея, которую Вы могли бы легко реализовать. Если Вы читали до этого все статьи по JavaScript, то должны без проблем сделать такую вещь.

Ещё одно свойство показывает дату последней модификации страницы - lastModified:

document.write(document.lastModified);

Если Вы изменили страницу и после этого не уходили пить чай, то Вы увидите практически текущее время. Это и есть дата последнего изменения страницы.

И последнее свойство, которое мы рассмотрим - это referrer. Это свойство показывает, откуда пришёл пользователь на сайт. Чтобы проверить это свойство Вам придётся создать ещё одну страницу, поставить ссылку на страницу, где проверяется свойство referrer. И после перехода по ссылке, Вы увидите, откуда пришли. Свойство referrer используется аналогично другим свойствам объектов в JavaScript:

if (document.referrer != "")
  document.write("Вы пришли с: " + document.referrer);

В этом простом скрипте проверяется: если "referrer" не пустой, то выводим человеку сообщение о том, откуда он пришёл (например, с поисковой системы). Если свойство referrer оказалось пустым (то есть человек непосредственно ввёл адрес страницы вручную), то тогда ничего не делаем.

Это далеко не все свойства объекта Document, но я ещё раз говорю, что этот объект является огромным по значению и по количеству свойств. И ближайшие несколько статей, мы с Вами только и будем делать, что рассматривать многочисленные свойства объекта Document. И уже в следующей статье мы познакомимся с ещё одним свойством объекта Document - location, которое само является объектом и, причём, достаточно часто используемым.