How to use DOM and Events

Using DOM, JavaScript can perform multiple tasks. It can create new elements and attributes, change the existing elements and attributes and even remove existing elements and attributes. JavaScript can also react to existing events and create new events in the page.

getElementById, innerHTML Example

	 getElementById:  To access elements and attributes whose id is set.

	 innerHTML: To access the content of an element.

Try this Example yourself:

DOM!!!

Welcome

This is the welcome message.

Technology

This is the technology section.

getElementsByTagName Example

getElementsByTagName: To access elements and attributes using tag name. This method will return an array of all the items with the same tag name. Try this Example yourself:

DOM!!!

Welcome

This is the welcome message.

Technology

This is the technology section.

Event handler Example

	 createElement:  To create new element

	 removeChild: Remove an element

	 You can add an event handler to a particular element like this:


document.getElementById(id).onclick=function()
    {
    	lines of code to be executed
    }

OR

document.getElementById(id).addEventListener(“click”, functionname)

Try this Example yourself:

DOM!!!