Представляем объект JS Window - видимость и дочерние элементы

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

Он включает в себя конструкторы, значения свойств и методы для манипулирования текущей вкладкой браузера, например, открытие и закрытие всплывающих окон и т.д.

В этой статье мы рассмотрим свойства объекта window.document, в том числе свойства visibilityState, childElementCount и firstElementChild.

window.document.visibilityState

visibilityState — это свойство, доступное только для чтения, возвращающее статус видимости объекта document — контекст, в котором элемент видим. Полезно знать, виден ли документ в фоновом режиме или на невидимой вкладке, или же загружен для предварительного отображения. Это свойство строки, принимающее следующие значения:

'visible' — содержимое страницы по крайней мере частично видимо. Это означает, что страница находится на передней вкладке развернутого окна.
'hidden' — страница не видна пользователю. Это означает, что страница находится или на фоновой вкладке, или в свернутом окне, или за экраном блокировки.
'prerender' — страница предварительно отображается, но не видна пользователю. Документ может стартовать в этом состоянии, но не сможет перейти в другое значение. Однако это значение убрано из стандарта, поэтому может не возвращаться большинством современных браузеров.

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

console.log(document.visibilityState);
document.addEventListener('visibilitychange', () => {
  console.log(document.visibilityState);
})

Если мы отделим консоль разработки браузера от вкладки, то будем переключаться между вкладками через console.log из консоли разработки. Саму вкладку видеть мы не будем. Тогда, в логах будет 'visible', когда вкладка будет видна. Когда переключаетесь из вкладки, из которой логируются данные visibilityState в другую вкладку, console.log выводит hidden.

window.document.`childElementCount`

childElementCount — это числовое свойство, доступное только для чтения, возвращающее многоразрядное число без знака, которое отображает количество дочерних элементов заданного элемента. Например, при запуске:

console.log(document.childElementCount);

мы получим 1, так как единственный дочерний элемент document — это html элемент.

window.document.`children`

Чтобы получить дочерние элементы document, используем свойство children — свойство, доступное только для чтения, возвращающее подобный массиву объект HTMLCollection со всеми дочерними элементами объекта document с момента его вызова. Например, у нас есть следующий HTML код:

<div>
  A
</div>
<div>
  B
</div>
<div>
  C
  <div>
    D
  </div>
</div>

Мы можем перебрать значения объекта HTMLCollection с помощью цикла for...of, как в следующем коде:

for (const child of document.children) {
  const {
    tagName,
    outerHTML,
    outerText
  } = child
  console.log(tagName);
  console.log(outerHTML);
  console.log(outerText);
}

Мы получим сообщение console.log. Сначала мы получим:

HTML

в первой строке console.log. Во второй строке console.log получим следующий вывод:

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">

<script type="text/javascript" src="/js/lib/dummy.js"></script>

<link rel="stylesheet" type="text/css" href="/css/result-light.css">

<style id="compiled-css" type="text/css">
      
  </style>

<!-- TODO: Missing CoffeeScript 2 -->

<script type="text/javascript">//<![CDATA[

window.onload=function(){
      
for (const child of document.children) {
  const {
    tagName,
    outerHTML,
    outerText
  } = child
  console.log(tagName);
  console.log(outerHTML);
  console.log(outerText);
}

}

//]]></script>

<script>
    // сообщает родительскому фрейму высоту содержимого 
    if (window.parent && window.parent.parent){
      window.parent.parent.postMessage(["resultsFrame", {
        height: document.body.getBoundingClientRect().height,
        slug: ""
      }], "*")
    }

// всегда переписывает window.name, в случае, если пользователь пытается задать его вручную 
    window.name = "result"
  </script>

</body></html>

В третьей строке получим:

A
B
C
D

Так как мы получаем свойство children из объекта document, элемент html будет единственным дочерним элементом, следовательно у нас будет только один объект children.

window.document.`firstElementChild`

firstElementChild — свойство, доступное только для чтения, возвращающее первый дочерний элемент document. Так как дочерний элемент один — это html элемент — он и будет возвращен. Он обладает свойствами объекта Element и, соответственно, свойствами HTML элемента. Если дочерних элементов нет, вернется null. Объект Element также обладает следующими свойствами:

attributes — свойство, доступное только для чтения; возвращает объект NamedNodeMap, в котором перечислены все атрибуты связанные с HTML элементом.
classList — свойство, доступное только для чтения, содержащее список атрибутов класса.
className — свойство, доступное только для чтения. Содержит класс элемента.
clientHeight — свойство, доступное только для чтения, представляющее внутреннюю высоту элемента.
clientLeft —свойство, доступное только для чтения, представляющее ширину левой границы элемента.
clientTop —свойство, доступное только для чтения, представляющее высоту верхней границы элемента.
clientWidth — свойство, доступное только для чтения, представляющее внутреннюю границу элемента.
computedName —свойство, доступное только для чтения, содержит метку открытия доступа.
computedRole — свойство, доступное только для чтения, с ролью ARIA, применяемой к конкретному элементу.
id — строка, содержащая 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 — свойство, доступное только для чтения для веб-расширений с теневым корнем, размещенных в элементе независимо от статуса.
slot — имя слота теневого DOM, в который вставлен элемент.
tabStop — логическое свойство, отображающее, может ли элемент получить фокус ввода при нажатии кнопки табуляции.
tagName — свойство, доступное только для чтения, со строкой, содержащей имя тэга заданного элемента.

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

console.log(document.firstElementChild);

получим что-то вроде:

<body>
    <div>
  A
</div>
<div>
  B
</div>
<div>
  C
  <div>
    D
  </div>
</div>

<script>
    // сообщает родительскому фрейму высоту содержимого
    if (window.parent && window.parent.parent){
      window.parent.parent.postMessage(["resultsFrame", {
        height: document.body.getBoundingClientRect().height,
        slug: ""
      }], "*")
    }

// всегда переписывает window.name в случае, если пользователь пытается задать его вручную
    window.name = "result"
  </script>

console.log(clientLeft);
console.log(innerHTML);
console.log(outerHTML);

Индивидуальные свойства объекта HTMLElement можно получить так:

const {
  clientLeft,
  innerHTML,
  outerHTML
} = document.firstElementChild;

console.log(clientLeft);
console.log(innerHTML);
console.log(outerHTML);

Затем мы должны получить ширину левой границы html элемента — это 0 — и получить HTML-содержимое документа, логированное в двух последних журналах консоли.

С объектом document мы получаем несколько удобных свойств, позволяющих нам получать элементы документа. Свойство visibilityState позволяет узнать, видима вкладка браузера или нет.

Свойство childElementCount отображает количество дочерних элементов объекта документа, которое должно равняться 1, так как единственным дочерним элементом объекта является html элемент.

Свойство firstElementChild выдает первый дочерний элемент объекта документа, который должен быть html элементом, так как является единственным дочерним элементом документа.

Перевод статьи John Au-Yeung: Introducing the JavaScript Window Object — VisibilityState and Child Elements

Поделиться статьей:

Вернуться к статьям

Представляем объект JS Window - видимость и дочерние элементы

window.document.visibilityState

window.document.childElementCount

window.document.children

window.document.firstElementChild

Комментарии

window.document.`childElementCount`

window.document.`children`

window.document.`firstElementChild`