DOM

Window | Core DOM | DOM | CSS DOM |

The DOM or Document Object Model is an ... interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.

There are three DOMS, (Core, XML, and HTML) but we're most interested in the one that deals with HTML documents - i.e. web pages. A DOM has the concept of a hierarchial structure of the subject and each item on this hierarchial chart is a node. Nodes have relationships of parent, child, and sibling depending on where they are in the chart for the particular web page. This is be the node tree of a simple webpage with a title, h1 header, and link:

 

Vocabulary

An Object represents a node in HTML such as a <h1> tag or a <p>. Objects have Properties and Values. A Method (like a function call) is used to get and set the properties and value of Objects.

Window DOM

Below are listed the most commonly used DOM objects and some of their most common properties or methods(). Demo window

Window Objects

• event
• screen (client's display screen) e.g. screen.availHeight
  • availHeight, availWidth (excludes TaskBar)
  • height, width
• navigator (browser) e.g. navigator.appName
  • appName (returns "Windows Internet Explorer" for IE or "Netscape" for Firefox)
    • Browser example - try this in all the browsers you have to see how different browsers are described
  • Other details Example - try this in all the browsers you have to see the details for different browsers
• history
  • length
  • back()
• location (current url)
  • href (entire current url)

Core DOM

Some useful methods in the Core DOM

• document.write(html) puts text in the current html page
• document.getElementById
• document.getElementsByTagName
• document.getAttribute
• document.setAttribute
• createElement()
• createTextNode()

There are many more - w3c and quirksmode are some places you can read about the rest of the methods.

Link to complete DOM reference on W3school

Document Object Model

• Document (technically a child of Window so window.document.xxxx but "window" can be deleted)
  • cookie (sets or returns the cookies associated with this document)
  • Methods
    • document.getElementById(id) this returns the element matching the ID
    • documnet.getElementsByTagName(tag) this returns all the elements matching the tag
    • document.write(string) this puts text on the current html page
    • document.element.length returns the number of the specified Element type found in the document. e.g. document.images.length - number of images in document
  • Images <img> (test)
    • name, id, src, width, height, align, border, alt - all these normal properties of an image can be set using document.images[x].property or document.getElementById(id).property=newproperty;
  • links <link> your linked resources such as css or js files
    • href (url of linked resource)
  • table <table>
    • border, id, width, caption, cellPadding, cellSpacing
    • methods: insertRow(), deleteRow()
  • anchors <a>
    • href, target, name, id, innerHTML (=link text)
  • forms <form> (test)
    • name, id, length are available for the form
    • value, id, name are available for most of the elements below
    • elements[] returns all the elements in the form
    • (Elements) form can directly reference each of the elements below
      • Button
      • Radio
      • Checkbox
      • Text
      • TextArea
      • FileUpLoad
      • Hidden
      • Password
      • Reset
      • Submit

CSS DOM

Not as powerful as being able to dynamically alter the content of the page, but can be useful. For completeness - here's the basic idea.

element.style.stylename
where:

element is some element of the page such as all the items with the id of "x" (getElementById) or all the elements with a particular tag (getElementsByTagName)

and the style name is a css style such as background or color or font-weight. Simply write element.style.styleName. If the style name consists of two or more words separated by hyphens '-', remove the hyphen and capitalise the first letter of the word following it. For example,
background-color becomes backgroundColor.

When setting a value, it should be set as a string.

 

---