Beginner’s Guide to Manipulating the DOM
Let’s start off with a brief explanation of the DOM. DOM, or Document Object Model, is the interface of HTML and XML documents. It can be described as the way the document can be accessed and modified, such as its structure, style, and content. DOM can also be thought of as the middleman in that the DOM only knows how to be spoken to in JavaScript. These changes we’re going to talk about will be made in JavaScript and that is what DOM uses to make these changes to the browser. JavaScript and the DOM go hand-in-hand like two peas in a pod. The DOM is usually made reference to as an upside down tree, consisting of branches and leaf nodes, but our DOM tree is made of nodes and objects. For simplicity, a HTML element and node are interchangeable. Below is a representation of a simple DOM tree.
Now, that we’ve reviewed the DOM a bit, we’re going to briefly show you how we can manipulate the DOM. This is where is gets exciting because we literally get immediate results the changes made! How cool is that?
In terms of the kind of manipulation we can do to a web page, the DOM can create, update, modify, and remove any of it’s elements. The ones just mentioned are those most frequently used. But for our purposes were going to discuss — create, insert, and remove in this article. Keep in mind this is a very high level overview of manipulating the DOM. Let’s begin…
Create a DOM element -
How to create a new element and attach it. In a dynamic web page, elements are added to the page directly writing in a HTML file. Since we are creating dynamic web pages, we use JavaScript to create these new elements.
One very useful method is querySelector(). We can use this to locate the element in which we’re looking for. A few examples could be:
let elem = document.querySelector(‘elem’)
let welcome = document.querySelector(‘p’)
The createElement(‘tagName’) method is used to create a new element in the DOM. TagName is the HTML tag, i.e. ‘div’, ‘p’, ‘span’, etc. See examples below:
let element = document.createElement(‘p’)
let button = document.createElement(‘button’)
Above, are two createElement() method’s on the document object to create a new element, which is set equal to a variable.
element.innerHTML = <p>”Hello, world!”</p>
button.innerText = “add candy”
Now, that we have our new element we can change the content of the element with innerHTML or innerText by using either property. This will allow you to add HTML or text to the element.
Update a DOM element -
In order to get the element to appear in the DOM, we need to append it to an existing DOM node. Think about the DOM tree analogy again. We need to glue our new leaf onto the branch.
To do so, we will use appendChild() method to our variable element.
element.appendChild()
The appendChild() method will add the new element to the bottom or end of the parent node.
Remove a DOM element -
How to delete an element from the DOM. This is our last and final step of manipulating the DOM…Yeah! Thus far we have learned how to create and modify existing elements and now to the last piece to the DOM puzzle!
let element = document.querySelector(“div”);
Above, we call querySelector(‘div’) on document in order to find the ‘div’ element within an HTML page. All set to a variable called element. Once we find the first ‘div’ we can call remove() on the element and voila, the element it is gone!
element.removeChild()
In summary, we have learned how to manipulate the DOM with various methods. We created, modified and removed elements in the DOM. By no means is this a comprehensive list, so please be sure to do your research and review other methods as they may be more pertinent to your needs. This article was a brief overview on how to get you going with the basics of manipulating the DOM. Way to go!
