Artikel Terbaru

DOM


Introduction to DOM (Document Object Model) 
DOM (Document Object Model) आपके पुरे document को एक single object के द्वारा represent करता है। ये object document होता है। इस object की मदद से आप पूरे document में कोई भी HTML element access कर सकते है।



DOM आपको किसी web page के सभी HTML elements (tags) का control provide करता है। DOM की मदद से आप कोई भी element remove कर सकते है या नए elements add कर सकते है।




Functions of DOM (Document Object Model)

  1. DOM की मदद से आप सभी HTML elements (tags) को access और change कर सकते है। 
  2. DOM की मदद से सभी HTML attributes access और change किये जा सकते है। 
  3. DOM की मदद से आप सभी CSS styling को change कर सकते है। 
  4. DOM की मदद से पुराने elements (tags) और attributes remove किये जा सकते है। 
  5. DOM की मदद से नए tags और attributes add किये जा सकते है। 
  6. DOM की मदद से सभी HTML events को handle किया जा सकता है। 
  7. DOM की मदद से नए 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 लिख देंगे।



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



var firstName = document.form.firstName.value;  
              

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



DOM Accessible Basic HTML Elements (Tags)

निचे कुछ basic HTML elements को बताया जा रहा है जिन्हें आप DOM के द्वारा handle कर सकते है। 
  • Anchor 
  • Form
    • text-box
    • text-area
    • check box
    • radio
    • select
      • option 
    • reset
    • button
  • Link


Functions of (DOM) Document Object Model

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



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


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


 
getElementsByClassName() 
इस method में एक class name pass किया जाता है। ये method class name वाले सभी tags return करता है।


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


 

Example 

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

<body>
<h1 id="heading">Hello friends</h1>

<script type="text/javascript">

var tagName = document.getElementById("heading");
document.write(tagName);

</script>

</body>

</html> 
 




ऊपर दी गयी script निचे दिया गया webpage generate करती है।



javascript-DOM-example-output


innerHTML property of DOM (Document Object Model)

यदि आप  किसी 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 लिख देते है। इसका उदाहरण नीचे दिया जा रहा है।



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

<body>

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

<script>

document.getElementById("heading").innerHTML= "Hello Friends";

</script>

</body>

</html> 

ऊपर दी गयी script निचे दिया गया webpage generate करती है। 

javascript-innerHTML-property-example-output

Post a Comment

0 Comments