JavaScript getElementById

JavaScript document.getElementById DOM Scripting

DOM scripting, or Document Object Model scripting, is one of the most powerful areas of JavaScript. Through DOM scripting, you can manipulate the content of the page through pure JavaScript, opening up infinite possibilities for dynamic, interactive web pages. The core of DOM scripting, and the best entry point, is document.getElementById().

Introduction HTML nodes

At this point in our tutorial, HTML knowledge is important, however we will try to explain examples as we go along. If you think your HTML might not quite be up to scratch, we have a great HTML Tutorial you may find handy for this section.

A HTML node, entity, or element (for our purposes, they are roughly equal terms), refers to the virtual object the browser creates for a particular HTML tag. All HTML tags are nodes, and most have an id attribute which you can assign a value:

<div id="someid"></div>

When building complex HTML interfaces, most of your key elements should be given IDs, as this is the most common (and simplest) way to access the node programmatically, or from within your programming code.

Accessing nodes programmatically

The web browser will expose the virtual object for each node to JavaScript - in other words, it will give your JavaScript code access to (and control over) every HTML node on the page. And you do this by acquiring a handle on the node - think of a handle like a way to work with an object, just as you would in the real world.

var somediv = document.getElementById('someid');

In this example, we call the getElementById() method on the document object. We give it an ID to the HTML tag, or the node, and it returns us a handle to that node, which we put into somediv. We can then manipulate it quite easily:

<div id="someid"></div>
...
<script type="text/javascript">
var somediv = document.getElementById('someid');
somediv.id = "someotherid";
</script>

While actually examining the result of this code is slightly complicated, it does in fact change the ID of the div to someotherid! Not only that, somediv still represents the same div, as it is only a reference and not the actual div. The important thing to note here is that we had a snippet of HTML with an id attribute, and we changed that ID attribute using a simple JavaScript object and property. Maybe this is a better example, and one where you can actually see the results:

<div id="someid"></div>
...
<script type="text/javascript">
var somediv = document.getElementById('someid');
somediv.innerHTML = "Hello World!";
</script>

Run it in your browser - that's right, you just changed the content of your page through JavaScript, and dynamically too. Play around with this example; you can, of course, use HTML in the innerHTML property. Most nodes will have an innerHTML property, although you should stick to divs and spans if you want to create sections on the page to manipulate via JavaScript.

And there you go: Hello World, first with JavaScript, now with DOM scripting.

A note on object chaining

Let's take a quick look back at our example:

var somediv = document.getElementById('someid');
somediv.innerHTML = "Hello World!";

Here, we first take document.getElementById('someid') and put it into somediv. But why? Because of JavaScript's functional programming, there is absolutely no need to do this. Consider this:

document.getElementById('someid').innerHTML = "Hello World!";

This is exactly the same, because of chaining. Chaining simply refers to adding more and more methods/properties onto the end of your instruction, because each returns an object value. The moment you have an object in some kind of variable/function/property/method, you can probably use dot notation to continue the statement in the same line of code. If a function returns an object, you can continue working with it without having to take that object and put it into another variable first.

However, you can't work on multiple properties of a DOM node in a single call, as the property itself is not an object (and hence cannot be continued with dot notation). Also, it takes some time, especially on large pages, to call document.getElementById and obtain a handle/reference to a node on the page. Therefore, if you want to make two or more operations on that same node, call document.getElementById once, put the handle it returns into a variable and use the variable from there on.