Hariharan S J

Posted on Mar 25

JavaScript DOM Basics: A Beginner’s Guide

#javascript #webdev #tutorial #beginners

1. Introduction

JavaScript DOM (Document Object Model) is a programming interface that allows developers to interact with HTML elements. It helps in making web pages dynamic by allowing changes in content, structure, and style using JavaScript. In this blog, we will learn the basics of DOM in a simple way.

2. What is DOM?

The DOM represents a web page as a tree structure where each element is treated as an object. Using JavaScript, we can access and modify these elements easily.

HTML page → tree structure → JavaScript control pannum

3. DOM Structure (Tree Concept)

The Document Object Model (DOM) represents an HTML page as a tree structure.
Each part of the HTML document is treated as a node (object) in this tree.

Main Parts of the DOM Tree

Document → The entire web page
HTML → Root element
Head → Contains metadata (title, links, etc.)
Body → Contains visible content
Elements → Tags like

,

, etc.

Example HTML

<html>
  <body>
    <h1>Hello</h1>
    <p>Welcome</p>
  </body>
</html>

💡 Explanation

The document is the top-level object
Inside it, we have the html element
The body contains all visible content
Elements like

and

are child nodes

This tree structure helps JavaScript easily access, modify, and update elements on a web page.

4. Selecting Elements (DOM Methods)

Most important basics

document.getElementById("id")
document.getElementsByClassName("class")
document.getElementsByTagName("p")
document.querySelector("p")

Short explanation

ID → single element
class/tag → multiple elements

5. Changing Content

document.getElementById("title").innerHTML = "Hello JavaScript";

Use:

innerHTML
textContent

5.Creating Elements in DOM

JavaScript allows us to create new HTML elements dynamically using the DOM. This is useful when we want to add content to a web page without reloading it.

1. Creating a New Element

We use document.createElement() to create a new element.

let newElement = document.createElement("p");

This creates a new

element, but it is not yet visible on the page.

2. Adding Content to the Element

We can add text using textContent or innerHTML.

newElement.textContent = "This is a new paragraph";

3. Adding the Element to the Page

To display the element, we must append it to an existing element.

document.body.appendChild(newElement);

Now the paragraph will appear on the webpage.

Full Example

let newElement = document.createElement("p");
newElement.textContent = "Hello, this is added using DOM!";
document.body.appendChild(newElement);

Key Points

createElement() → creates element
textContent → adds text
appendChild() → adds element to page

6.Changing Attributes

We can modify HTML attributes like id, class, or src.

let img = document.getElementById("myImage");
img.setAttribute("src", "image2.jpg");

Common methods

setAttribute()
getAttribute()
removeAttribute()

7. Event Listeners

A modern way to handle events in JavaScript.

let btn = document.getElementById("btn");

btn.addEventListener("click", function() {
  alert("Button clicked!");
});

8.Conclusion.

The Document Object Model (DOM) is a fundamental concept in JavaScript that allows developers to interact with and manipulate web pages dynamically. By understanding DOM basics such as selecting elements, creating and removing elements, handling events, and modifying content and styles, beginners can start building interactive and responsive websites. Mastering the DOM is an important first step toward becoming a skilled web developer.

DEV Community