Javascript window document content type

Window.document

window.document возвращает ссылку на документ, содержащийся в окне.

Примечание: Firefox 3 вносит изменения в правила безопасности для windows’ документов, чтобы только домен, на котором они расположены, имел доступ к документам. И хотя это может сломать некоторые существующие сайты, Firefox 3 и Internet Explorer 7 сделали этот шаг, что приводит к улучшению безопасности.

Синтаксис

Параметры

Пример

DOCTYPE html> html> head> title>Hello, World!title> head> body> script type="text/javascript"> var doc = window.document; console.log(doc.title); // Hello, World! script> body> html> 

Спецификации

Found a content problem with this page?

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Your blueprint for a better internet.

Источник

Введение в объект окна JavaScript — метаданные документа

Объект window — это глобальный объект, который имеет свойства, относящиеся к текущему документу DOM, то есть к тому, что находится на вкладке браузера.

В этой части мы рассмотрим дополнительные свойства объекта window.document и способы их использования.

window.document.compatMode

Свойство document.compatMode — это свойство только для чтения, которое возвращает, отображается ли документ в режиме совместимости или в стандартном режиме. Режим Quirks применим к более старым страницам, где браузеры должны имитировать проприетарное поведение, которое делают ранние браузеры, такие как Netscape и Internet Explorer, чтобы они могли быть отображены как свойство во всех браузерах. Это необходимо, потому что на заре существования всемирной паутины не было стандартов, поэтому каждый производитель браузеров добавил свое собственное поведение отрисовки в свои собственные браузеры.

Напротив, есть полный стандартный режим, в котором поведение отрисовки страницы соответствует стандартам HTML и CSS, установленным W3C. Также есть почти стандартный режим, в котором реализовано очень небольшое количество причуд. Режим, в котором отображается браузер, определяется объявлением DOCTYPE в верхней части страницы. На большинстве современных веб-страниц это должно быть , что является рекомендуемым DOCTYPE для веб-страниц HTML5. Это означает, что веб-страница соответствует стандартам HTML5 и будет отображаться в стандартном режиме. DOCTYPE должен быть в самой первой строке кода вашей веб-страницы. В противном случае он запустит рендеринг в режиме совместимости в Internet Explorer 9 или более ранней версии. Единственная цель DOCTYPE — переключаться между режимом причуд и стандартным режимом.

Если мы обслуживаем страницу с application/xhtml+xml MIME-типом в Content-Type HTTP-заголовке, вам не нужен DOCTYPE для включения стандартного режима, поскольку все эти документы всегда используют полный стандартный режим. В Internet Explorer 8 отобразится диалоговое окно загрузки, поскольку он не знает, как обрабатывать файлы с этим типом MIME. Однако Internet Explorer 9 или более поздней версии поддерживает этот тип MIME.

Если мы запустим что-то вроде:

console.log(document.compatMode);

у нас должно получиться что-то вроде ‘CSS1Compat’ . CSS1Compat означает, что документ отображается в режиме «без причуд», в «стандартном» или «ограниченном» режиме, также известном как «почти стандартный» режим. Другое возможное значение этого свойства — BackCompat , что означает, что документ отображается в режиме совместимости.

window.document.contentType

document.contentType — это свойство только для чтения, которое возвращает тип MIME, в котором отображается документ. Он может поступать из заголовков HTTP или других источников информации MIME. Браузеры или расширения также могут выполнять автоматическое преобразование типов для типа MIME. Установка meta элементов не может изменить это свойство.

Мы можем использовать его, как в следующем коде:

console.log(document.contentType);

и мы должны получить что-то вроде text/html из приведенного выше оператора console.log .

window.document.doctype

Чтобы получить объявление типа документа (DTD), связанное с текущим открытым документом, мы можем использовать свойство document.doctype . Это свойство только для чтения, и у него должен быть объект, реализующий интерфейс DocumentType .

Интерфейс DocumentType имеет следующие свойства. Свойство name — это строка, имя которой указано после DOCTYPE в коде веб-страницы. Например, если у нас есть , мы вернем ‘html’ в качестве значения.

