document body property in vanilla js
1 - document body example
The document body property of the document object can always be used to quickly gain a reference to the body element. So it can be used as an alternative to something like document.getElementById, or document.getElementsByTagName when it is only just the single body tag of an html document that is of concern. In this example I am creating a canvas element with the create element method, and then appending it to the body element of an html document with the append child method.
So for this example I might have some html that looks like this.
If all goes well this example just results in a black blank canvas, nothing to interesting, but you get the idea. So as you can see the document.body property is always there to serve as a quick reference to the body element.
2 - Other ways of getting the body element
2.1 - Using getElementById
Although it is kind of weird to do so because there should only be one body element per document, an id can still be set for the body element. So then the getElementById method can be used as a way to get a reference to body just like with any other element to which an id can be set.
This tired yet true way to go about getting a reference to the body element will return an html collection rather than a reference to the body element. It will always do this for a tag even if there is just one of theme such is the case with body.
2.3 - The document.querySelector
Another option for getting a reference to the body tag, or the first instance of any tag for that matter, would be to use document.querySelector. This is a newer option compared to older methods like the get element by id method, however at this point it is still well supported in modern browsers. To use it I just call the method off of the document object just like with the other options, and pass a string that is the name of the tag that I want in this case body. The result of calling the query selector method is a single reference to the first instance of a tag, in this case this is not a problem as there should always be just one body tag. However when it comes to other tags to which there may be more than one instance of a tag I can also select elements by id with this method. There is also the query selector all method that will work just like query selector, only it will return an HTML Collection rather than a single element reference.
2.4 - The document children property
So I made a method that involves looping over all children via a recursive method that calls itself from with itself and uses the children property of elements to keep looking for tags of a given type. Each time it finds an element with a tag name that matches the given string it fires a callback for the tag. Maybe not the best way to just go about getting the document body element though, but if you want to walk over the full content of an html document it might be a decent way of doing so.
3 - Create a new document body element
The document body property can be set to a new element. When doing so it goes without saying that all content in the page that is inside the body tag will be replaced. This can be done more or less the same way as with any other element when it comes to creating the new body tag as well. Just call the document createElement method and pass the string body as the first argument to create a new body tag. Then it is just a matter of appending some content to the new body tag and setting it as the value of the document body property.
There are other ways of destroying everything on the page such as using document write. In most cases it is not necessary to do so though. In real life examples I can not say that I am creating new body elements and then setting them as the new body via the document body property but never the less it can be done.
4 - Document body and window onload
In a lot of examples you might see and event handler set for the window onload event before doing anything with body. This makes sense if for some reason you need to wait until content for the body has been loaded completely before continuing. For example if I place an image element in the body element, and then a script that depends on the content of that image then the script might not work as expected because the image has not completed loading just yet.
The above create canvas element will throe an error if it is called an given an image that has a zero width size. If I just pass the image to it right away without waiting for it to load first that will of course result in an error, however if I pass the image via document body after the on load window event has fired then the example works just fine.
5 - Using document body as a default in the event that an container is not given
Whenever I make some kind of method that expects a container element to append to as one of the arguments I make it so that the body element is the default element that will be used in the event that a container element is not given. The document body property is of course a great way to just set the container element to body in the event that something is not given when using the method.
6 - Attaching events and the body tag
6.1 - Basic event attachment to body with an on click event
In this example I am starting out with just a simple example that has to do with attaching a on click event to the body element. When I click the page I then get some info set to the inner text of a div element that is a child of the body element. This is achieved by making a string with some data in the event object that is pass as an argument for the event handler function that I pass to the add event listener method.
7 - Conclusion
So the document body property is a great way to just quickly reference the body element of an html document when doing something with client side javaScrpt. There are other ways of getting the body element of course, but because there is, or at least should be only one body element in an html document for the most part the document body property works fine in getting a reference to that element.