1.2 KiB
1.2 KiB
| title |
|---|
| HTML Dom |
HTML Dom
With the HTML DOM, JavaScript can access and change all the elements of an HTML document.
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:
Each element in the DOM is also called a node.
<html>
<head>
<title> My title </title>
</head>
<body>
<a href="#">My Link</a>
<h1> My header </h1>
</body>
</html>
The DOM for the above HTML is as follows:
With the object model, JavaScript gets all the power it needs to create dynamic HTML:
- JavaScript can change all the HTML elements in the page
- JavaScript can change all the HTML attributes in the page
- JavaScript can change all the CSS styles in the page
- JavaScript can remove existing HTML elements and attributes
- JavaScript can add new HTML elements and attributes
- JavaScript can react to all existing HTML events in the page
- JavaScript can create new HTML events in the page