Document Object Model in Hindi Part 20

Document Object Model in Hindi Part 20

JavaScript in Hindi : DOM (Document Object Model)

JavaScript DOM (Document Object Model)

Introduction to JavaScript DOM (Document Object Model) in Hindi
DOM Accessible HTML elements in Hindi
Functions of JavaScript DOM(Document Object Model) in Hindi
Accessing elements using JavaScript DOM(Document Object Model) In Hindi

Introduction to DOM (Document Object Model)

DOM (Document Object Model) आपके पुरे document को एक single object के द्वारा represent करता है। ये object document होता है। इस object की मदद से आप पूरे document में कोई भी element access कर सकते है। DOM आपको किसी webpage के सभी elements (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)

DOM की मदद से आप सभी HTML elements (tags) को access और change कर सकते है।
DOM की मदद से सभी HTML attributes access और change किये जा सकते है।
DOM की मदद से आप सभी CSS styling को change कर सकते है।
DOM की मदद से पुराने elements (tags) और attributes remove किये जा सकते है।
DOM की मदद से नए tags और attributes add किये जा सकते है।
DOM की मदद से सभी HTML events को handle किया जा सकता है।
DOM की मदद से नए HTML events create किये जा सकते है।

एक browser सभी tags को nested list की तरह देखता है। जैसे की निचे दी गयी list में दिया गया है। 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)

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>

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

document.write(tagName);

</script>

</body>

</html>

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

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