JavaScript - Объект document

На этом уроке мы рассмотрим объект 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>
  

  

• Свойство document.characterSet - возвращает кодировку, которая используется для рендеринга текущего документа. Данное значение может отличаться от кодировки указанной в HTML странице, т.к. пользователь может её переопределить, т.е. выбрать в соответствующем меню браузера другую кодировку, которая будет использоваться для отображения текущего документа.

  <div id="docCharacterSet" class="alert alert-info"></div>
  <script>
  var characterSet = document.characterSet;
  window.document.getElementById("docCharacterSet").innerHTML = "Кодировка, которая используется для текущего документа: " + characterSet;
  </script>
  

  

• Свойство document.inputEncoding - возвращает кодировку, которая использовалась во время синтаксического разбора (парсинга) документа. Если документ создан в памяти, то данное свойство возвращает значение null. Данное свойство доступно только для чтения.

  <div id="docInputEncoding" class="alert alert-info"></div>
  <script>
  var inputEncoding = document.inputEncoding;
  window.document.getElementById("docInputEncoding").innerHTML = "Кодировка документа: " + inputEncoding;
  </script>
  

  

• Свойство 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.

  

• Свойство 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.

  

• Свойство 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>
  

  

• Метод 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>