Свойство publicId — это строка. Например, это ‘-//W3C//DTD HTML 4.01//EN’ для старых страниц HTML 4 и пустое значение для HTML 5. systemId — это строка, которая имеет URI DTD, например ‘http://www.w3.org/TR/html4/strict.dtd’ для старой страницы HTML 4 и пустую строку для HTML5.

Например, если мы запустим следующий код:

console.log(document.doctype.name); console.log(document.doctype.publicId); console.log(document.doctype.systemId);

В первом операторе console.log мы возвращаем ‘html’ , а остальные 2 возвращают нам пустые строки.

window.document.documentElement

Свойство document.documentElement возвращает Element object, который является корневым элементом document . Для HTML-документов это должен быть элемент html . Мы также можем использовать это свойство для получения корневого элемента для XML-документов, где должен быть возвращен любой корневой элемент.

Если мы запустим следующий код:

console.log(document.documentElement);

Мы должны получить что-то вроде следующего:

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

• attributes — свойство только для чтения, имеющее объект NamedNodeMap , который содержит назначенные атрибуты элемента HTML.
• classList — свойство только для чтения, имеющее список атрибутов класса.
• className — строковое свойство только для чтения, имеющее класс элемента
• cilentHeight — числовое свойство только для чтения, имеющее внутреннюю высоту элемента
• clientLeft — числовое свойство только для чтения, имеющее ширину левой границы элемента
• clientTop — числовое свойство только для чтения, имеющее ширину верхней границы элемента
• cilentWidth — числовое свойство только для чтения, имеющее внутреннюю ширину элемента
• computedName — строковое свойство, доступное только для чтения, метка которого открыта для доступа.
• computedRole — строковое свойство только для чтения, имеющее роль ARIA, применяемую к определенному элементу.
• id — строка с идентификатором элемента
• innerHTML — строка, содержащая HTML-разметку содержимого элемента
• localName — строка только для чтения, которая имеет локальную часть полного имени элемента
• namespaceURI — свойство только для чтения, имеющее URL-адрес пространства имён элемента или null , если пространства имён нет.
• nextElementSibling — свойство только для чтения, у которого есть другой Element объект, представляющий элемент, который следует непосредственно за текущим элементом, или null , если нет одноуровневого узла.
• outerHTML — строка, представляющая разметку элемента, включая его содержимое. Его также можно настроить так, чтобы он заменял содержимое элемента HTML-кодом, который мы назначаем этому свойству.
• part — имеет идентификаторы деталей, которые задаются с помощью атрибута part .
• prefix — свойство строки только для чтения, имеющее префикс пространства имен элемента, или null , если префикс не указан
• previousElementSibling — свойство только для чтения, имеющее другой объект Element , представляющий элемент, который находится непосредственно перед текущим элементом, или null , если такого узла нет.
• scrollHeight — свойство числа только для чтения, которое имеет высоту прокрутки элемента
• scrollLeft — числовое свойство, которое имеет смещение левой прокрутки элемента. Это может быть геттер или сеттер
• scroolLeftMax — свойство числа только для чтения, которое имеет максимальное смещение левой прокрутки, возможное для элемента
• scrollTop — числовое свойство, содержащее количество пикселей от верха документа, прокрученного по вертикали.
• scrollTopMax — свойство только для чтения, которое имеет максимальное смещение верхней прокрутки, возможное для элемента
• scrollWidth — свойство числа только для чтения, которое имеет ширину прокрутки элемента
• shadowRoot — свойство только для чтения, имеющее открытый теневой корень, размещенный в элементе, или null , если открытый теневой корень отсутствует
• openOrClosedShadowRoot — свойство только для чтения, доступное только для WebExtensions, у которого есть теневой корень, размещенный на элементе независимо от статуса.
• slot — имя теневого слота DOM, в который вставляется элемент
• tabStop — логическое свойство, указывающее, может ли элемент получать фокус ввода при нажатии клавиши табуляции
• tagName — только для чтения со строкой, которая имеет имя тега данного элемента

