45 lines
1.2 KiB
Markdown
45 lines
1.2 KiB
Markdown
|
---
|
||
|
|
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 **D**ocument **O**bject **M**odel 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
|
||
|
|
<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
|
||
|
|
|
||
|
|
#### More Information:
|
||
|
|
|
||
|
|
<a href='https://www.w3schools.com/js/js_htmldom.asp' target='_blank' rel='nofollow'>W3C - HTML DOM</a>
|
||
|
|
|