Document object model (DOM)

From virtualMV2015wiki
Jump to: navigation, search
 Home  Main Page <


Icon Objective.png

Objective : Understand the DOM

By the end of this page you will be able to:

  • Understand the Document Object Model

Overview

In order for a computer to understand a document, it needs to follow a pre-defined structure built up of identifiable objects (document objects).

On a computer the term document is used to represent many file types, indeed we use folders to arrange computer documents (files?) including Word-processing (from MS-Word or Open Office), Spreadsheets, to databases and multimedia files (such as images, sounds and videos).

Kantor (2006)[1] identified 3 aspects that define a document:

  • content
  • structure, and
  • style.
aspectText documentHTML document
contentthe information, or
meta-information(properties e.g. author, table of contents, etc.)
information: content in the <body>,
meta:contained in the <head> tag
structurechapters, paragraphs, listsFormatting tags such as: <p>,<div>, <li>
styleincludes the fonts, colours, etc. At top level can identify the output media, screen, printer, Braille,
<link rel="stylesheet" ... media="print"> (w3c:Media types, n.d.)[2]
to identifying how to display fonts, colours, backgrounds, etc. usually via the style attribute.

Not all documents will contain all three, for example a file containing a list of names and addresses to be used by another computer could have no style information. However, any document to be used for human interaction or display will have all three.

Document tree

The DOM can be thought of as a tree diagram constructed from the tags in an HTML page. So a simple DOM for a web page is:

<html>
|-<head>
|  |-<title>
|-<body> 
   |-<h1>
   |-<p>

Javascript - can access by navigating through the document tree but easier to use getElementByID and provide the elements with an id attribute.

Icon References.png References

  1. Kantor, P. L. (2006). Peter L. Kantor - Lectures and References. Retrieved June 14, 2009 from http://www.daaq.net/index.php?path=reference/documents/
  2. w3c:Media types (n.d.) Media types. Retrieved June 14, 2009 from http://www.w3.org/TR/CSS2/media.html

Document object model (DOM). (2017). In virtualMV's ( Michael Verhaart ) wiki. Retrieved March 29, 2017, from http://www.virtualmv.com/wiki/index.php?title=Document_object_model_(DOM)    (zotero)