Document Object Model Jan16 '06

I’ve begun to use AJAX regularly, in my web development work - for my job, that is. You won’t see any AJAX on this blog for some time. (I’m not even sure where I’d use AJAX, on this blog - but there might be some place for it, eventually.)

So far, AJAX has taught me a lot about the Document Object Model, and how that adds another "layer" to your web page scripting.

For example, the database (for all my intents and purposes) could be considered the "base" level. On top of that, the server-side scripting language (PHP, ASP, etc) resides. On top of that, the actual HTML page resides. And... on top of that, the DOM resides.

Here’s a small diagram, illustrating these "layers":

Graphical illustration of layers in a web page

So... that’s four layers to work with.

The DOM was tricky for me to understand, at first.

Essentially, the finished (rendered) HTML page can be manipulated in the browser, but the actual code itself doesn’t change. It’s almost like an invisible layer, on top of the HTML.

In other words, you can add elements to the document, without actually changing the document structure itself.

For example, let’s say you have a simple unordered list, with four items:

Item
Item
Item
Item

Obviously, as you view the list above, the HTML page has already been rendered. But, what if I’d like to add another list item, to that list, without reloading the page?

As a response to an event, I could easily do that. The event will be clicking the button below:

Now... this is obviously not AJAX, but it demonstrates (briefly) how the DOM layer works. It’s an invisible layer, on top of the HTML - often called DHTML, standing for Dynamic HyperText Markup Language.

This is all stuff that I’ve heard before, but never actually applied to my own work.

It’s very interesing, and it’s opened up loads of new possibilities for development.

Categories: JavaScript , Web Development

Add Feedback (view all)

Leave feedback

Feedback

Input format: The editor controls below will assist with Markdown syntax.

Status

Sub-status

Your info Name: Email (will not show on page):

Follow new comments via email? (You can turn this off any time)

Do you want your comments emailed to yourself?

Home Page (optional):

Mmm, good fun. My first AJAX-utilising (though not dependent... it degrades nicely) project is launching in a week or two (end of January), which i ... Read more.

Josh - yep... good points, regarding the XML confusion. I've seen the same thing. For one AJAX project I was working on - the script that was used ... Read more.

matthom is published and produced by Matt Thommes - an independent publishing enthusiast, mobile blogger, content creator, informative writer, web developer from Chicago. Never one to conform, Matt intends to promote the effect the web has on our lives, in an effort to intensify, instruct, and clarify all that is happening around us.