The window object is a global object that has the properties pertaining to the current DOM document, which is the things that are in the tab of a browser. The document property of the window object has the DOM document and associated nodes and methods that we can use to manipulate the DOM nodes and listen to events for each node. Since the window object is global, it’s available in every part of the application. When a variable is declared without the var , let or const keywords, they’re automatically attached to the window object, making them available to every part of your web app. This is only applicable when strict mode is disabled. If it’s enabled, then declaring variables without var , let , or const will be stopped an error since it’s not a good idea to let us declare global variables accidentally. The window object has many properties. They include constructors, value properties and methods. There’re methods to manipulate the current browser tab like opening and closing new popup windows, etc.
In a tabbed browser, each tab has its own window object, so the window object always represent the state of the currently opened tab in which the code is running. However, some properties still apply to all tabs of the browser like the resizeTo method and the innerHeight and innerWidth properties.
Note that we don’t need to reference the window object directly for invoking methods and object properties. For example, if we want to use the window.Image constructor, we can just write new Image() . In this article, we continue to look at what’s in the window object. In the previous sections, we looked at the constructors and some of the properties of the window object, including using the customElements to build a Web Component, and the crypto object to do cryptography on the client using symmetric and asymmetric encryption algorithms. In this part, we will continue from Part 11 and look at more properties of the window.document object, including the defaultView , designMode , dir, domain, and lastModified properties.
window.document.defaultView
The defaultView property is a read only property that returns the window object associated with the current document, or null if it’s not available. For example, if we run the following code to log the document.defaultView object:
console.log(document.defaultView);
We should get something like:
alert: ƒ alert()
applicationCache: ApplicationCache {status: 0, oncached: null, onchecking: null, ondownloading: null, onerror: null, …}
atob: ƒ atob()
blur: ƒ ()
btoa: ƒ btoa()
caches: CacheStorage {}
cancelAnimationFrame: ƒ cancelAnimationFrame()
cancelIdleCallback: ƒ cancelIdleCallback()
captureEvents: ƒ captureEvents()
chrome: {loadTimes: ƒ, csi: ƒ}
clearInterval: ƒ clearInterval()
clearTimeout: ƒ clearTimeout()
clientInformation: Navigator {vendorSub: "", productSub: "20030107", vendor: "Google Inc.", maxTouchPoints: 0, hardwareConcurrency: 4, …}
close: ƒ ()
closed: false
confirm: ƒ confirm()
createImageBitmap: ƒ createImageBitmap()
crypto: Crypto {subtle: SubtleCrypto}
customElements: CustomElementRegistry {}
...
where the list of properties goes on for much longer than the abridged output above.
window.document.designMode
The designMode property controls whether is the entire document is editable. We can either set it to 'on' or 'off' . In Internet Explorer 6 to 10, the values are capitalized. Earlier versions of Chrome and Internet Explorer defaults to 'inherit' , but the 'inherit' value is no longer supported. Starting with Chrome 43, the default is 'off' . For example, if we have the following code HTML code:
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non pharetra dolor. Fusce gravida enim nec lectus rutrum bibendum. Duis mattis nisl tristique, tincidunt mauris ac, ornare lectus. Praesent non massa tristique magna placerat sagittis at consectetur libero. Maecenas varius urna in odio faucibus, at elementum lorem tempor. Duis metus enim, finibus sed ante at, mollis posuere elit. Maecenas elementum tristique vulputate. Curabitur eleifend vehicula congue. Nam bibendum augue sit amet dui egestas, quis ultrices ipsum blandit. Nulla arcu tortor, fringilla eu luctus ac, porta nec sem.
</p>
<p>
Sed mauris odio, cursus quis lacus at, vulputate varius nisl. Praesent eget accumsan mauris. In gravida magna non ante ultrices, vel egestas enim pulvinar. Duis pulvinar volutpat ex. Donec ac lectus non sapien gravida egestas nec non sapien. Aenean eu vehicula dui, eu aliquam leo. Vivamus viverra tempor lacus, nec venenatis quam blandit a. Mauris viverra diam quis euismod elementum. Aenean quis sapien sit amet metus tempus auctor et vel elit. Morbi blandit libero ac massa laoreet auctor. Aliquam in massa eu nulla varius dictum non ut purus.
</p>
</div>
and in our JavaScript code, we write the following code to set designMode to 'on' :
document.designMode = 'on';
Then we can edit the text that are displayed on the screen in the browser. This flag is very handy for fiddling with the content of the page. Once we refresh the page, we get back to the output that we have rendered from our saved code, so we don’t have to worry about it doing anything undesirable that’s permanent.
window.document.dir
The dir property of the document object is a read only property that returns a string that represents the direction of the text of the document, whether it’s left to right which is the default, or right to left. The possible values are 'rtl' for right to left and 'ltr' for left to right. For example, we can log the dir property with the following code:
console.log(document.dir);
Then we should get 'ltr' for most English pages in most browsers.
window.document.domain
The domain property let us get and set the domain part of the origin of the current document. If the document is inside a sandboxed iframe , the document has no browsing context, the effective domain is null , the given value isn’t equal to the document’s effective domain (which is the origin’s host or domain), or document-domain Feature-Policy is enabled, then a SecurityError will be thrown when document.domain is attempted to be set. The assignment is stopped in the cases above to prevent violation of the same origin policy and to prevent third party code from running in unauthorized locations. For example, if we run:
document.domain = 'mozilla.org';
in the developer’s console on a website that doesn’t have mozilla.org as the domain, then we will get the SecurityError . If we run it on mozilla.org , then the assignment will succeed. We can also use document.domain as a getter. If we run document.domain on https://developer.mozilla.org/en-US/docs/Web/API/Document then we get “developer.mozilla.org” .
window.document.lastModified
To get the date and time on which the current document was last modified, we can use the document object’s lastModified property. It’s a read only property that returns a string of when the document was last modified. For example, we can log it as is and get the date string of the object like we do in the code below:
console.log(document.lastModified);
We should get something like:
11/10/2019 13:22:54
as the output of the console.log . We can also convert it into a Date object by passing it straight into the Date object like in the following code:
console.log(new Date(document.lastModified));
Then we get something like:
Sun Nov 10 2019 13:24:06 GMT-0800 (Pacific Standard Time)
from the console.log output. We can also convert it to milliseconds since January 1, 1970 by using the Number function, the Date.parse method or the unary + operator in front of the date object like in the following code:
console.log(+new Date(document.lastModified));
console.log(Number(new Date(document.lastModified)));
console.log(Date.parse(document.lastModified));
All 3 lines of code above should get us the same milliseconds value, something like 1573421113000 .
In this article, we looked at the defaultView , designMode , dir, domain, and lastModified properties. The defaultView property is a read only property that returns the window object associated with the current document. The domain property let us get and set the domain part of the origin of the current document. The designMode property controls whether is the entire document is editable. This property is handy since we can set it to 'on' when we want to fiddle with the page without saving anything. The dir property of the document object is a read only property that returns a string that represents the direction of the text of the document. To get the date and time on which the current document was last modified, we can use the document object’s lastModified property and convert it to a Date object or change it to milliseconds since January 1, 1970.
