JavaScript Intro: The DOM
If you have written code in JavaScript, you should be familiar with something called the Document Object Model (DOM). You can think of the DOM as a hierarchical structure of objects, with the window object at the very top, followed by the document object. The window object is essentially a container holding all of the objects in JavaScript, immediately followed by the document object containing all of the HTML elements (nodes).
JavaScript is an object oriented and a functional programming language, in which, everything inside of a JavaScript program is treated like an object. As the window in the DOM acts as the container to hold everything in a JavaScript program, the document object plays a very important role in JavaScript. The document object, in the DOM, allows for the access and manipulation of contents residing within it via JavaScript. A simple example to access a property within the document object would be the document’s URL. Writing a simple line of code such as document.URL will return the url of the current document (website page you are on). The URL is a property of the document object, similar to a human object having the gender and age properties.
Note: You can view the DOM through Chrome’s developer’s tools.
HTML Elements as Nodes in the DOM
The DOM contains many HTML content. When talking about HTML, we know that HTML makes up the webpage and its contents. When referring to the DOM, nodes are all of the components that make up the webpage. In short, the HTML elements are the nodes represented in the DOM. DOM nodes generally have a starting tag and an ending tag (sounds familiar?), where the outer nodes are referred to as the parent nodes.
A Tree Like Structure
The DOM can be thought of a “tree-like structure” as there is a clear hierarchal representation in the DOM. For instance, examine the code below :
<body> <div> <p>
This is a nested paragraph, inside of a div element,
inside of a body element.
</p>
</div></body>
In the above code, the child node is the p tag, and the parent of the p tag is the div tag. Finally, the body is the parent of the div tag. Each of the elements are nested within each other.
Manipulating the DOM using JavaScript
So, what happens when we update the DOM and how do we update the DOM?
Note: To test the manipulation of the DOM, there are 2 ways — via JavaScript or the developers console through Google Chrome. You can click on a node and delete using the developer console, or write JavaScript code to do the same thing. The developer console will allow you to view the DOM representation of the HTML source the browser loads.
The below examples are generalized examples and refer to no particular webpages.
Practice using Chrome DevTools:
Clicking on the menu bar on a Chrome browser, and then clicking on “View”, then selecting “Developer”, and finally “Developer Tools” will allow you to work with DOM. Make sure to click “Elements”. If you click on a specific HTML element or a DOM node, see what happens if you press delete on the keyboard. The element is deleted! But has the source code changed? Absolutely not! If you refresh the page, you will notice the page is back to its original state. Manipulating the DOM only manipulated what is viewed on the browser.
Practicing with JavaScript:
The same exact behavior as above, in deleting an html element / DOM node, can be done using JavaScript.
In order to do a simple deletion, the place where the elements / nodes are held, must be selected : The DOM. Because the DOM is an object, and objects contain properties, methods can be called on the DOM to manipulate or retrieve the objects.
Now we call on a method to select an element in the document object. We do this by “speaking” JavaScript with the DOM. Type the following:
document.querySelector('p')The above code will select the p object (paragraph object) within the document object. Here, we are selecting the HTML element through the JavaScript keyword ‘querySelector’. Because the the p is an object, we can call a method on it, to remove the p from the browser. Type the following:
document.querySelector('p').remove()The above code removes the p element from the browser! The “.” dot notation was used to chain the calls. In other words, we were able to do multiple actions via chaining:
- Select the document object
- Within the document object we selected the p element using the “.” dot notation on the document object.
- On the p object, we called on the method, by using the “.” dot notation on p.
If you click “refresh”, you will notice the p was not deleted, it was just a “visual affect” by the browser, and the source code remained the same.
Note : If you notice, the word remove is followed by parenthesis (). Every method calling is followed by a parenthesis.
This was a very basic example of using JavaScript to talk to the DOM. It is important to understand that the DOM and JavaScript work together to allow the user for browser interaction.
