HomeContent Management Systems

What is the HTML DOM(Document Object Model)?

Like Tweet Pin it Share Share Email

The HTML DOM views an HTML document as a tree-structure. The tree structure that is defined known as a node-tree.All nodes can be accessed through the tree. Their contents can be modified or deleted, and new elements can be created.

 

Programming Interface
In the DOM, HTML documents consist of a set of node objects. The nodes can be accessed with JavaScript (Client side programming language).
The programming interface of the DOM is defined by standard properties and methods.

 

HTML DOM Properties are
x known as HTML element or object of DOM
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

 

HTML DOM Methods
Some simple DOM methods are
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

 

The innerHTML Property
The easiest way to get or modify the content of an element is by using the innerHTML property.innerHTML is not a part of the W3C DOM specification. However, it is supported by all major browser.

 

Events
Every element on a web page has certain events which can trigger JavaScript functions. Events are normally used in combination with functions, and the function will not be executed before the event occurs!
Events examples
> 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