HTML DOM - Document Object Model of HTML

11:33 AM
When discussing about dynamic web pages, it's very important to get a knowledge about HTML DOM. This theories are the basement for the web development. Without these basic, it's hard to proceed with practicals. So, let's get some brief knowledge about HTML DOM. 

What is DOM?

DOM is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.

The W3C DOM standard is separated into three different parts.

  1. Core DOM
  2. XML DOM
  3. HTML DOM

HTML DOM

In the HTML DOM, everything is a node. 
  • Document itself is a document node.
  • All HTML elements are element nodes.
  • All HTML attributes are attribute nodes.
  • Text inside HTML elements are text nodes.
  • Comments are comment nodes.

With the help of Object Model, JavaScript gets all the power it needs to create dynamic web pages. With he help of HTML DOM, JavaScript can do the following things.
  • Change or remove HTML elements on the page.
  • Change ore remove HTML attributes.
  • Change CSS styles.
  • Add new HTML elements and attributes.
  • React to existing HTML events.
  • Create new HTML events.

How HTML DOM works.

The HTML DOM model is structured as a tree of objects. When the HTML document loaded into the browser, it becomes a document object. The document object is the root node of the HTML document and the "owner" of all other nodes. The DOM provides properties and methods to access all node objects.

Example for HTML DOM tree

Creating a DOM tree based on an HTML Document.

<HTML>
   <HEAD>
   </HEAD>
   <BODY>
      <H1>header 1</H1>
      <DIV>
         <p>Paragraph 1</p>
         <h2>header 2</h2>
      </DIV>
      <DIV>
         <p>Paragraph 2</p>
      </DIV>
   </BODY>
</HTML>


 HTML DOM Methods and Properties

HTML DOM methods - Actions which are performed in HTML elements.
  • Eg - Adding or deleting HTML elements 
HTML DOM properties - Values of HTML elements can be set or change.
  • Eg - Changing the content of HTML elements.


Accessing DOM elements. 

The document object represents the web page. Always, we have to access document object first before accessing any element in HTML page.


Finding HTML elements



Changing HTML elements


Let's meet again with another interesting topic related to the ICT field.

***

Tags:

Post a Comment

0 Comments