На этом уроке мы рассмотрим объект document, который отвечает за HTML документ, загруженный в окно или вкладку браузера. С помощью этого объекта в JavaScript Вы можете не только получить различную информацию об этом документе, но и изменить его.

Основные объекты браузера

Перед тем как перейти к изучению объекта document, давайте вспомним, какие нам в JavaScript доступны объекты и за что они отвечают.

При открытии документа браузер автоматически создаёт набор объектов для JavaScript, с помощью которых Вы можете не только работать с этим документом (объект document), но и управлять самим браузером (объекты window, location, navigator, screen, history). Все эти объекты образуют объектную модель браузера (BOM - Browser Object Model).

Главным объектом в этой модели является объект window. Все остальные объекты доступны как свойства объекта window (window.document, window.location и т.д.). Если мы работаем с текущим окном, то "window." можно опускать, т.е. document, location и т.д. Объект location - отвечает за адресную строку, объект history - за кнопки вперёд и назад, объект, объект screen - за экран пользователя, объект window - отвечает за само окно, а также позволяет изменять его размеры, перемещать его и т.д., navigator - позволяет получить информацию о браузере.

Наибольший интерес среди всех этих объектов для нас предоставляет именно объект document, т.к. он отвечает за документ, загруженный в окно или вкладку браузера. Он даёт начало объектной модели документа (DOM - Document Object Model), которая стандартизована в спецификации и поддерживается всеми браузерами.

К рассмотрению этой модели мы приступим на следующих уроках. На этом уроке мы рассмотрим некоторые свойства и методы объекта document, т.е. такие которые особого отношения к объектной модели документа не имеют.

Свойства и методы объекта document

Объект document содержит следующие "общие" свойства и методы:

  • Свойство document.implementation — возвращает объект DOMImplementation, ассоциированный с текущим документом.

    Например, определим, поддерживается ли указанная возможность в браузере:

    <div id="docImplementation" class="alert alert-info"></div>
<script>
var modName = "HTML";
var modVer = "2.0";
var checkFeature = document.implementation.hasFeature(modName,modVer);
window.document.getElementById("docImplementation").innerHTML = "DOM " + modName + " " + modVer + " поддерживается? " + checkFeature;
</script>

    JavaScript - свойство implementation объекта document

  • Свойство document.characterSet - возвращает кодировку, которая используется для рендеринга текущего документа. Данное значение может отличаться от кодировки указанной в HTML странице, т.к. пользователь может её переопределить, т.е. выбрать в соответствующем меню браузера другую кодировку, которая будет использоваться для отображения текущего документа. 
    <div id="docCharacterSet" class="alert alert-info"></div>
<script>
var characterSet = document.characterSet;
window.document.getElementById("docCharacterSet").innerHTML = "Кодировка, которая используется для текущего документа: " + characterSet;
</script>

    JavaScript - свойство document.characterSet

  • Свойство document.inputEncoding - возвращает кодировку, которая использовалась во время синтаксического разбора (парсинга) документа. Если документ создан в памяти, то данное свойство возвращает значение null. Данное свойство доступно только для чтения. 
    <div id="docInputEncoding" class="alert alert-info"></div>
