JavaScript and the DOM

HTML is text on a file. When the browser loads it, it builds something else: a tree of objects, one for every tag, every piece of text, every attribute. That tree is called the DOM — the Document Object Model. JavaScript can reach into that tree, find any part of the page, and change it while the page is open. That is how a button click changes a heading, a form shows an error, or a list grows by one item — without reloading the page.

Diagram — see how it fits together

Think of the page as a family tree. <html> is the grandparent, <body> is a parent, and the headings, paragraphs and buttons are the children. JavaScript walks that tree, finds the person it wants, and changes their clothes. The tree never leaves the page — only what you see changes.

Finding elements — getElementById and querySelector

let title = document.getElementById("main-title");
let firstBtn = document.querySelector("button");
let allItems = document.querySelectorAll("li");

document.getElementById("main-title") finds the one element with that id — the fastest and most common way. document.querySelector("button") finds the first element that matches a CSS selector, so you can use classes, tags and combinations: ".card p", "#list li". querySelectorAll finds every match and gives you a list you can loop over. Remember: an id must be unique on the page, so getElementById always finds at most one element.

Changing elements — text, HTML and style

title.textContent = "Welcome to KAMALDNP";
title.style.color = "orange";
title.style.fontSize = "32px";

textContent changes the plain text inside an element — safe, because it never treats the text as HTML. innerHTML changes the HTML inside it, so you can add tags — but never put user-typed text into innerHTML, because a typed <script> would actually run. style changes CSS one property at a time, and the property names use camelCase: backgroundColor, not background-color.

Adding and removing elements

let li = document.createElement("li");
li.textContent = "New student";
document.getElementById("list").appendChild(li);

createElement("li") makes a new element that is not on the page yet. You fill it with text, then appendChild attaches it to a parent — usually a <ul> or a <div>. To remove one, use element.remove(). This is how a to-do list, a student list or a comment section grows without reloading.

Common mistakes

• Running the script before the HTML exists — put your <script> at the end of the <body>, or wait for the page to load.
• Using innerHTML with user input — a typed tag becomes real HTML. Use textContent for anything a user typed.
• Forgetting that querySelectorAll gives a list, not one element — you must loop over it or pick [0].
• Writing CSS property names with dashes in style — style.background-color is a syntax error. Use camelCase: style.backgroundColor.

Remember

• The DOM is the page as a tree of objects that JavaScript can change.
• getElementById finds one element by id; querySelector finds the first match for a CSS selector.
• textContent changes plain text; innerHTML changes HTML — never use it with user input.
• createElement + appendChild adds new elements; remove() takes them away.
• getElementById finds it, textContent changes it, style paints it.

Example explained

• <ul id="list"> — the student list on the page, with two students already in it so the page is not empty.
• let name = document.getElementById("name").value; — reads what the user typed in the name box.
• let li = document.createElement("li"); — makes a brand-new list item that is not on the page yet.
• li.textContent = name; — puts the typed name inside it as plain text (safe — a typed tag stays text).
• document.getElementById("list").appendChild(li); — attaches the new item to the list, so it appears on the page at once.
• document.getElementById("title").style.color = "orange"; — the "Make it orange" button paints the heading orange with one line.