JavaScript Tutorials


» Introduction to JavaScript

» Practice IT Editor

» JavaScript Example

» JavaScript Placement

» JavaScript Syntax

» JavaScript Statements

» JavaScript Input

» JavaScript Output

» JavaScript Comments

» JavaScript Variables

» Variables' Scope

» JavaScript Operators

» JS Expressions & Concatenation

» JavaScript Data Type

» JavaScript Numbers

» Number Object

» JavaScript Strings

» String Object

» JavaScript Booleans

» Boolean Object

» JavaScript Functions

» JavaScript Arrays

» Array Object - Properties

» Array Object - Methods

» JavaScript Objects

» JavaScript Undefined

» JavaScript Nulls


» If Statement

» If Else Statement

» JavaScript Ternary Operator

» Switch Statement


» For Loops

» While Loops

» Break & Continue

» For...In Loops

» do...while Loop


» JavaScript Functions

» Creating Functions

» Functions' Parameters

» Functions' Arguments

» Function Invocation

» The Return Keyword

» The Arguments Object

» Callback Functions

» Arrow Functions


» JavaScript Arrays

» Creating Arrays

» Accessing Arrays

» Looping Arrays

» Multi - dimensional Arrays


» JavaScript Objects

» Creating Objects

» Prototype Definition

» Accessing Objects

» The this Keyword


» Introduction to AJAX


» Introduction to JSON


» The Date Object

» Date Methods

» Timing (SetInterval & SetTimeout)


» Math Object

» Math Methods


» DOM Introduction

» Accessing HTML Elements in DOM

» Get And Change Elements' Contents & Values

» Change Styling - DOM CSS

» DOM Attributes

» JavaScript Event Listeners

» DOM Event Listeners

» JS Events


» JS Strict Mode

» JavaScript Hoisting

» JavaScript let keyword

» Reserved Keywords

» JS Best Practices

» JavaScript vs ECMAScript


» JavaScript Calculator

.. » JavaScript » Html / Js Dom » DOM Introduction
Share Tweet WhatsApp

DOM Introduction

DOM stands for Document Object Model. You have learnt about objects, objects' properties and methods, accessing object properties and methods in previous tutorials. Therefore, it is advisable to proceed with this chapter only after having an understanding of JavaScript objects. The document object is same as the objects you had previously learnt about. It is a very important object in JavaScript having properties and method we need to access in order to create an interactive webpage. In this chapter, you will learn about its model or organization.
KeyNote: The Document Object Model is the reason JavaScript have power over a webpage in which it can get any element from a webpage, get the value or content of such element, change its value or content, add or change its attributes/attribute values and a lot others.
The Document Object Model is simple and straightforward. An understanding of it means you now have power and control over your webpage in JavaScript. By definition, the Document Object Model(DOM) is a W3C (World Wide Web Consortium) standard object containing all elements of a webpage. This means that your HTML document or webpage have an object with properties and methods. This object is created by a browser whenever a webpage loads. The document Object is modelled or organized in a tree like manner with the whole webpage being the main tree and the various elements in it constituting the branches. This means the whole webpage is the main object(document) with other smaller objects (All HTML elements) in it. Therefore, to access whatever element on a webpage, you need to go through the document object first and then, use any of its methods to get that element. For example, you must have seen a JavaScript statement such as,
Above is exactly what we are talking about. The statement is to access an element with the identity "myEl" on the webpage. So, first, we accessed the document object and called one of it methods, getElementById(element id) and then, we now have access to that element. The element will in turn have an object containing properties and methods. One of such properties is the innerHTML property which represent the content (text and HTML) of the element and when changed also changes the content of that element in the webpage without reloading. So, you see how it works i.e being able to change elements properties dynamically in JavaScript.
<h1 id='myh1'>Hello World</h1>

<button onclick='change()'>CHANGE</button>

function change(){
document.getElementById("myh1").innerHTML = "How is the world today?";


In this chapter, you will learn how to:
  1. Use various methods to access various elements on a web document.
  2. Get such elements' contents or values.
  3. Change such elements' contents or values.
  4. Get or Change such elements' stylings.
  5. Change such elements' attributes.
  6. Add new attributes to such elements.
  7. Add event handlers to a webpage.
  1. The document object is an object created for a webpage by a browser whenever a webpage loads.
  2. It contains all the elements of a webpage as individual objects which can be accessed with its methods.
  3. The Document Object Model (DOM) refers to the model or organization of the document object.
  4. The organization can be liken to a tree (the document object itself) and its branches (the object of HTML elements in it).
  5. Understanding the DOM helps in understanding that power, JavaScript has in building interactive webpages by getting elements, changing their content and values, changing their attributes and attribute's values.
  6. You do not only change but can get such content and values for whatever operations. Also, add new attributes and attributes' values.
Take a short quiz on DOM Introduction.
Ask a question or tell us if DOM Introduction is easy or not.

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.

StackBeginner 2021 © Joseph Omamode