HOLLA TECH - LEARN

The DOM
 

When you open any webpage in a browser, the HTML of the page is loaded and rendered visually on the screen.
To accomplish that, the browser builds the Document Object Model of that page, which is an object oriented model of its logical structure.
The DOM of an HTML document can be represented as a nested set of boxes: 

Holla Tech - Learn JavaScript

NOTE!
JavaScript can be used to manipulate the DOM of a page dynamically to add, delete and modify elements.
 


DOM Tree
 

The DOM represents a document as a tree structure.
HTML elements become interrelated nodes in the tree.
All those nodes in the tree have some kind of relations among each other.
Nodes can have child nodes. Nodes on the same tree level are called siblings.
For example, consider the following structure:

Holla Tech - Learn JavaScript

For the example above:
<html> has two children (<head>, <body>);
<head> has one child (<title>) and one parent (<html>);
<title> has one parent (<head>) and no children;
<body> has two children (<h1> and <a>) and one parent (<html>);

NOTE!
It is important to understand the relationships between elements in an HTML document in order to be able to manipulate them with JavaScript.

The document Object
 

There is a predefined document object in JavaScript, which can be used to access all elements on the DOM.
In other words, the document object is the owner (or root) of all objects in your webpage.
So, if you want to access objects in an HTML page, you always start with accessing the document object.
For example:

document.body.innerHTML = “Some text”

 

As body is an element of the DOM, we can access it using the document object and change the content of the innerHTML property.

NOTE!
The innerHTML property can be used on almost all HTML elements to change its content.

BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE JAVASCRIPT MAIN COURSE PAGE. 

JAVASCRIPT MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT