JavaScript HTML DOM Intro
The HTML DOM (Document Object Model) is a standard object model and
programming interface for HTML. When a web page is loaded, the browser creates a Document
Object Model of the page.
The DOM Tree of Objects
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.
The W3C DOM Standard
The W3C DOM standard is separated into 3 different parts:
- Core DOM: Standard model for all document types.
- XML DOM: Standard model for XML documents.
- HTML DOM: Standard model for HTML documents.
What is the HTML DOM?
The HTML DOM is a platform and language-independent interface that allows
programs and scripts to dynamically access and update the content, structure, and style of a
document.
Visualizing the DOM: Think of your HTML document as a tree. The
<html> tag is the root, while <head> and
<body> are its main branches. Every tag and piece of text is a
node in this tree.
Key Points to Remember
- DOM stands for Document Object Model
- It is a tree-like representation of your web page
- JavaScript uses the DOM to manipulate HTML and CSS dynamically
- Everything in the DOM is a Node (Elements, Attributes, Text)
- The
document object is the gateway to the entire DOM
- It follows a standard established by the W3C