Navigating the DOM with JS 101
So what is the DOM?
Being a web developer requires one to know a lot of different moving parts, but a very important part of the process is working with the DOM and understanding how to navigate it! The DOM, or Document Object Model, is allowing the developer to access the structural model of the page. Now we can script with our chosen language (in this case JavaScript) and manipulate our view!
The DOM is structured a lot like writing HTML; we have a hierarchy and we nest different pieces inside others to make a kind of technological family tree. In fact, it is closer to a family tree than one may think: the nested elements are called children and the higher elements (closer to the root) are called parent elements. We can navigate through this family tree in a couple of different ways, and our identifiers still work as a way to identify different parts (e.g. elements with ids, classes, styles, etc).
The Document Object
This is the top dog most of the time while using the DOM and navigating around the family tree. The ‘document’ stands for the entire program we’re working with and is the main root of our hierarchy, so it’s a great place to start when branching off and discovering or finding certain nodes (elements in the DOM) when searching. To find these elements, you have to ask the structure where to go, and you can do this by starting with ‘document’ to find all the children underneath it (as it is the top parent of all nodes in the DOM).
For example, it’s simple enough for one to grab the ‘head’ node on the hierarchy above by simply inputting ‘document.head’ to select that child element!
Changing the Found Element
Great, now we can grab the node from the DOM, so lets figure out how to manipulate it. To change what is within the contents of the found node, we have to specify what we would like to change (e.g. the color of the node, what the node prints out in text, etc). To change what a node says, or the text within the node, we find the node, add “.innerHTML” at the end, and set it equal to something new. In full, it would look like this:
document.body.innerHTML = ‘<h3>I’m the new text in the body!</h3>”
As you can see above, when I added the new text in the body, I put it surrounded by <h3> tags. Changing the inner text doesn’t require a tag like this, but if you want a certain style or property to your text that you manipulate you have to specify and can just as easily as I did here!
That’s all well and good, but if we are working with a large application or website this would be a pretty monotonous way of seeding all the way down to find the correct child element that we want to manipulate; the string of selectors can get pretty long!
A better way to find what we need is by selecting the element directly. We can do this kind of like how we did with CSS selectors but with slightly different syntax. Regardless, it allows us to find a node and grab it immediately due to its ID or class!
Query Selector will return the first element that matches with what you are searching for; there could be more but only the first will be returned!
document.querySelector(‘h1’)
You can also query select using an ID or class like with CSS selectors. Another way to navigate is by finding an element by directly searching by its ID. This can be really helpful when you know your CSS IDs quite well!
document.getElementById(‘intro’)
Parents and Children
We keep talking about parent and child elements, so wouldn’t there be a way for us to search for certain nodes with that approach to navigation? Absolutely!
Remember, these are all related to each other due to their placement in the hierarchy and relation to the root. Child nodes are further from the root and the direct next to said node. The parent node is closer, and directly next to the said node.
So what’s the syntax? These are the two things to remember:
.parentNode and .children
These approaches will allow you to get all the children or all the parents of hte node you’re searching on (and if there aren’t any, then it will simply return null, not an error). If we wanted to get only the first child back, for example, we could use the property .firstChild instead. This is the same idea as using a query selector; only getting back the first match.
Change an Element’s Style
Once we find these different elements and nodes, we probably want to do something with them! Styling them is a really common use of snagging our different child and parent elements. We can do that easily! While the syntax is a little different than CSS selectors (instead of separating the words with dashes, we do it camelcase), it really is quite simple. Here is how to change the background color of an element we find with a query selector:
document.querySelector(‘#orange’).style.backgroundColor = ‘green’
Above we used a query selector, so it only returns the first element it finds, then we searched by the class ‘orange’ indicated by the hashtag preceding it. After this we use the syntax .style to say we are changing the style, then .backgroundColor (not .background-color) to say we want to change just that. Finally, we simply assign what we want the new color to be.
Next Time
In the next blog we will talk about adding nodes and removing nodes with this approach, as well as using beginning event listeners to start creating some interactivity. Mainly this is information to let you navigate the DOM and change small pieces of the found nodes (like text, color, and other CSS properties). Keep searching and become a fast DOM navigator! It’ll serve any developer well.
