HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
The HTML DOM is an Object Model for HTML. It defines
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects:
When you want to access HTML elements with JavaScript, you have to find the elements first.
There are a couple of ways to do this:
The easiest way to find an HTML element in the DOM, is by using the element id.
This example finds the element with id="intro":
var myElement = document.getElementById("intro");
If the element is found, the method will return the element as an object (in myElement).
If the element is not found, myElement will contain null.
This example finds all <p> elements:
var x = document.getElementsByTagName("p");
This example finds the element with id="main", and then finds all <p> elements inside "main":
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
If you want to find all HTML elements with the same class name, use
getElementsByClassName().
This example returns a list of all elements with class="intro".
var x = document.getElementsByClassName("intro");
Finding elements by class name does not work in Internet Explorer 8 and earlier versions.
If you want to find all HTML elements that matches a specified CSS selector
(id, class names, types, attributes, values of attributes, etc), use the querySelectorAll() method.
This example returns a list of all <p> elements with class="intro".
var x = document.querySelectorAll("p.intro");
The querySelectorAll() method does not work in Internet Explorer 8 and earlier versions.
HTML object collections are also accessible:
HTML DOM Tutorial
This has been a short introduction to HTMLDOM.
For a full HTMLDOM tutorial go to w3resource HTMLDOM Tutorial.