Web programming - The DOM Model Subscribe Pub Share

Previous: Web programming 2 style and CSS.

So, HTML basically creates a structure of tags, very much like a tree of "nodes". This is the basis of the DOM model (or the Document Object Model).

The easiest way to see this is to right click here and choose "inspect" - every browser has some such option, allowing you to inspect the DOM of this or any page, anywhere. Browse up and down the DOM of this page and move the mouse from block to block and Google Chrome will highlight them on screen.

You will see scripts and divs and headings and all sorts of things that make up this page. Let's use span, to explore the DOM and how we can play with it. Here

• HTML
• CSS
• JS
• Run »
• Play...

<span>
 <p>an outer span </p>
 <span>an inner span</span>
 <p>back to outer</p>
</span>
<button onclick="alert('hello');">clickme</button>

Which will produce this:

If you do "Run" and then select the inner and right-click and select "Inspect" you will see the structure of the two spans, one inside the other, as Chrome sees it.

Further, in the development console of Chrome, type document.getElementsByTagName('span') and see both span elements selected. That was Javascript and id found all elements with tag span in this document.

Here are some of the important parts that make up a DOM element:

• tag
• class
• name
• id
• style
• content

Here is how we can give our spans an identifier:

• HTML
• CSS
• JS
• Run »
• Play...

<span id="outside">
 <p>an outer span </p>
 <span id="inside">an inner span</span>
 <p>back to outer</p>
</span>

Or inside this page:

That's more like it - if you now go to the console and type document.getElementById('outside') you will see only the outside span selected, so we can now select individual elements in the page, given their identifier.

This ability is terribly important, as you're about to find out: we can do all sorts of things to the elements in a page, like move them around, resize them, change the colors, hide them or change their contents. For instance, lets the contents of the inner span, so paste this into the console:

document.getElementById('inside').innerHTML="new text, eh"

Cool, right? That's only the beginning...