WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

JavaScript HTML DOM


The HTML DOM provides access to all elements of a JavaScript HTML document.


The HTML DOM (Document Object Model)

When a web page is loaded, the browser creates the document object model of the page.

HTML DOM The model is structured as a tree of objects :

The HTML DOM Tree of Objects

DOM HTML tree

With a programmable object model, JavaScript has enough power to create dynamic HTML.

  • JavaScript can change all HTML elements in the page
  • JavaScript can change all HTML attributes in the page
  • JavaScript can change all CSS styles in the page
  • JavaScript can react to all events on the page

What You Will Learn

Usually, with JavaScript, you need to manipulate HTML elements.

In order to do this, you must first find the element. There are three ways to do this:

  • Find HTML elements by id
  • Finding HTML elements by tag name
  • Finding HTML elements by class name



What is the HTML DOM?

In the rest of this tutorial, you will learn:

  • How to change the content of an HTML element (innerHTML)
  • How to change the style (HTML) of HTML elements
  • How to react to HTML DOM events
  • How to add or remove HTML elements

Find HTML elements by id

The easiest way to find HTML elements in the DOM is by using the element's id.

This example looks for the id = "intro" element:

var x=document.getElementById("intro");
If the element is found, the method returns the element as an object (in x). If the element is not found, x will contain null.

Find HTML elements by tag name

This example finds elements with id = "main" and then finds all elements in id = "main" <p> element´╝Ü

var x=document.getElementById("main"); var y=x.getElementsByTagName("p");

Finding HTML elements by class name

This example uses the getElementsByClassName function to find elements of class = "intro" :

var x=document.getElementsByClassName("intro");