Manipulating the DOM - Add, Modify, Anything

So far so good. We have seen some of the basic programming concepts but we haven't really produced anything interesting in terms of output. Javascript's main role in web development is to change the HTML, that we as developers write, but change it 'on the fly' in response to some event of some sort - very often taking the form of user interaction - pressing a button, rolling over an image etc.

In order to change the HTML in response to an event, Javascript needs to be told which bit of the document to change. In web development we refer to the HTML that makes up our web page as the DOM. DOM stands for Document Object Model. W3C the standards body behind web technologies provide the following definition for the DOM.

It defines the logical structure of documents and the way a document is accessed and manipulated.
With the Document Object Model, programmers can build documents, navigate their structure, and add, modify, or delete elements and content. Anything found in an HTML or XML document can be accessed, changed, deleted, or added using the Document Object Model.

That is a pretty important statement. Just scan it again. Do you see the key words, 'add', 'modify', 'anything'. Javascript gives you the power to change anything in the DOM - that is the HTML of your document - and this gives us the interaction for which Javascript is famed.

Targeting DOM Elements

Javascript provides a wealth of tools for targeting the bits of the DOM you want to change. We'll start with one of the easiest and most popular techniques. Now remember you old friend CSS. In particular do you remember how you could create an ID selector by adding an ID attribute to a HTML element as follows:

<p id="cheese">Cheese is a way of life</p>

And then you would create your CSS rule (which is another story):

    color: #0000ff;

The ID has another use. We can use the ID, which should be unique in the document, to target it with Javascript. This is done with document.getElementById(). When your web browser loads a web page, this is understood by Javascript as what is known as a 'document object'.

Tip: Objects are used in lots of programming languages and commonly have what are known as properties and methods. A property is something that describes a feature of the object - an adjective such as weight, height, size. A method is something that an object can do - a verb such as run, jump, eatCheese.

So document is used to tell Javascript it is the DOM we are interested in. Then the getElementById method of this document object is used to ask the javascript to, as the name suggests, get an element by its ID. We'll need to tell it specifically which ID we mean, and that is feed to the hungry method as a parameter ie:


Updating content with the innerHTML property

This still doesn't do anything interesting but the key point is we have the object and we can now do things to it. One property of a HTML element like a <p> is that of innerHTML. This is used to change the 'innerHTML' of the element ie change its content. As a property we set its value using an assignment = sign. So we could say:

document.getElementById('cheese').innerHTML = "Lancashire Crumbly";

Take a look at this simple demo. Sorry but this is a really rubbish demo and not upto the usual brilliant standard of Must Be Built. Why is it so rubbish? Well as soon as you load the page the Javascript kicks into action and makes the change to the DOM. If you look at HTML source code of the demo (right-click and 'View Source' in the browser) you'll see what I mean. The <p> of ID 'cheese' has a value of 'Red Leicester'.

<p id="cheese">Red Leicester</p>

But you won't see "Red Leicester" as the Javascript at the bottom of the page kicks-in once the page has loaded:

<script language="JavaScript" type="text/javascript">
document.getElementById('cheese').innerHTML = "Lancashire Crumbly";

... and this will change the innerHTML of the <p> to 'Lancashire Crumbly'.

To allow us to actually see the change to the DOM requires adding an event. In this demo when you click the text 'Change' the cheese option is changed.

Now this second demo has introduced events - so we better talk about them next.

Leave a Reply