window.document object for browser.

The window object is a global object which has various object to access various functionality of browser. below diagram gives an overview of window object.

window.document.lastElementChild

The lastElementChild property is a read-only property that gets the document’s last child element. Since a document object only has one child element, which is the html , element. This the element that’s going to be returned. This property returns an Element object, which has the following properties:

  • classList — a read-only property that has the list of class attributes.
  • className — a read-only string property that has the class of the element
  • cilentHeight — a read-only number property that has the inner height of the element
  • clientLeft — a read-only number property that has the width of the left border of the element
  • clientTop — a read-only number property that has the width of the top border of the element
  • cilentWidth — a read-only number property that has the inner width of the element
  • computedName — a read-only string property that has the label exposed to accessibility.
  • computedRole — a read-only string property that has the ARIA role that’s applied to the particular element.
  • id — a string that has the ID of the element
  • innerHTML — a string that has the HTML markup of the element’s content
  • localName — a read-only string that has the local part of the qualified name of the element
  • namespaceURI — a read-only property that has the namespace URL of them element or null if there’s no namespace
  • nextElementSibling — a read-only property that has another Element object that represents the element which immediately follows the current element, or null if there’s no sibling node.
  • outerHTML — a string that represents the markup of the element including its content. It can also be set so that it replaces the content of the element with the HTML that we assign to this property
  • part — has the part identifiers which are set using the part attribute.
  • prefix — a read-only string property that has the namespace prefix of the element, or null if no prefix is specified
  • previousElementSibling— a read-only property that has another Element object that represents the element which is immediately before the current element, or null if there’s no such node.
  • scrollHeight — a read-only number property that has the scroll view height of the element
  • scrollLeft — a number property that has the left scroll offset of the element. This can be a getter or a setter
  • scroolLeftMax — a read-only number property that has the maximum left scroll offset possible for the element
  • scrollTop — a number property that has the number of pixels of the top of the document that’s scrolled vertically
  • scrollTopMax — a read-only property that has the maximum top scroll offset possible for the element
  • scrollWidth — a read-only number property that has the scroll view width of the element
  • shadowRoot — a read-only property that has the open shadow root that’s hosted by the element, or null if no open shadow root is present
  • openOrClosedShadowRoot — a read-only property that’s only available WebExtensions that has the shadow root hosted by the element regardless of status.
  • slot — the name of the shadow DOM slot the element is inserted in
  • tabStop — a boolean property that indicates if the element can receive input focus by pressing the tab key
  • tagName — a read-only with the string that has the tag name of the given element

window.document.cookie

To read and write client-side cookies, we can use the cookies property for getting and setting cookies. A client-side cookie are key-value pairs where the key and value are separated by an equal sign, and each key-value pair entry is separated by a semicolon. Each key-value pair may be separated by whitespace.

  • ;domain=domain — Examples include 'example.com' or 'subdomain.example.com. The default value is the host portion of the current document if the value isn’t specified. Leading dots in the domain name are ignored. Some browsers may decline to set the cookie containing such dots. If a domain is specified then subdomains are always included. The domain signifies that URLs that are valid for the cookie.
  • ;max-age=max-age-in-seconds — The amount of time in seconds that a cookie lasts
  • ;expires=date-in-GMTString-format — If neither expires nor max-age are specified the cookie will expire at the end of the session. It’s best to set the time out explicitly instead of letting the browser do it if privacy is a concern. Letting the browser clear the cookie after the session expires in unreliable.
  • ;secure — Cookie can only be transmitted over HTTPS. Before Chrome 52, this flag could appear with cookies from HTTP domains.
  • ;samesite — If this is set, then the browser from sending this cookie with cross-site requests. Possible values for the flag are lax or strict. The strict value will prevent the cookie from being sent by the browser of the target site in all cross-site browsing contexts, even when following a regular link. The lax value will only send cookies for top-level navigation GET requests. This is sufficient for user tracking, but it will prevent many CSRF attacks.
  • __Host- — Signals a browser that it should transmit cookies over a secure channel and also the scope of the cookie is limited to the designated host paths passed down by the server. The domain attribute must also not be present in the cookie since it conflicts with this prefix. If the server omits the path attribute then all the paths that include the request URI are valid paths for the cookie
document.cookie = "first_name=krishankant";
document.cookie = "last_name=singhal";
console.log(document.cookie);
first_name=krishankant; last_name=singhal;
document.cookie = "first_name=krishankant; path=/;  max-age=5";
document.cookie = "last_name=singhal";
console.log(document.cookie);
const firstName = document.cookie.split(';').find(c => c.includes('first_name'));
console.log(firstName);
const [
key,
value
] = firstName.split('=');
console.log(key, value);
first_name krishankant

Angular,Vuejs,Android,Java,Git developer. i am nerd who want to learn new technologies, goes in depth.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store