Объект 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
элементом, так как является единственным дочерним элементом документа.
Специально для сайта ITWORLD.UZ. Новость взята с сайта NOP::Nuances of programming