JavaScript in Hindi – Document Object Model (DOM)

Share on facebook
Share on google
Share on twitter
Share on linkedin
  • Introduction to JavaScript DOM (Document Object Model) in Hindi 
  • DOM Accessible HTML elements in Hindi 
  • Functions of JavaScript DOM(Document Object Model) in Hindi  

Introduction to JavaScript DOM

JavaScript Document Object Model (DOM) आपके पुरे document को एक single object के द्वारा represent करता है। ये object document होता है।

इस object की मदद से आप पूरे document में कोई भी HTML element access कर सकते है।

DOM आपको किसी web page के सभी HTML elements (tags) का control provide करता है।

इसकी मदद से आप कोई भी element remove कर सकते है या नए elements add कर सकते है।

DOM एक ऐसी technology है जिसमे JavaScript आपको किसी HTML document को control करने की power provide करती है।

आइये देखते है की DOM के द्वारा JavaScript क्या क्या functions perform कर सकती है।

Usage of JavaScript DOM

  1. सभी HTML elements (tags) को access और change कर सकते है। 
  2. HTML attributes access और change किये जा सकते है। 
  3. आप सभी CSS styling को change कर सकते है। 
  4. पुराने elements (tags) और attributes remove किये जा सकते है। 
  5. नए tags और attributes add किये जा सकते है। 
  6. सभी HTML events को handle किया जा सकता है। 
  7. HTML events create किये जा सकते है।

एक browser सभी tags को nested list की तरह देखता है। जैसे की निचे दी गयी list में दिया गया है। HTML tag सबसे top पर होगा और बाकि tags उसके nested order में होंगे।

 HTML
——-HEAD
          ———–TITLE
—-BODY
       ————-P
       ————H1
       ————FORM
       ————TABLE

इन सभी tags को access करने के लिए आपको पहले उनके parent tags को access करना होता है। Parent tags को node भी कहते है।

इन tags को access करने के लिए आप document object को यूज़ करते है।

जैसे की form को access करने के लिए आप document.form statement यूज़ कर सकते है।

यदि आप form में किसी field की value access करना चाहते है तो उस field का नाम लिखकर उसके आगे dot operator लगाकर value लिख देंगे।

यदि आप form में किसी field की value access करना चाहते है तो उस field का नाम लिखकर उसके आगे dot operator लगाकर value लिख देंगे।

जैसे की आप किसी text-box की value access करना चाहते है जिसका नाम firstName है तो ऐसा आप इस तरह कर सकते है।

var firstName = document.form.firstName.value;

JavaScript Document Object Model (DOM) का सबसे बड़ा feature ये है की इसकी मदद से आप सभी tags को dynamically access कर सकते है और situation के according उनमें changes कर सकते है।

DOM Accessible Basic HTML Elements (Tags)

निचे कुछ basic HTML elements को बताया जा रहा है जिन्हें आप DOM के द्वारा handle कर सकते है। 

  • Anchor 
  • Form
    • textbox
    • textarea
    • checkbox
    • radio
    • select
      • option 
    • reset
    • button
  • Link

Functions of JavaScript DOM

getElementById(id) 

ये method एक element return करता है। इस मेथड में Id argument की तरह pass की जाती है। वो Id जिस element की होती है वो element ये method return कर देता है।

getElementsByName(name)  

आप बहुत से name पास कर सकते है। ये names जिन elements से match होते है वो elements ये method return करता है। 

getElementsByTagName(tagName) 

एक tag नाम pass किया जाता है। ये method उस tag के नाम वाले सभी tags को return करता है।

getElementsByClassName(className) 

एक class name pass किया जाता है। ये method class name वाले सभी tags return करता है।

write(string)  

एक string pass की जाती है। ये method उस string को document में display करता है। 

Example1: Show tag name using Dom

<html>

<head>  
<title>Get Element By Id Demo </title> 
</head> 

<body> 
<h1 id="heading">Hello friends</h1> 
 
<script type="text/javascript">
// Accessing tag data using DOM function 
var tagName = document.getElementById("heading"); 
document.write(tagName); 
</script> 
 
</body> 
</html> 

output

javascript-DOM-example-output

innerHTML property of JavaScript DOM

यदि आप किसी HTML element (tag) के अंदर का text DOM के द्वारा access करना चाहते है तो इसके लिए आप DOM (Document Object Model) की innerHTML property को यूज़ कर सकते है।

इस property के द्वारा आप उस HTML element का text set भी कर सकते है।

इसके लिए आप getElementById method call करते है और उसमे element की Id pass करते है। इसके बाद आप method के dot (.) लगाकर innerHTML लिख देते है।

और उसके बाद assignment (=) लगाकर inverted commas में text लिख देते है।

Example2: changing tag content

<html>

<head>
<title>innerHTML property Demo</title>
</head>

<body>

<h1 id="heading"></h1>

<script>
// Setting content using DOM innerHTML propertydocument.getElementById("heading").innerHTML= "Hello Friends";</script>

</body>
</html> 

Output

javascript-innerHTML-property-example-output

Previous: JavaScript Screen Object
Next: JavaScript Regular Expressions