Introduction
हेलो दोस्तों आज हम इस post में DOM(document object model) के बारेमे जानेगे।. तो आप लोगो ने DOM के बारेमे सुना होगा तो इस post में हम DOM क्या है? और javascript का इस्तेमाल करके HTML document में element को कैसे insert कर सकते है और inline css style को change कैसे कर सकते है वह हम इस post में detail के साथ देखेंगे।.
What is the DOM in hindi? DOM क्या है?
DOM का मतलब Document object model है।. और यह एक programming interface है जो हमें document में new element को create करने, और delete करने की अनुमति देता है।. यहाँ Document यानि HTML , xml जैसी कोई बी file हो सकती है।. लेकिन हम DOM में HTML document file की बात करेंगे और DOM में object यानि HTML document file में लिखे जाने वाले सभी HTML elements objects है।. जैसे की <html>,<head>,<body>,<p>,<h1> ये सभी objects है। और model यानि HTML Document file में elements को एक structure में manage करने को हम model कह सकते है।. DOM HTML Document को nodes of tree के रूप में देखता है।.
DOM structure बेहतर से समजने के लिए HTML code को देख सकते है।.
Example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DOM structure</title> </head> <body> <div class="dom"> <h1>DOM structure</h1> <p>This is DOM structure here!</p> </div> </body> </html>
ऊपर के HTML document file में देख सकते है।. हमारे document को root node कहा जाता है और उसमे एक child node होता है वह <html> element है।. और <html> element ke दो child element है।. <head>, <body> elements और <body> element का बी एक parent element है और उसके दो child element है।. <body> element का <div class=”dom”> parent element है और <h1> और <p> <div> element के child element है।.
हम Javascript के मदद से elements को access कर सकते है और उनमे change भी कर सकते है।.
Document में elements को कैसे select कर सकते है?
HTML document में elements को select, change करने के लिए कई method available है जैसे की
- querySelector()
- querySelectorAll()
- getElementById()
querySelector()
HTML में querySelector() method का इस्तेमाल document में specified selectors से matches होने वाले first element को return करने के लिए किया जाता है!.
syntax:
element.querySelector(selectors)
querySelector() method केवल first element return करती है जो specified selectors से matches होती है।.
Selector एक required parameter है इन selector का उपयोग HTML elements को उनकी ID, classes, type, elements name के आधार पर चुनने के लिए किया जाता है।.
Example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DOM structure</title> </head> <body> <div class="dom"> <h1>The queryselector example</h1> <div class="change" style="padding:10px;"> <h4>The queryselector</h4> <p>The using query selector method</p> </div> <script> document.querySelector("div.change").style.backgroundColor='red'; </script> </div> </body> </html>
javascript
<script> document.querySelector("div.change").style.backgroundColor='red'; </script>
querySelectorAll()
HTML में querySelectorAll() method का इस्तेमाल किसी element के child elements के collection को return करने के लिए किया जाता है।. जो specified selector से मेल खाते है।.
syntax:
element.querySelectorAll(selectors)
Example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DOM structure</title> </head> <body> <style> .lan_list li{ padding: 10px; } </style> <div class="dom"> <h1>The Technologies</h1> <ul class="lan_list"> <li>php</li> <li>javascript</li> <li>css</li> <li>jquery</li> <li>Wordpress</li> </ul> <script> var letters = '0123456789ABCDEF'; var color = '#'; const lans = document.querySelectorAll(".lan_list li"); var i; console.log( lans.length ); for(i=0; lans.length; i++){ var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16); lans[i].style.backgroundColor = randomColor; lans[i].style.color = 'white'; } </script> </div> </body> </html>
javascript
<script> var letters = '0123456789ABCDEF'; var color = '#'; const lans = document.querySelectorAll(".lan_list li"); var i; console.log( lans.length ); for(i=0; lans.length; i++){ var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16); lans[i].style.backgroundColor = randomColor; lans[i].style.color = 'white'; } </script>
getElementById()
Javascript में getElementById() method उन element के return करता है।. जिस element की ID के function में parameters के तोर पर pass किया जाता हो. getElementById() method किसी specified element के value के change करने या किसी specified element के select करने के लिए web designing में खास तोर पर इस्तेमाल किया जाता है।.
syntax:
document.getElementById(elementID)
parameter: यह method एक single parameter element_ID के accepts करता है।. जिसका उपयोग element की ID attribute के रखने के लिए किया जाता है।.
Example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DOM structure</title> </head> <body> <div class="dom"> <h1>The queryselector example</h1> <div class="change"> <h4>The queryselector</h4> <p>The using query selector method</p> <div id="change"></div> </div> <script> document.getElementById("change").innerHTML='<h1>Get Elementbyid testing</h1>'; </script> </div> </body> </html>
javascript
<script> document.getElementById("change").innerHTML='<h1>Get Elementbyid testing</h1>'; </script>