Blog

DOM (Document Object Model) Manipulation Kya Hota Hai – What is DOM (Document Object Model)

DOM (Document Object Model) Kya Hota Hai ?

DOM, yaani Document Object Model, ek tarah ka interface hai jo web browsers mein HTML ya XML documents ko manipulate karne ke liye use hota hai. Ye ek programming interface provide karta hai jisse aap web page ke structure, style, aur content ko dynamically modify kar sakte hain. DOM ko samajhna important hai agar aap JavaScript ya kisi aur client-side programming language ka use karte hain.

DOM ek tree structure ki tarah kaam karta hai, jisme HTML document ko nodes mein break kiya jata hai. Har node ek part of document ko represent karta hai. Jaise ki:

  • Document node – Ye puri document ko represent karta hai.
  • Element nodes – Ye HTML tags jaise <html>, <body>, <div>, <h1>, etc. ko represent karte hain.
  • Text nodes – Ye element ke andar jo content hota hai, usse represent karte hain, jaise paragraph ke text.
  • Attribute nodes – Ye elements ke attributes ko represent karte hain, jaise <div class=”example”> mein class=”example”.

DOM Ki Structure:

DOM ko samajhne ke liye, socho ek HTML page hai:



Welcome to the DOM!


 


This is a paragraph.


 




To iska DOM tree kuch is tarah dikhega:


    

  • 

    Document
    

      

    • 

      html
      

        

      • 

        head
        

          

        • 

          title
          

          • 

        

        • 

      • 

        body
        

          

        • 

          h1
          

          • 

        • 

          p
          

          • 

        • 

          div (id=”container”)
          

            

          • 

            ul
            

              

            • 

              li
              

              • 

            • 

              li
              

              • 

            

            • 

          

          • 

        

        • 

      

      • 

    

    • 



DOM Ki Importance:


    

  • Dynamic Content Manipulation: DOM ka main benefit ye hai ki aap JavaScript ka use karke content ko dynamically change kar sakte ho bina page ko reload kiye. For example, agar aapko kisi button click par koi content change karna ho, to DOM ko use kar ke aap easily kar sakte ho.
    • 

  • Interactivity: DOM ka use karke aap interactivity add kar sakte ho, jaise ki forms ko submit karna, images ko change karna, aur even animation bhi create kar sakte ho.
    • 

  • Cross-Browser Compatibility: DOM ko standardize kiya gaya hai, jisse ki JavaScript ko har browser mein ek hi tareeke se kaam karne ki facility milti hai, chahe wo Chrome ho, Firefox ho, ya Internet Explorer ho.
    • 



DOM Kaise Kaam Karta Hai:


DOM ko samajhne ka ek simple tareeka hai. Jab aap HTML page ko open karte ho, browser us page ko ek DOM tree mein convert kar leta hai. Jaise hi browser page load karta hai, ye tree structure ready ho jata hai. Iske baad, aap JavaScript ka use karke DOM tree ke nodes ko modify kar sakte ho.


DOM Manipulation in JavaScript:


DOM ko manipulate karne ke liye JavaScript mein kuch common methods aur properties hain:


    

  • 

      

    • getElementById: Is method ka use specific element ko select karne ke liye hota hai.
      • 

    

    • 



var element = document.getElementById("myElement");


    

  • 

      

    • getElementsByClassName: Isse aap kisi class ke sabhi elements ko select kar sakte ho.
      • 

    

    • 



var elements = document.getElementsByClassName("myClass");


    

  • 

      

    • getElementsByTagName: Isse aap kisi specific tag ke elements ko select kar sakte ho.
      • 

    

    • 



var paragraphs = document.getElementsByTagName("p");


    

  • 

      

    • querySelector: Ye ek flexible method hai jo CSS selectors ke jaisa kaam karta hai.
      • 

    

    • 



var firstDiv = document.querySelector("div");


    

  • 

      

    • querySelectorAll: Ye method multiple elements ko select karne ka kaam karta hai.
      • 

    

    • 



var allDivs = document.querySelectorAll("div");


    

  • 

      

    • innerHTML: Ye property kisi element ke andar ka content read ya update karne ke liye use hoti hai.
      • 

    

    • 



document.getElementById("myElement").innerHTML = "New Content!";


    

  • 

      

    • style: Ye property kisi element ke CSS styles ko directly change karne ke liye use hoti hai.
      • 

    

    • 



document.getElementById("myElement").style.color = "red";


DOM Events:


DOM ka ek important part hai events, jo ki user interactions ko handle karte hain. Jaise ki:


    

  • click: Jab user kisi element ko click karta hai.
    • 

  • mouseover: Jab user mouse cursor ko kisi element ke upar le jaata hai.
    • 

  • keydown: Jab user keyboard key ko press karta hai.
    • 



Example:


document.getElementById("myButton").addEventListener("click", function() {
  alert("Button clicked!");
});



DOM Tree:


Aapko DOM tree ko samajhna hoga taaki aap efficiently HTML document ko manipulate kar sakein. Jab aap kisi element ko select karte ho, to aap uske parent node, child nodes, ya sibling nodes ke through bhi navigate kar sakte ho.


Parent, Child, aur Sibling Nodes:


DOM tree mein ek parent-child relationship hota hai. Jab aap kisi element ko select karte ho, to uske surrounding elements ke saath interact karna bohot aasan ho jata hai. Ye parent, child aur sibling nodes ko samajhna bohot zaroori hai:


    

  • Parent Node: Har node ka ek parent node hota hai, jo us node se ek level upar hota hai. Example: Agar aap h1 tag ko select karte hain, to uska parent node <body> hoga.
    • 

  • Child Node: Har element ka apna ek ya zyada child nodes hote hain, jo uske andar present hote hain. Example: Agar aap ul tag ko select karte hain, to uske child nodes <li> tags honge.
    • 

  • Sibling Nodes: Nodes jo same level par hote hain unko sibling nodes kaha jata hai. Example: Agar aap p tag ko select karte hain, to uska next sibling node div tag ho sakta hai.
    • 



