window object is a global object which has various object to access various functionality of browser. below diagram gives an overview of window object.
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.
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
NamedNodeMapobject 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
nullif there’s no namespace
nextElementSibling— a read-only property that has another
Elementobject that represents the element which immediately follows the current element, or
nullif 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
prefix— a read-only string property that has the namespace prefix of the element, or
nullif no prefix is specified
previousElementSibling— a read-only property that has another
Elementobject that represents the element which is immediately before the current element, or
nullif 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
nullif 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
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
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
max-ageare 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
strictvalue 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
laxvalue 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 output above, we should get something like:
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
max-age attributes like in the following code:
document.cookie = "first_name=krishankant; path=/; max-age=5";
document.cookie = "last_name=singhal";
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.
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'));
The code above will find the cookie entry with the key
first_name , which should get us
Then we can get the key and value separately by writing:
] = firstName.split('=');
Then we should get:
from the last
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
Widow object provide us ability to dynamically changes and acces browser capabilities.