Например, мы можем использовать некоторые свойства, как в следующем коде:

document.documentElement.id = 'hello'; console.log(document.documentElement); console.log(document.documentElement.clientWidth); console.log(document.documentElement.id); console.log(document.documentElement.scrollWidth); console.log(document.documentElement.tagName);

В приведенном выше коде мы устанавливаем идентификатор элемента html , получаем внутреннюю ширину элемента html , его идентификатор, ширину прокрутки и имя тега элемента. Если мы запустим console.log(document.documentElement); , мы должны получить что-то вроде:

А у остальных должно получиться что-то вроде:

В этой части мы продолжим изучать другие свойства объекта window.document и способы их использования. Мы посмотрели на свойства contentType , doctype , documentElement .

contentType сообщает нам, отображается ли страница в стандартном или необычном режиме. Свойство doctype получает данные, которые являются объявлением DOCTYPE веб-страницы.

documentElement дает нам информацию о корневом элементе документа HTML или XML, который должен быть элементом html для документов HTML.

Возвращенный объект — это объект Element , который имеет множество свойств, позволяющих получить нам информацию о странице.

Источник

Свойства узлов: тип, тег и содержимое

Теперь давайте более внимательно взглянем на DOM-узлы.

В этой главе мы подробнее разберём, что они собой представляют и изучим их основные свойства.

Классы DOM-узлов

Каждый DOM-узел принадлежит соответствующему встроенному классу.

Корнем иерархии является EventTarget, от него наследует Node и остальные DOM-узлы.

На рисунке ниже изображены основные классы:

Существуют следующие классы:

• EventTarget – это корневой «абстрактный» класс для всего. Объекты этого класса никогда не создаются. Он служит основой, благодаря которой все DOM-узлы поддерживают так называемые «события», о которых мы поговорим позже.
• Node – также является «абстрактным» классом, и служит основой для DOM-узлов. Он обеспечивает базовую функциональность: parentNode , nextSibling , childNodes и т.д. (это геттеры). Объекты класса Node никогда не создаются. Но есть определённые классы узлов, которые наследуются от него (и следовательно наследуют функционал Node ).
• Document, по историческим причинам часто наследуется HTMLDocument (хотя последняя спецификация этого не навязывает) – это документ в целом. Глобальный объект document принадлежит именно к этому классу. Он служит точкой входа в DOM.
• CharacterData – «абстрактный» класс. Вот, кем он наследуется:
  • Text – класс, соответствующий тексту внутри элементов. Например, Hello в

    Hello

    .

  • Comment – класс для комментариев. Они не отображаются, но каждый комментарий становится членом DOM.
  • HTMLInputElement – класс для тега ,
  • HTMLBodyElement – класс для тега ,
  • HTMLAnchorElement – класс для тега ,
  • …и т.д.

  Также существует множество других тегов со своими собственными классами, которые могут иметь определенные свойства и методы, в то время как некоторые элементы, такие как , и , не имеют каких-либо определенных свойств, поэтому они являются экземплярами класса HTMLElement .

  Таким образом, полный набор свойств и методов данного узла является результатом цепочки наследования.

  Рассмотрим DOM-объект для тега . Он принадлежит классу HTMLInputElement.

  Он получает свойства и методы из (в порядке наследования):

  • HTMLInputElement – этот класс предоставляет специфичные для элементов формы свойства,
  • HTMLElement – предоставляет общие для HTML-элементов методы (и геттеры/сеттеры),
  • Element – предоставляет типовые методы элемента,
  • Node – предоставляет общие свойства DOM-узлов,
  • EventTarget – обеспечивает поддержку событий (поговорим о них дальше),
  • …и, наконец, он наследует от Object , поэтому доступны также методы «обычного объекта», такие как hasOwnProperty .

  Для того, чтобы узнать имя класса DOM-узла, вспомним, что обычно у объекта есть свойство constructor . Оно ссылается на конструктор класса, и в свойстве constructor.name содержится его имя:

  Источник

  Читайте также:  Скрытое поле