What is JavaScript DOM in hindi?-DOM क्या है?

by

हेल्लो दोस्तों आज के इस पोस्ट में आपको javascript dom in hindi  के बारे में बताया गया है की क्या होता है कैसे काम करता है तो चलिए शुरू करते है।

Document object model(DOM) का परिचय

DOM( document object model) को आपके पुरे document को एक single object के द्वारा ही represent करता है ये object document होता है इस object की मदद से आप पुरे document में कोई भी HMTL element को access कर सकते है

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

DOM एक ऐसी technology है जिसमे javascript आपको किसी html document को control करने की power provide करती है इसे देखने है की DOM के द्वारा JavaScript क्या क्या functions के perform कर सकती है

functions of DOM (document object model)

  1. DOM की मदद से आप सभी html एलेमेंट्स (tags) को access और change कर सकते है
  2. DOM की मदद से सभी html attribute को access और change किये जा सकते है
  3. DOM की मदद से आप सभी css styling को change कर सकते है
  4. DOM की मदद से पुराने एलेमेंट्स (tags) और attribute को remove किये जा सकते है
  5. DOM की मदद से नए tags और attribute को add किये जा सकते है
  6. DOM की मदद से सभी html इवेंट्स को handle किया जा सकता है
  7. DOM की मदद से नए html event को create किये जा सकते है

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

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

इन सभी tags को access करने के लिए आपको पहले उनके parent tags को access करना होता है parent tag को node भी कहते है इन tags को access करने के लिए आप document object का प्रयोग करते है जैसे की form को access करने के लिए आप document.form statement का प्रयोग कर सकते है

यदि आप form में किसी field की वैल्यू को 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 उनमे change कर सकते है

DOM accessible basic html elements (tags)

 

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

  1. anchor
  2. form
  • text-box
  • text-area
  • check-box
  • radio
  • select

option

  • reset
  • button

3.link

functions of (DOM) document object model

function description
getElementByld() ये method एक element को return करता है इस method में id argument की तरह pass की जाती है वो id जिस element की होती है वो element ये method को return कर देता है
getElementsByName() इस method में आप बहुत से name को पास कर सकते है ये names जिस एलेमेंट्स से 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 को पास की जाती है ये method उस string को document में display करता है

example

<html>
<head>
<title>get elements by id demo</title>
</head>
<body>
<h1 id=”heading”>hello dear dost</h1>
<script type=”text/javascript”>
Var tagName=document.getElementById(“heading”);
Document.write(tagName);
</script>
</body>
</html>

उपर दिए गए script में निचे दिया गया web page को generate करती है

 

innerHTML property of DOM

यदि आप किसी html element(tag) के अन्दर का text DOM के द्वारा access करना चाहते है तो इसके लिए आप DOM(document object model) की innerHTML property का प्रयोग कर सकते है इस property के द्वारा आप उस html element का text set भी कर सकते है इसके लिए आप getElementByld method को कॉल करते है

और उसमे element की id को pass करते  है इसके बाद आप method के dot(.) लगाकर innerHTML लिख देते है और उसके बाद आप assignment (=) को लगाकर inverted commas में text लिख देते है जिसका आपको example निचे दिया जा रहा है

 

 

<html>
<head>
<title>innerHTML property demo</title>
</head>
<body>
<h1 id=”heading”></h1>
<script>
Document.getElementByld(“heading”).innerHTML=”hello dear dost”;
</script>
</body>
</html>

उपर दिए गए script में निचे दिया गया web page generate होता है

Hello Dear Dost

reference-https://www.javascripttutorial.net/javascript-dom/

निवेदन-अगर आपको यह आर्टिकल(javascript dom in hindi ) अच्छा लगा हो तो आप इस पोस्ट को अपने दोस्तों के साथ जरुर शेयर(javascript dom in hindi ) करे और आपको जिस टॉपिक(javascript dom in hindi ) पर आपको पढना या नोट्स चाहिए तो हमें जरुर कमेंट करे आपका कमेंट्स हमारे लिए बहु मूल्य है धन्यवाद

Leave a Comment