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 customElemnts 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 to look at more properties of the window object like the devicePixelRatio property and begin to look at the properties of the document property.
window.devicePixelRatio
We can use the devicePixelRatio propety to get the ratio of the resolution in physical pixels to the resolution of CSS pixels of the display device. That is, this ratio of the size of one CSS pixel to the size of the one physical pixel, or how many actual pixels should be used to draw one CSS pixel. This comes in handy because there’re various kinds of displays out there. High resolution displays like 4K or Retina displays need scaling to display things so that they won’t be too small. Therefore, more than one pixels are needed to display a CSS pixel on the screen to show a sharper image on these screens that aren’t too small. This is a read only property, and there’s no way to be notified when the value is changed, which may happen if the user drags the window to a different display with different pixel density than the original. Therefore, if you want to check for changes to this property, you have to check it manually once in a while with the setInterval function for example.
We can access it by writing the following code:
console.log(`window.devicePixelRatio)`
By running the code above, we should see the number of physical pixels per CSS pixel logged with the console.log statement.
window.document
The document property has all the properties and methods for the currently opened document. This means that it has all the DOM node objects and all the associated method parsed into the tree. It also has many properties for listening to events and get various pieces of information about the document opened in the current browser tab. The document object has one constructor, the Document constructor which takes no arguments and creates a new Document object.
window.document.body
The document object also has many properties. The document.body property let us get the body or the frameset node of the current document and everything inside it. For example, if we run console.log statement with the document.body passed in as an argument, we should get something like the following from the console.log output:
<body data-n-head="">
<div id="__nuxt"><!----><div id="__layout"><div><nav class="navbar navbar-expand-lg navbar-light bg-light" data-v-a3aba82c=""><a href="/" class="navbar-brand nuxt-link-exact-active nuxt-link-active" data-v-a3aba82c="">John Au-Yeung's Portfolio</a> <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-v-a3aba82c=""><span class="navbar-toggler-icon" data-v-a3aba82c=""></span></button> <div id="navbarSupportedContent" class="collapse navbar-collapse" data-v-a3aba82c=""><ul class="navbar-nav mr-auto" data-v-a3aba82c=""><li class="nav-item active" data-v-a3aba82c=""><a href="/" class="nav-link nuxt-link-exact-active nuxt-link-active" data-v-a3aba82c="">Home</a></li> <li class="nav-item" data-v-a3aba82c=""><a href="/portfolio" class="nav-link" data-v-a3aba82c="">Portfolio</a></li> <li class="nav-item" data-v-a3aba82c=""><a href="/resume" class="nav-link" data-v-a3aba82c="">Resume</a></li> <li class="nav-item" data-v-a3aba82c=""><a href="/whyhireme" class="nav-link" data-v-a3aba82c="">Why Hire Me</a></li></ul></div></nav> <div data-v-88e6fdf8=""><div id="home" data-v-88e6fdf8=""><div class="jumbotron jumbotron-fluid text-center" data-v-88e6fdf8=""></div> <div class="cont" data-v-88e6fdf8=""><div class="col-md-12" data-v-88e6fdf8=""><h1 data-v-88e6fdf8="">About John</h1> <p data-v-88e6fdf8="">Hire me to build a business web and mobile apps affordably.</p></div> <div class="col-md-12" data-v-88e6fdf8=""><p data-v-88e6fdf8="">My expertise include:</p> <ul data-v-88e6fdf8=""><li data-v-88e6fdf8="">Web app development</li> <li data-v-88e6fdf8="">Mobile app development</li></ul></div> <div class="col-md-12" data-v-88e6fdf8=""><h1 data-v-88e6fdf8="">Social Media</h1> <ul data-v-88e6fdf8=""><li data-v-88e6fdf8=""><a href="https://medium.com/@hohanga" target="_blank" data-v-88e6fdf8="">
</footer></div></div></div></div><script>window.__NUXT__={layout:"default",data:[{}],error:null,state:{},serverRendered:!0}</script><script src="/_nuxt/aa95a776e06b06b1de50.js" defer=""></script><script src="/_nuxt/278a2a8cea1aa4220b7f.js" defer=""></script><script src="/_nuxt/49479c32fdfc8cc26830.js" defer=""></script><script src="/_nuxt/a006571538a8da07f921.js" defer=""></script><script src="/_nuxt/92eb89f167a526d23bc9.js" defer=""></script>
</body>
The output has body node and all the DOM nodes inside it. We can also set the body property. However, if we do that, we will overwrite everything inside the body with what you set it with. To do this we can write something like the following code:
const body = document.createElement('body');
const hello = document.createElement('p');
hello.innerHTML = 'hello';
body.append(hello);
document.body = body;
In the code above, we first create the body element. This is a required step since we can only set document.body with the body or frameset element. Otherwise, we will get an error stating that you didn’t set document.body with of those elements. With the body element created, then we can create anything we want inside and append it to the body. In the example above, we created a p element and then set the innerHTML property of it to 'hello' . After that we appended the created p element to the body and then assigned it to the document.body property. After that, we should see the word ‘hello’ on the screen.
window.document.characterSet
The characterSet property is a read only property that returns the character encoding of the document that it’s currently rendered with. Character encoding is the set of characters and how the bytes that made up the web page are interpreted into those characters. The character encoding can be overridden inside the Content-Type header or put it inline with the meta tag. For example, with <meta charset=”utf-8"> to set the web page to be rendered with the utf-8 encoding. It can also be overridden with the browser option like setting the character encoding by right clicking the Internet Explorer browser window for example, click on Encoding, then picking the character encoding that you want to render the page with manually.
For example, we can look at the character encoding that the page you’re looking at is encoded with by writing:
const charSet = document.characterSet;
console.log(charSet);
We should get something like ‘UTF-8’ returned from the console.log output.
In this article, we looked at the document property and the devicePixelRatio property. The devicePixelRatio property lets see the number of physical pixels to render a single CSS pixel, and the document property is an object that has many properties that gets us information about the currently opened document and allows us to attach event handlers to it and manipulate it. We set the body element to the content of our choice with the document.body property as well as using the same property to view its properties. Also, we got the character sets of the webpage that we’re viewing with the document.characterSet property. There are many more properties in the document object, so stay tuned for the next part of this series to look at more properties of the window and the window.document objects.
