Introduction to DOM (Document Object Model)

The Document Object Model is “an application programming interface (API) for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated” (from W3C).

Wikipedia adds some useful JavaScript-related insights:

  • “A Web browser is not obliged to use DOM in order to render an HTML document. However, the DOM is required by JavaScript scripts that wish to inspect or modify a Web page dynamically. In other words, the Document Object Model is the way JavaScript sees its containing HTML page and browser state.”
  • “An HTML page is rendered in a browser. The browser assembles all the elements(objects) that are contained in the HTML page, downloaded from web-server in its memory. Once done the browser then renders these objects in the browser window. Once the HTML page is rendered in web-browser window, the browser can no longer recognize individual HTML elements(Objects).”
  • “Since the JavaScript enabled browser uses the Document Object Model (DOM), after the page has been rendered, JavaScript enabled browsers are capable of recognizing individual objects in an HTML page.”
  • “The HTML objects, which belong to the DOM, have descending relationship with each other.”
  • “The topmost object in DOM is Navigator (i.e. Browser) itself. The next level in DOM is browser’s Window. And next is Documents displayed in Browser’s Window.”

The image exemplifying the DOM is also from Wikipedia.

The whole specification from W3C of DOM Level 3, the current release of DOM: http://www.w3.org/TR/DOM-Level-3-Core/

Advertisements

One thought on “Introduction to DOM (Document Object Model)

  1. Pingback: JS exercise, day 4 – Random Text | Software Studies for Media Designers

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s