<script>
var inputEncoding = document.inputEncoding;
window.document.getElementById("docInputEncoding").innerHTML = "Кодировка документа: " + inputEncoding;
</script>

    JavaScript - свойство document.inputEncoding

  • Свойство document.lastModified - возвращает строку, содержащую дату и время последнего изменения текущего документа. Gecko и Internet Explorer возвращают время в часовом поясе локального компьютера, WebKit - в UTC. 
    alert(document.lastModified);
  • Свойство document.readyState - возвращает строку, содержащую статус текущего документа. Данное свойство доступно только для чтения.

    В процессе загрузки документ последовательно проходит следующие состояния:

    1. uninitialized - процесс загрузки ещё не начался;
    2. loading - идёт процесс загрузки;
    3. loaded - загрузка HTML кода завершена;
    4. interactive - документ достаточно загружен для того, чтобы пользователь мог взаимодействовать с ним. Код JavaScript может начать выполняться только на этом этапе;
    5. complete - документ полностью загружен.

    В большинстве случаев, код JavaScript обычно выполняется и вызывается после того, как документ полностью загружен, т.е. когда он находится в состоянии complete.

    document.onreadystatechange = function () { 
  if (document.readyState == "complete") {
    //выполнить код, после того как документ полностью загружен
  }
}
  • Свойство document.referrer - возвращает строку, содержащую адрес (URL) страницы, с которой пользователь пришёл на эту страницу. Если текущий документ не был открыт через ссылку (например, с помощью закладки или прямого ввода адреса в адресную строку), то данное свойство вернёт пустую строку.

    Например: Откройте новую вкладку и введите в адресной строке https://www.yandex.ru/. В открывшейся странице перейдите по любой ссылке. Откройте консоль в браузере (клавиша F12, вкладка "Консоль") и введите: document.refferer.

    JavaScript - свойство document.referrer

  • Свойство document.cookie - позволяет получить или установить cookie, которые будут связаны с текущим документом.

    Например, откроем новую вкладку в браузере и введём в адресную строку http://ya.ru/ и нажмём на клавишу Enter. После этого перейдём в консоль и поработаем со свойством document.cookie:

    1. Выведем все cookie связанные с текущим документом, т.е. пары ключ=значение: document.cookie;
    2. Запишем новый cookie: document.cookie = "test1 = Test1";
    3. Запишем ещё один новый cookie: document.cookie = "test2 = Test2";
    4. Выведем все cookie связанные с текущим документом: document.cookie.

    JavaScript - свойство document.cookier

  • Свойство document.URL - возвращает строку, содержащую полный URL адрес текущего HTML документа.
  • Свойство document.URI - позволяет получить или задать расположение (URI) документа. Если документ был создан с помощью объекта DocumentImplementation или если он был не определён, то данное свойство возвращает значение null. В отличие от свойства document.URL, свойство document.URI может быть использовано для любых типов документов, в то время как URL можно использовать только для HTML документов.
  • Свойство document.domain - возвращает строку, содержащую доменное имя сервера, с которого загружен текущий документ. Если домен текущего документа не может быть определён, то данное свойство вернёт значение null.

    Например: выведем значения свойств document.URL, document.URI, document.domain в элемент div с id="docInfo":

    <div id="docInfo" class="alert alert-info"></div>
<script>
var documentURL = document.URL;
var documentURI = document.URI;
var documentDomain = document.domain;
var result = "URL: " + documentURL + "<br>";
result += "URI: " + documentURI + "<br>";
result += "Домен: " + documentDomain;
window.document.getElementById("docInfo").innerHTML = result;
</script>

    JavaScript - свойства document: URL, URI, domain

  • Метод document.write() - предназначен для вывода в документ строки, указанной в качестве параметра данного метода. Если данный метод вызывается в процессе загрузки документа, то он выводит строку в текущем месте. В том случае, если данный метод вызывается после загрузки документа, то он приводит к полной очистке этого документа и вывода строчки. Это происходит, потому что после загрузки документа браузер уже полностью построил DOM и в документ уже нельзя внести изменения таким способом, а только с помощью добавления узлов в объектную модель документа.

    Например, вывести строку "I LOVE JAVASCRIPT":

    document.write("I LOVE JAVASCRIPT");
  • Метод document.writeln() - полностью аналогичен методу document.write() за тем исключением, что он добавляет символ перевода строки (\n) в конец строки, указанной в качестве параметра.
  • Метод document.open() — открывает поток для вывода в текущий документ строк с помощью методов document.write() и document.writeln(). Данный метод (document.open()) обычно применяется для формирования нового документа. Вызов данного метода в текущем документе приводит к его полной очистке. После того как документ открыт методом document.open() и сформирован с помощью методов document.write() и document.writeln(), его необходимо закрыть методом document.close().
  • Метод document.close() - предназначен для закрытия потока, который Вы открыли с помощью метода document.open().

    Например, сформируем документ в новом окне:

    <script>
function myNewWindow() {
var myWindow = window.open("","","width=400,height=500");
myWindow.document.open();
myWindow.document.write("<html>");
myWindow.document.write("<head>");
myWindow.document.write("<title>Новая страница</title>");
myWindow.document.write("</head>");
myWindow.document.write("<body>");
myWindow.document.write("<h1>Документ сформирован с помощью метода document.write</h1>");
myWindow.document.write("</body>");
myWindow.document.write("</html>");
}
</script>
<a href="javascript:myNewWindow()">Открыть и сформировать новый документ</a>