Объект window - это глобальный объект, который имеет различные объекты для доступа к различным функциям браузера. диаграмма ниже дает обзор оконного объекта.

Вот вид с высоты птичьего полета на то, что мы имеем, когда JavaScript запускается в веб-браузере:

В этой статье мы рассмотрим свойства файла window.document. если вы все же проверите, перейдите в консоль и введите window.document. Браузер предоставит автоматическое предложение со всеми доступными объектами внутри объекта документа.

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

window.document.lastElementChild

Свойство lastElementChild - это свойство только для чтения, которое получает последний дочерний элемент документа. Поскольку объект документа имеет только один дочерний элемент, это элемент html. Этот элемент будет возвращен. Это свойство возвращает объект 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 - только для чтения со строкой, которая имеет имя тега данного элемента

window.document.cookie

Чтобы читать и записывать файлы cookie на стороне клиента, мы можем использовать свойство cookies для получения и настройки файлов cookie. Клиентские файлы cookie представляют собой пары "ключ-значение", в которых ключ и значение разделяются знаком равенства, а каждая запись пары "ключ-значение" разделяется точкой с запятой. Каждая пара "ключ-значение" может быть разделена пробелом.

  • ;path=path - Примеры включают '/' или '/dir'. Если не указано, по умолчанию используется текущий путь к текущему местоположению документа. Значение пути должно быть абсолютным путем. Путь означает, что URL-адреса действительны для файла cookie.
  • ;domain=domain - Примеры включают 'example.com' или 'subdomain.example.com. Если значение не указано, значением по умолчанию является основная часть текущего документа. Начальные точки в имени домена игнорируются. Некоторые браузеры могут отказать в установке файла cookie, содержащего такие точки. Если указан домен, то всегда включаются поддомены. Домен означает, что URL-адреса действительны для файла cookie.
  • ;max-age=max-age-in-seconds - количество времени в секундах, в течение которого хранится файл cookie.
  • ;expires=date-in-GMTString-format - Если не указаны ни expires, ни max-age, срок действия cookie истечет в конце сеанса. Лучше установить тайм-аут явно, а не позволять браузеру делать это, если конфиденциальность вызывает беспокойство. Разрешение браузеру очистить cookie после истечения сеанса ненадежно.
  • ;secure - Cookie можно передавать только по HTTPS. До Chrome 52 этот флаг мог появляться с файлами cookie из доменов HTTP.
  • ;samesite - Если этот параметр установлен, браузер не будет отправлять этот файл cookie с межсайтовыми запросами. Возможные значения флага: lax или strict. Значение strict предотвратит отправку файла cookie браузером целевого сайта во всех контекстах межсайтового просмотра, даже при переходе по обычной ссылке. Значение lax будет отправлять файлы cookie только для запросов GET навигации верхнего уровня. Этого достаточно для отслеживания пользователей, но это предотвратит многие атаки CSRF.

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

  • __Secure- - сигнализирует браузеру, что он должен передавать файлы cookie по защищенному каналу.
  • __Host- - сообщает браузеру, что он должен передавать файлы cookie по защищенному каналу, а также область действия файла cookie ограничена указанными путями к хостам, передаваемыми сервером. Атрибут домена также не должен присутствовать в файле cookie, поскольку он конфликтует с этим префиксом. Если сервер опускает атрибут пути, тогда все пути, которые включают URI запроса, являются допустимыми путями для файла cookie.

Мы можем установить файлы cookie на стороне клиента следующим образом:

document.cookie = "first_name=krishankant";
document.cookie = "last_name=singhal";
console.log(document.cookie);

В приведенном выше выводе console.log мы должны получить что-то вроде:

first_name=krishankant; last_name=singhal;

Мы также можем просматривать файлы cookie в разделах «Файлы cookie» на вкладке «Приложение» в Chrome. Кроме того, мы можем установить специальные пары ключ-значение, такие как атрибуты path и max-age, как в следующем коде:

document.cookie = "first_name=krishankant; path=/;  max-age=5";
document.cookie = "last_name=singhal";
console.log(document.cookie);

Затем мы также можем просмотреть файлы cookie в разделах «Файлы cookie» на вкладке «Приложение» в Chrome. Он должен отображать имя ключа, значение, путь и значения атрибутов с истекшим сроком действия.

Обратите внимание, что со стандартной библиотекой JavaScript нет простого способа управлять файлами cookie. Мы должны сами манипулировать строкой document.cookie. Итак, если мы хотим найти пару ключ-значение, мы можем сделать что-то вроде следующего:

const firstName = document.cookie.split(';').find(c => c.includes('first_name'));
console.log(firstName);

Приведенный выше код найдет запись cookie с ключом first_name, что должно дать нам first_name=krishankant.

Затем мы можем получить ключ и значение отдельно, написав:

const [
  key,
  value
] = firstName.split('=');
console.log(key, value);

Тогда у нас должно получиться:

first_name krishankant

из последнего console.log утверждения.

Свойство lastElementChild получает последний дочерний элемент объекта документа, которым должен быть элемент html, поскольку это его единственный дочерний элемент. Свойство cookie позволяет нам получать и устанавливать файлы cookie с нашим собственным атрибутом и соответствующим значением. Кроме того, мы можем установить специальные атрибуты и значения, такие как path и max-age, для управления URL-адресами, действительными для файла cookie, и временем истечения срока действия файла cookie соответственно. Невозможно легко управлять файлами cookie с помощью стандартной библиотеки JavaScript, поэтому мы должны сами управлять строками файлов cookie.

Объект Widow дает нам возможность динамически изменять и получать доступ к возможностям браузера.