HTML Document Object Model

What is it?

The HTML DOM defines a standard way for accessing and manipulating HTML documents. The DOM presents an HTML document as a tree-structure.

In the DOM, everything in an HTML document is a node.

The DOM says:

  • The entire document is a document node
  • Every HTML element is an element node
  • The text in the HTML elements are text nodes
  • Every HTML attribute is an attribute node
  • Comments are comment nodes

Example Node tree:

<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>

From the HTML above:

  • The <html> node has no parent node; it is the root node
  • The parent node of the <head> and <body> nodes is the <html> node
  • The parent node of the “Hello world!” text node is the <p> node

and:

  • The <html> node has two child nodes; <head> and <body>
  • The <head> node has one child node; the <title> node
  • The <title> node also has one child node; the text node “DOM Tutorial”
  • The <h1> and <p> nodes are siblings, and both child nodes of <body>

It has some properties and methods as well.

Some DOM properties:

  • x.innerHTML – the text value of x
  • x.nodeName – the name of x
  • x.nodeValue – the value of x
  • x.parentNode – the parent node of x
  • x.childNodes – the child nodes of x
  • x.attributes – the attributes nodes of x

Note: In the list above, x is a node object (HTML element).

Some DOM methods:

  • x.getElementById(id) – get the element with a specified id
  • x.getElementsByTagName(name) – get all elements with a specified tag name
  • x.appendChild(node) – insert a child node to x
  • x.removeChild(node) – remove a child node from x

Note: In the list above, x is a node object (HTML element).

Example:

<html>
<body>

<p id=”intro”>Hello World!</p>

<script type=”text/javascript”>
txt=document.getElementById(“intro”).innerHTML;
document.write(“<p>The text from the intro paragraph: ” + txt + “</p>”);
</script>

</body>
</html>

DOM Methods details:

getElementById(parameter): gets the element which has the id equals to the parameter

getElementsByTagName(parameter): gets the element which is the html tag equals to the parameter

Working with DOM code snippets:

document.body.bgColor=”lavender”; //changes the document’s background color

document.getElementById(“p1″).innerHTML=”New text!”; // replaces the text of all p1 id element with “New text”

<input type=”button” onmouseover=”document.body.bgColor=’green'” onclick=”document.body.bgColor=’lavender’;” value=”Change background color” />

.style : this property indicates you can also work with the element’s style values

Events:

Examples of events:

  • A mouse click
  • A web page or an image loading
  • Mousing over a hot spot on the web page
  • Selecting an input box in an HTML form
  • Submitting an HTML form
  • A keystroke

Example: <input type=”text” id=”email” onchange=”checkEmail()” />

For more: visit W3Schools

Advertisements
Posted in DOM

One thought on “HTML Document Object Model

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s