JavaScript Document Object Model (DOM)

What is the DOM? We need to know how to interact with the web page the code lives in. Only by doing that are we going to be able to write pages that are dynamic, pages that react, that respond, that update themselves after they’ve been loaded. Use the DOM. This discussion is based on material in the book Head First JavaScript Programming.

In a previous post, we already took a look at the DOM. In the JavaScript Simple Multiplier Calculator Improved post we used the DOM to first get the reference to the two text boxes. We used getElementById() function and passed in the id of the element we needed a reference to. Here is an example. We have an input text box where the user can type in some text. We will get the text box y its id and then save the text into a variable. We will then display that text below in an HTML paragraph element using the JavaScript innerHTML function.

Enter some text in the text box, click the button and it will be displayed below

You text here!

This example is about as useful as… Anyway it is very underwhelming. However the possibilities are endless just by using this code and a bit more. The HTML code that I used in this post just above the paragraph you are reading is as follows shown below.

<input type="text" id="dom1textbox" />
<input type="button" value="Enter text to be shown below" onclick="dom1()" />
Your text here withing paragraph tags.

The JavaScript code that I used is shown below.

function dom1() {
	var usertext = document.getElementById("dom1textbox").value;
	document.getElementById("displaytextdom1").innerHTML = usertext;

The main pieces of code the is most impostant for this introduction to the DOM are: getElementById, value and innerHTML.

What happens if I use document.getElementById and pass in an id that doesn’t exist? If you try to get an element from the DOM by id, and that id doesn’t exist in an element, then the call to getElementById returns a null value. Testing for null is a good idea when you use getElementById to ensure that the element is there before you try to access its properties.

There is another DOM method named getElementsByClassName that you can use to get elements by class name. With this method, what you get back is a collection of elements that belong to the class (because multiple elements can be in the same class). Another method that returns a collection of elements is getElementsByTagName.

The innerHTML property represents all the content contained in your element, including other nested elements (like a paragraph might include em and img elements in addition to the text in the paragraph). In other words, it’s the HTML that’s “INside” your element. Is there an outerHTML property? Yes! And that property gets you all the HTML inside the element, as well as the element itself. In practice you won’t see outerHTML used very often, but you will see innerHTML used frequently to update the content of elements.

Ok, so given the above information, could we use JavaScript to create some HTML content between two div elements? Perhaps we need to create a simple table on the page based on some simple user input? Yes. Also, you could use it to replace the content of the body element, which would result in your entire page being replaced with something new.

As mentioned before in another post, we are in the world of WordPress in this website. Our JavaScript is contained in files and uploaded to the website using FTP. In this case I have uploaded the files to a place within the theme. Then I go into the theme’s header.php file and add a reference to that file so that the JavaScript I wrote will be loaded in the header section of the page.

Leave a comment

Your email address will not be published. Required fields are marked *