July 30, 2017 Alex Anderson Webdev Guild
This post was written for a WebDev Guild requirement.
The browser provides a
document represents everything that the browser parsed from your HTML file. It also has some properties and methods which help when manipulating the DOM later on.
Try it out
Open up your web browser to a blank page by going to about:blank. Then open up your web inspector or dev tools. You can typically do this by right clicking on the page and choosing "Inspect Element" from the drop down.
If you don't see that, you might be using Safari and you need to turn on developer mode. Follow this guide to turn on developer mode.
"Hello". It should say "Hello" back. (It is a friendly console).
Now try typing the following:
That is a command that says '
document, overwrite everything in the DOM and replace it with 'Hello world!' You should see that text in the browser.
document.write("<h1>This is a header</h1>");
When you write HTML in the
document.write command, it parses the HTML and renders it to the page. You could technically use
Let's create some HTML elements to put on the page. We can do that with a special method attached to
var myDiv = document.createElement("div");
This creates a new
div in the DOM and puts it in the variable. With that variable, you can change anything you want to about the div. Want to put text in it?
myDiv.innerText = "🚀";
"Hang on," you might be saying, "Why don't I see that div on the page?" Good question. For the div to appear on the page, you have to put it on their yourself. Otherwise, it could just appear anywhere! To add it to the page, you have to append it to another DOM element with the
[element].appendChild method. In HTML, there is one DOM element which contains all of the elements which are shown on the page:
<body>. Same thing for the DOM. You can access the DOM
body directly from the
And now the div should be showing up on the page!
A few things to consider here:
Since I still have a reference to the original
div variable, I can change that
div at any time and my changes will update in the browser automatically. In fact, I can add HTML to the inside of the
div too! All I have to do is set the
innerHTML property of the
div to an HTML string.
div.innerHTML = "<p>This is <strong>cool</strong>, no?</p>";
Just like with the
document.write, the browser evaluates the HTML on the spot and sticks it in the displayed DOM where the
div is. Nifty!
I can change any attribute of the
div.class = "blah". Are you just going to overwrite all of the other classes? Are you going to add a class? How do you remove a class? There is a specific syntax for manipulating classes:
div.classList.add("awesome"); // Adds the awesome classdiv.classList.remove("awesome"); // Removes the awesome classdiv.classList.contains("awesome"); // false - tells me if there is a class on `div` called 'awesome'div.classList.toggle("awesome"); // Adds 'awesome' if it isn't there already; removes it if it is.
There are a lot of other methods, attributes and properties for manipulating the DOM. These are just the basics. There are a lot of resources out there, but the best learning is to do. Play around. Use the dev tools and see if you can find out how things work on your own. Do some Googling or check out the extra learning if you get stuck.
Best of luck to you!