Get Started With The DOM
Now that you’ve learned how to write some Javascript, HTML, and style it with CSS, it’s time to put it all together. The Document Object Model (DOM) is where things (in my opinion) begin to get exciting. During my early days learning JavaScript, things began to click much quicker when I started manipulating the DOM. I watched countless videos, read through materials from Flatiron, MDN, and blog posts, but needed a more tangible window for all of these concepts to be further cemented. Thankfully, moving onto the DOM provided exactly what I needed.
What We Will Cover:
// What is the DOM?
// How can we select elements and manipulate the DOM?
// Common event handling in the DOM
What is the DOM?
The DOM is often analogized to a tree in which the branches are nodes. Much like a tree, the thicker the branches, the more it holds (and vice versa). The tree in this case is upside down with the thickest part (the root which we call document in JavaScript) being in the air and the smaller branches (<div> etc) in the ground.
In this tree, each node has properties and methods which we can manipulate in JavaScript. Manipulating via JavaScript is favored over hardcoding as it enables us to piggy back off of API’s, adding a wider depth of functionality, data, and the dynamic end user experience we’ve all grown accustomed to. While the window is the global element, we often opt for document to retrieve and change desired elements. In this image, the HTML root element is a child of the document, with <head> and <body> both siblings of each other and children of the HTML element.
You may be familiar with developer tools (accessible with key shortcuts; Command+Option+J on Mac, and Ctrl+Shift+C on Windows). Unlike “view source” which displays the straight HTML, elements in developer tools parses the HTML into an object which is the structure of your site. To familiarize yourself with how the browser has interpreted and rendered the website your currently viewing, open the developer tools with the above short keys, navigate to elements, and play around with deleting elements, changing text and whatever else you can think of.
//If you’re interested in the 23 year history of the DOM, click here.
Selecting and Manipulating Elements:
Referencing the above HTML, we will put some of these concepts to practice. Below we will do the following with Javascript;
//remove the <main> tag on line 9
//create a newHeader variable which points to an <h1> node with an id of ‘victory’;
// newHeader variable will point to the <h1> node and will contain “YOUR-NAME is the champion” inside
To grab desired elements, we used document.getElementById and specified the main element from our HTML line 9. When an Id is available, it is generally best practice to grab the element with this method as the Id will be unique. Also available to us to grab elements, we can use the following;
To remove the main tag we opted for .remove(). In the future, we may have cases where we want to replace the existing children of a node. My go to option to accomplish this is replaceChildren(param1, param2, /* ... ,*/ paramN)).
Event Handling:
Event listeners are one of the most important components of a dynamic and engaging website. To add an event listener to an element or DOM object, we use .addEventListener(parameter1, parameter2, parameter3 optional);
// Parameter 1 is the type of event such as ‘click,’ ‘submit,’ and ‘keypress.’ To read further on events, read here.
// Parameter 2 is the function to be executed.
// Optional Parameter 3 is a boolean value which decides if we will use event bubbling or event capturing.
Summary:
Becoming comfortable with the DOM is crucial in programing. Utilizing what we’ve learned above, we can continue practicing and building our DOM manipulation tool kit by working on projects, absorbing
Resources:
Event bubbling versus capturing: read here
DOM manipulation in 18 minutes: watch here
MDN manipulating documents: read here
MDN event handling overview: read here
Different ways to select elements in JavaScript: read here
