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.

Image for post
Image for post

Here’s a bird’s-eye view of what we have when JavaScript runs in a web-browser:

Image for post
Image for post

In this article, we will look at the properties of the window.document. if you do inspect and go to console and type window.document. Browser will provide autosuggestion with all available object inside the document object.

if you type window.document.location or document.location, you will get location object printed. and you can browser host,hostname,origin ,protocol ,port etc.

Image for post
Image for post

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:

  • attributes — a read-only property that has the NamedNodeMap object that contains the assigned attributes of the HTML element
  • 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.

  • ;path=path — Examples include '/', or '/dir' If not specified, defaults to the current path of the current document location. The value for path must be an absolute path. The path signifies that URLs that are valid for the cookie.
  • ;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.

Some user agents support the following cookie prefixes:

  • __Secure- — signals the browser that it should transmit cookies over a secure channel
  • __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

We can set client-side cookies as follows:

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

In the console.log output above, we should get something like:

first_name=krishankant; last_name=singhal;

We can also view the cookies in the Cookies sections of the Application tab in Chrome. Also, we can set the special key-value pairs like the path and max-age attributes like in the following code:

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

Then we can also view the cookies in the Cookies sections of the Application tab in Chrome. It should show the key name, value, path, and expires attribute values.

Note that with the standard JavaScript library, there’s no easy way to manipulate cookies. We have to manipulate the document.cookie string ourselves. So if we want to find a key-value pair, we can do something like the following:

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

The code above will find the cookie entry with the key first_name , which should get us first_name=krishankant .

Then we can get the key and value separately by writing:

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

Then we should get:

first_name krishankant

from the last console.log statement.

The lastElementChild property gets us the last child of the document object, which should be the html element since that its only child element. The cookie property let us get and set cookies with our own attribute and corresponding value. Also, we can set special attributes and values like path and max-age to control the URLs that are valid for the cookie and the expiry time of the cookie respectively. There’s no way to manipulate cookies easily with the JavaScript standard library, so we have to manipulate the cookie strings ourselves.

Widow object provide us ability to dynamically changes and acces browser capabilities.

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