JavaScript and DOM Concept

The main purpose of writing this blog to give an introduction about DOM, how can we manipulate HTML and how the interaction with HTML happens using JavaScript.

What is DOM ?

DOM(Document Object Model) is a programming interface for HTML documents. When a browser loads a webpage, the browser creates a Document Object Model of that page. “The DOM is a platform and an interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”

Document Object Model Tree

In HTML DOM tree, all nodes in the tree can be accessed by JavaScript. Javascript will be used to access and modify DOM Objects and Properties. This tree is created as tree of objects. New nodes can be created, and all nodes can be modified or deleted. In DOM, all HTML elements are defined as objects.

In the above tree

• The top node is called the root (or root node)
• Every node has exactly one parent, except the root (which has no parent)
• A node can have any number of children
• Siblings (brothers or sisters) are nodes with the same parent

Dom Methods and Properties

We need to understand to terminologies in DOM Methods.

• HTML DOM methods are actions we can perform (on HTML Elements).Like adding or deleting and HTML element.
• HTML DOM properties are values (of HTML Elements) that we can set or change. Like changing the content of an HTML element.

There are three methods by which we can access/select the HTML elements. These methods are as follows:

1. document.getElementById (id) –It will select an HTML element by element id.
2. document.getElementsByTagName (name) – It will select an HTML element by tag name.
3. document.getElementsByClassName(name)-It will select an HTML elementby class name.

Following are the DOM properties by which we can change HTML elements:-

1. element.innerHTML– It will change the inner HTML of an element
2. element.attribute -It will change the attribute value of an HTML element
3. element.setAttribute– It will change the attribute value of an HTML element
4. element.style.property -It will change the style of an HTML element

For adding and deletion of HTML elements we will be using following methods:-

1. document.createElement(element)– It will create an HTML element
2. document.removeChild(element)- It will remove an HTML element
3. document.appendChild(element) – It will add an HTML element
4. document.replaceChild(element) – It will replace an HTML element
5. document.write(text) – It will write into the HTML output stream

For finding HTML objects we will be using following methods:-

1. document.anchors -Returns all <a> elements that have a name attribute
2. document.forms – Returns all <form> elements
3. document.images – Returns all <img> elements
4. document.links -Returns all <a> elements that have a href attribute

HTML DOM Events

A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element.

Following is the list of different types of Mouse Events which can be possible in Javascript.

1. onclick – The event occurs when the user clicks on an HTML element.
2. ondblclick – The event occurs when the user double-clicks on an HTML element.
3. onmouseover – The event occurs when the pointer is moved onto an HTML element.
4. onmouseout – The event occurs when a user moves the mouse pointer out of an HTML element.

How to use with JavaScript?

Suppose you have an UL with few LI elements in it and you want to change the text color of these LI:

var getAllLists = document.getElementsByTagName('li');
for( var i = 0; i < getAllLists.length; i++){
    getAllLists[i].style.color = '#ff0000';
}

Summary

DOM works as a bridge between JavaScript and HTML as it allows JavaScript to manipulate HTML completely. It has collection and selection methods along with various methods and properties to change element’s attributes.