๐Ÿ“’ BLOG 1: DOM Manipulation โ€“ Make Your Website Alive! ๐ŸŒŸ

๐Ÿ“Œ What is DOM?

DOM stands for Document Object Model.
It represents your HTML page as a tree of objects ๐ŸŒณ
JavaScript can use this tree to change content, style, and structure of your webpage.
This process is called DOM Manipulation ๐Ÿ’ก

๐ŸŽฏ Why DOM Manipulation is Important?

With DOM manipulation, you can:

  • ๐Ÿ“ Change text

  • ๐ŸŽจ Change styles like color and size

  • โž• Add new elements

  • โŒ Remove elements

  • ๐Ÿ–ฑ๏ธ React when users click or type

<h1 id="mainTitle">Hello!</h1>
<button onclick="changeText()">Click Me</button>
function changeText() {
  document.getElementById("mainTitle").innerText = "You clicked the button! ๐ŸŽ‰";
}

๐Ÿง  This will change the heading text when the button is clicked.

๐Ÿ“š Common DOM Methods

MethodUse
getElementById()Select element using ID ๐Ÿ†”
getElementsByClassName()Select multiple elements by class ๐Ÿ“š
querySelector()Select using CSS selector ๐Ÿ”
innerTextChange text only ๐Ÿ“
innerHTMLAdd or change HTML ๐Ÿ“ฆ
styleChange CSS styles ๐ŸŽจ
createElement()Create new element โœจ
appendChild()Add element to page โž•
remove()Remove element โŒ

๐Ÿง  Tips for Beginners

  • Always check if the element exists before changing it ๐Ÿ™ˆ

  • Try using console.log() to see what you are selecting ๐Ÿ–ฅ๏ธ

๐Ÿ–‹๏ธ Written by Himanshu Bhagwat
๐Ÿ“˜ Learning through Devsync

0
Subscribe to my newsletter

Read articles from Himanshu Bhagwat directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Himanshu Bhagwat
Himanshu Bhagwat