Working on DOM Nodes and Their Properties in JavaScript

Published in

The Startup

4 min readSep 29, 2020

DOM manipulation is the essence of JavaScript. Without DOM, there’s no JavaScript and without it, the digital world is just a static page that people might find a little dull nowadays.

So, what is DOM? Document Object Model (DOM) is a representation of the web page or document, which can be modified with a scripting language such as JavaScript according to MDN.

The way I learned about DOM is like looking at a tree upside down. And each element in the document tree is called a Node.

Most nodes have a starting tag and ending tag, but nodes like ‘img’ tag are self-closing, meaning you don’t need to add a </img> at the end of the line, instead you do it like ‘<img src= “my image link” />’

Things can be nested inside these tags. The inner node is called a child node and the outer node is considered to be its parent node. This was confusing to me at first, but if you try it through Chrome Dev Tools you will get a better understanding of how this works and know what element you get in return. There will be a quick example below on how a node can access it’s parent node or know it’s child node. Nodeception you say?

Since ‘document’ is an object which has properties and attributes, it will have properties & methods. In order to access things within an object, we use selector and query methods to change the content displayed in the browser.

Element Selectors

When you want to change the attribute of a node, you want to grab the node first using selectors. If you want to be specific in what elements you want to grab from the HTML, you’ll want to use Element selectors.

With this super basic HTML example:

we can use :

document.getElementById(“list-1”) ~ grabs the <ul> node with the id of “list-1”
document.getElementByClass(“Class”) ~ grabs the first <div> node with the class of “Class”.

Query Selectors

This is probably the most common selector when writing JavaScript. It searches the whole document and selects the first element that matches what you’re looking for.

From the HTML example above:

document.querySelector(“h2”) ~ grabs the ‘h2’ node.
document.querySelector(“#list-1”) ~ grabs the <ul> node with id of ‘list-1’. When looking for a node that has an ID, ‘#’ is required before the ID name.
document.querySelector(“.Class”) ~ grabs the first <div> with class of “Class”. Period (.) is required when looking for a node with a class name.
document.querySelectorAll(“.Class”) ~ This gets you a node list collection of all matching elements.

Creating an Element

When you create an element using JavaScript, you create with the intention of appending it into the DOM. Let’s say you want to add a ‘list item’ <li> into the first ‘unordered list’ <ul> in the HTML example above:

Will produce a bullet on the page:

.innerHTML / .innerText / .textContent

There are methods we use to manipulate the data inside a node is using .innerHTML, .innerText, textContent.

While they look similar, each returns different properties.

document.querySelector('.Class').innerHTML//=>  <div class="Class">
        <h3>List of items:</h3>
         <ul id="list-1">
          </ul> 
      </div>

.innerHTML returns the whole HTML markup

document.querySelector('.Class').innerText//=>  "List of items:"

.innerText returns the string and aware of it’s CSS styling

document.querySelector('.Class').textContent//=>  "
         List of items:   
       
      
              "

.textContent returns the string with the spaces and where it’s located, but without the tags. It’ll also show you the styling used in the HTML.

When setting a new value to a text inside a node, using innerText or textContent might be a better choice since it is less destructive, or doesn’t mess with the HTML code of that node. If you’re replacing the whole HTML line with another that you prefer, then innerHTML it is. For more details on this, check out MDN

Changing Attributes

One simple attribute change can go like this:

const element = document.querySelector(".Class")element.style.backgroundColor="#f0f0f0"//=> changes the selected elements(in this case the 'Class' class) background color to grey

Removing Elements

Removing the <h3>List of items:</h3> tag can go like this:

const div = document.querySelector('.Class') div.firstElementChild 
 // => <h3> .. </h3>
firstElementChild grabs the first child node of that <div> tagdiv.firstElementChild.remove()
// => removes the h3 node from the DOM.div.parentNode.remove()
// => removes the body of the HTML

Conclusion

This is only the surface of what JavaScript can do to the DOM. The language has evolved for years with new additions of standardization through ECMAScript, and it is exciting to see where this will go in the future.