Manipulating the DOM for Dummies Like Me

One of the first things we covered when starting to learn Javascript at Flatiron was the DOM. Who is he? What does he do? Is he more machine than man? Well, yea pretty much. The DOM is not a person. The DOM actually stand for the Document Object Model. At its very base level it is the data representation of the object that comprise the structure and content of a website. It represents the page so that programs can change and manipulate a web documents style, structure, and content. Basically it’s how things get onto a website in Javascript land.

So how do we use it? Well luckily all it takes is three basic steps to manipulate the DOM and get things to appear on your page. First things first we start with our basic HTML document.

The important part here is referencing the Javascript file that will allow us to access and play with the DOM. So what should be do? How about put some content in that <section>! Well heres how we do it:

Step 1: Grab the HTML element you want to manipulate using document.querySelector and set that value to a constant.

Step 2: Manipulate that element in whatever way you need. For this example we will create a <p> tag to go into the <section> and then add some text content to it.

Step 3: Append it! Take what we have made and append it back to the element we selected in the first step. It should look something like this:

And voila! The <section> in the HTML document now contains that <p> tag and the text content we set to it. You can do any number of things, especially with dynamic data that may change depending on what you give it.

Now go forth and manipulate those DOMs!!!