DOM Tree Mein Navigation:


Jab aap DOM ke kisi node ko access karte hain, to aap uske parent, child, aur sibling nodes ko bhi navigate kar sakte hain. JavaScript ka use karke ye tasks bohot easily kiye ja sakte hain.


    

  • 

      

    • Parent Node Access: Agar aapko kisi element ka parent node chahiye to aap parentNode property ka use kar sakte hain.
      • 

    

    • 



var h1 = document.querySelector("h1");
var parent = h1.parentNode; // Ye h1 ke parent node ko return karega.


    

  • 

      

    • Child Node Access: Agar aapko kisi element ke child nodes chahiye to aap childNodes property ka use kar sakte hain.
      • 

    

    • 



var div = document.querySelector("div");
var children = div.childNodes; // Ye div ke sabhi child nodes ko return karega.


    

  • 

      

    • Next Sibling Node Access: Agar aapko kisi element ka next sibling node chahiye to aap nextSibling property ka use kar sakte hain.
      • 

    

    • 



var p = document.querySelector("p");
var nextSibling = p.nextSibling; // Ye p ke next sibling ko return karega.


    

  • 

      

    • Previous Sibling Node Access: Agar aapko kisi element ka previous sibling node chahiye to aap previousSibling property ka use kar sakte hain.
      • 

    

    • 



var p = document.querySelector("p");
var prevSibling = p.previousSibling; // Ye p ke previous sibling ko return karega






1. Changing Content (HTML content ko change karna)


HTML content ka matlab hai jo text, images, or other content elements hote hain jo user ko webpage par dikhaayi dete hain. Hum JavaScript ki madad se is content ko dynamically change kar sakte hain.


Methods to Change Content:


JavaScript ka use karke hum kisi bhi HTML element ka content change kar sakte hain. Yeh do popular methods ke through hota hai:


innerHTML: innerHTML se hum kisi element ka content, jo bhi HTML code us element ke andar likha hota hai, change kar sakte hain. Iska use tab hota hai jab aap kisi element ke andar ka pure content ko replace karna chaahte hain.


Example:


<p id="demo">Old Content</p>
<script>
document.getElementById("demo").innerHTML = "New Content";
</script>



Is code mein, jab JavaScript run hota hai, toh <p> tag ka content jo “Old Content” tha, woh “New Content” se replace ho jaata hai.


textContent: textContent ka use sirf text content ko change karne ke liye hota hai, bina kisi HTML tags ko affect kiye. Agar aap sirf text content ko modify karna chahte hain, toh yeh method kaafi useful hoti hai.


Example:


<p id="demo">Old Text</p>
<script>
document.getElementById("demo").textContent = "Updated Text";
</script>



Yahan, “Old Text” ko “Updated Text” se replace kiya gaya hai, lekin koi bhi HTML tags nahi badle.


2. Changing Attributes (HTML element ke attributes ko change karna):


HTML elements ke kuch attributes hote hain jo unke behavior ko define karte hain, jaise href (link ka address), src (image ka source), style (CSS properties), etc. JavaScript se in attributes ko bhi dynamically change kiya jaa sakta hai.


Methods to Change Attributes:


setAttribute(): setAttribute() method ka use kisi bhi HTML element ke attribute ko modify karne ke liye hota hai. Yeh method aapko element ke attribute ka naam aur uska naya value pass karne ki suvidha deta hai.


Example:


<a id="link" href="https://www.oldurl.com">Go to old URL</a>
<script>
document.getElementById("link").setAttribute("href", "https://www.newurl.com");
</script>



Is example mein, <a> tag ka href attribute jo pehle “https://www.oldurl.com” tha, ab “https://www.newurl.com” ho jaayega.


getAttribute(): Agar aapko kisi element ke attribute ka value retrieve karna ho, toh getAttribute() method use karte hain. Yeh method aapko specified element ka attribute ka current value return karega.


Example:


<a id="link" href="https://www.example.com">Go to Example</a>
<script>
var link = document.getElementById("link");
var hrefValue = link.getAttribute("href");
console.log(hrefValue); // Outputs: https://www.example.com
</script>



Yahan, getAttribute() method se humne href attribute ka value access kiya hai aur console pe print kiya.


Direct Property Access: Aap directly bhi kisi element ke attributes ko modify kar sakte hain. Jaise href, src, id, etc. ko directly access karke change kiya jaa sakta hai.


Example:


<img id="image" src="image1.jpg" alt="First Image">
<script>
document.getElementById("image").src = "image2.jpg";
</script>



Is case mein, image ka src attribute direct modify kiya gaya hai.


DOM tree ek fundamental concept hai web development mein, jo HTML document ke structure ko samajhne aur manipulate karne mein madad karta hai. Jab aap JavaScript ya kisi aur client-side scripting language ka use karte hain, to DOM tree ko samajhna aapko dynamically content ko modify karne ki flexibility deta hai. Ye hierarchical structure aapko web page ke elements ko efficiently access aur manipulate karne ki ability deta hai.


Quiz: Test Your Knowledge on DOM Manipulation


Bonus: Practical Application!


Aaj hi apne webpage par DOM Manipulation ka istemal karke dekhein!


DOM Manipulation ko sahi tareeke se samajhne ke liye different methods jaise getElementById, querySelector, createElement, appendChild, removeChild, aur innerHTML ka upayog karein aur apne webpage ke content ko dynamically update karein.









	







	
	
		

		
Leave a Reply