Объект Document в JavaScript - содержимое окна браузера

Александр Мальцев
Александр Мальцев
25K
5
Содержание:
  1. Основные объекты браузера
  2. Свойства и методы объекта document
  3. Комментарии

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

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

    <!doctype html>
    <html lang="ru">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Формирование документа в новом окне</title>
    </head>
    <body>
      <script>
        function createNewDocument() {
          var newWindow = window.open('', '', 'width=400,height=500');
          newWindow.document.open();
          newWindow.document.write('<!doctype html>');
          newWindow.document.write('<html lang="ru">');
          newWindow.document.write('<head>');
          newWindow.document.write('<meta charset="utf-8">');
          newWindow.document.write('<meta name="viewport" content="width=device-width, initial-scale=1">');
          newWindow.document.write('<title>Новая страница</title>');
          newWindow.document.write('</head>');
          newWindow.document.write('<body>');
          newWindow.document.write('<h1>Документ сформирован с помощью document.write</h1>');
          // для корректной работы Live Server
          newWindow.document.write('</' + 'body>');
          newWindow.document.write('</html>');
        }
      </script>
      <a href="javascript:createNewDocument()">Открыть и сформировать новый документ</a>
    </body>
    </html>
    

Комментарии:

  1. Evgen
    Evgen
    26.04.2021, 16:53
    Привет! Подскажи, пожалуйста.
    Последний пример в этой статье. Если данный код подключаю как отдельный файл — все работает. Если вставляю в ''body'' — не работает, выводит
    "); myWindow.document.write(""); } Открыть и сформировать новый документ
    При нажатии ссылка не работает
    В чем причина? В консоли подчеркивает
    <!-- Code injected by live-server -->
    , проблема в VS-коде?
    1. Александр Мальцев
      Александр Мальцев
      27.04.2021, 15:00
      Привет!
      Да, когда используешь Live Server, он вставляет свой код перед закрывающим тегом body.
      При этом он вставляет сразу, как только его найдет. Таким образом, получается, что он делает это здесь:
      newWindow.document.write('</body>');
      
      Чтобы этот код корректно работал даже когда используешь Live Server можно сделать так:
      newWindow.document.write('</' + 'body>');
      
      Теперь Live Server вставит свой код туда куда нужно. Пример в статье обновил.
      1. Evgen
        Evgen
        27.04.2021, 16:06
        Спасибо что объяснил!
    2. cupoma58
      cupoma58
      06.09.2016, 09:26
      пытаюсь создать страничку отзывов через JS-DOM, работаю с мозилой, ни getElementByld, ни appendChild она за функции не признаёт;
      в чём дело?
      1. Александр Мальцев
        Александр Мальцев
        06.09.2016, 13:44
        Проверяйте, должно всё работать, может что-то не так делаете. Методы getElementById и appendChild поддерживаются всеми браузерами, начиная с IE6+, Firefox 2+, Chrome 1+ и т.д.

        JavaScript - Методы appendChild и getElementById
      Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.