Javascript- Document Object Model (DOM) | pgdca hindi notes

Paper 2-Internet &Web design

Unit I
Unit II
Unit III
Unit IV
Unit V

Back
Internet-Unit-3
Next

Document Object Model (DOM)

DOM (Document Object Model) के अनुसार HTML Document के सभी tags (elements) को objects माना जाता है। जो tags किसी अन्य tag के अंदर उपस्थित होते हैं, वे उस tag के child objects कहलाते हैं। Tag के अंदर उपस्थित text भी object माना जाता है।

JavaScript की सहायता से इन सभी objects को access तथा modify किया जा सकता है। HTML DOM Model एक tree structure के रूप में कार्य करता है।

उदाहरण

document.body.style.background = "red";

उपरोक्त उदाहरण में document.body एक object है, जो <body> tag को represent करता है।
यह code webpage का background color लाल (red) कर देता है।

HTML DOM Properties and Methods

HTML DOM Properties

HTML DOM Properties, HTML elements की values होती हैं, जिन्हें JavaScript की सहायता से बदला जा सकता है।

HTML DOM Methods

HTML DOM Methods वे actions होते हैं, जिन्हें HTML elements पर perform किया जाता है, जैसे — Element जोड़ना (Add), Element हटाना (Delete), Element बदलना (Modify) इत्यादि

Example – DOM Method and Property

<!DOCTYPE html>
  <html>
      <body>
          <h2>My First Page</h2>
          <p id="demo"></p>
      <script>
            document.getElementById("demo").innerHTML = "Hello World!";
      </script>
    </body>
</html>

इस उदाहरण में, getElementById() एक method है, जो document में दी गई ID वाले element को return करता है। innerHTML एक property है, जो किसी HTML element के content को access या modify करने के लिए उपयोग की जाती है। यहाँ <p> element जिसकी ID "demo" है, उसका text "Hello World!" में बदल दिया गया है।

Important Points

  • document object पूरे webpage को represent करता है।
  • innerHTML property किसी भी HTML element का content बदल सकती है।
  • JavaScript की सहायता से webpage को बिना reload किए modify किया जा सकता है।
  • DOM webpage को interactive और dynamic बनाता है।

Events (इवेंट्स)

JavaScript में Events वे क्रियाएँ (actions) होती हैं, जो user या browser द्वारा webpage पर की जाती हैं।

उदाहरण:

Mouse click करना, Keyboard key दबाना, Mouse move करना या Page load होना। जब कोई event होता है, तब JavaScript किसी विशेष function को execute कर सकती है। Events की सहायता से webpage को अधिक interactive तथा dynamic बनाया जाता है।

Common HTML Events

EventDescription
onclickजब user किसी HTML element पर click करता है
onmouseoverजब mouse pointer element के ऊपर जाता है
onmouseoutजब mouse pointer element के ऊपर से हटता है
onkeydownजब keyboard की कोई key दबाई जाती है
onfocusजब element focus में आता है
onchangeजब element की value बदलती है
onblurजब element से focus हट जाता है
onloadजब webpage पूरी तरह load हो जाता है
onunloadजब webpage बंद या unload होता है
alert()Alert dialog box प्रदर्शित करता है
prompt()User से input लेने के लिए dialog box प्रदर्शित करता है
confirm()OK और Cancel वाला confirmation box प्रदर्शित करता है

onfocus Event

जब किसी input element पर focus किया जाता है (कर्सर लाया जाता है या क्लिक किया जाता है), तब onfocus event होता है। यह event सामान्यतः <input>, <select> तथा <a> elements के साथ उपयोग किया जाता है।

Example – onfocus Event

<!DOCTYPE html>
  <html>
      <head>
          <title>JavaScript onfocus Event</title>
      </head>
      <body style="text-align:center;">
          <h1>Arun Computer</h1>
          <h2 style="color:red;">Example of JavaScript onfocus Event</h2>
          <p>This example demonstrates the onfocus event.</p>
            Enter your name: <input type="text" id="fname" onfocus="myFunction()">
      <script>
          function myFunction() {
              document.getElementById("fname").style.backgroundColor = "red";
              }
      </script>
    </body>
</html>

onchange Event

onchange event तब होता है जब किसी element की value बदल जाती है। यह event सामान्यतः: Textbox, Radio Button, Checkbox, Select Box, आदि के साथ उपयोग किया जाता है।

Example – onchange Event

<!DOCTYPE html>
  <html>
      <head>
          <title>JavaScript onchange Event</title>
      </head>
      <body style="text-align:center;">
          <h1>Arun Computer</h1>
          <h2 style="color:red;">Example of JavaScript onchange Event</h2>
          <p>This example demonstrates the onchange event.</p>
          Enter your name:
          <input type="text" id="fname" onchange="myFunction()">
          <p>
              When you leave the input field, the entered text will change to uppercase.
          </p>
      <script>
            function myFunction() {
                   var x = document.getElementById("fname");
                   x.value = x.value.toUpperCase();
                  }
    </script>
    </body>
</html>

onblur Event

जब user किसी input field से बाहर क्लिक करता है या focus हट जाता है, तब onblur event होता है। यह onfocus event का विपरीत (opposite) होता है। इसका उपयोग सामान्यतः form validation में किया जाता है।

Example – onblur Event

<!DOCTYPE html>
    <html>
        <head>
              <title>JavaScript onblur Event</title>
        </head>
        <body style="text-align:center;">
              <h1>Arun Computer</h1>
              <h2 style="color:red;">Example of JavaScript onblur Event</h2>
              <p>
                Write something in the input field and then click outside the field.
              </p>
              <input type="text" onblur="myFunction()">
      <script>
              function myFunction() {
               alert("Input field lost focus.");
              }
      </script>
    </body>
</html>

onload Event

जब webpage पूरी तरह load हो जाता है, तब onload event होता है। Page load होने के बाद इस event से संबंधित code execute होता है।

Example – onload Event

<!DOCTYPE html>
  <html>
        <head>
              <title>JavaScript onload Event</title>
        </head>
              <body style="text-align:center;" onload="myFunction()">
                    <h1>Arun Computer</h1>
                    <h2 style="color:red;">Example of JavaScript onload Event</h2>
                    <h3>Hello World!</h3>
              <script>
                  function myFunction() {
                  alert("Page is loaded");
                  }
              </script>
          </body>
  </html>

onunload Event

जब webpage बंद किया जाता है, refresh किया जाता है, या user किसी दूसरे page पर जाता है, तब onunload event होता है। इस event के होने पर उससे संबंधित code execute हो जाता है।

उदाहरण:

  • Browser window बंद करना, किसी link पर click करके दूसरे page पर जाना, Page refresh करना

Important Notes

getElementById() सबसे अधिक उपयोग होने वाला DOM method है।

DOM webpage के सभी HTML elements को objects के रूप में represent करता है।

JavaScript DOM की सहायता से webpage को dynamically बदल सकती है।

Events webpage को interactive बनाते हैं।

innerHTML content बदलने के लिए उपयोग किया जाता है।

Back
Next
error: Content is protected !!