Document Object Model in Javascript Hindi Tutorial

by

जब कोई वेबपेज browser में load होता है तब browser उस पेज का एक tree structure तय्यार करता है, जिसे DOM(Document Object Model) कहा जाता है |

Table of Contents hide
1 Javascript DOM in Hindi
2 DOM का क्या काम होता है ?
3 Node क्या है?
4 DOM Tree Structure का उदाहरण
5 अन्य javascript tutorials के सुझाव

Javascript DOM in Hindi

DOM जिसका fullform है Document Object Model और ये तीन चीजों का समारोह है वो है document, object और model |

  1. Document – webpage या html page को document कहा जाता है |
  2. Object – webpage में जितने भी elements, attributes होतें हैं उन सबको object कहा जाता है |
  3. Model – सारे elements को मिला कर जो tree structure बनता है उसे model कहा जाता है |

DOM का क्या काम होता है ?

DOM, W3C का एक standard है जिसके जरिये webpage और उसके सारे elements को समझा जा सकता है | और उसमे जरुरी बदलाव लाया जा सकता |

DOM के जरिये javascript methods का सही उपयोग करके html elements में add, delete, update, manage आदि काम बहोत आसानी से किया जा सकता है |

Javascript DOM Uses

  • DOM के जरिये javascript, html webpage के हर एक elements को समझ पाता है | elements, उसकी सारी attributes और एक elements दुसरे element से कैसे relate है वो DOM tree के जरिये javascript समझ पाता है |
  • DOM के जरिये html elements के साथ CRUD(Create, Read, Update, Delete) operation किया जा सकता है |
  • DOM के जरिये किसी element की css में बदलाव लाइ जा सकती है |
  • HTML events में बदलाव लाना या नया event लगाने में भी DOM उपयोग होता है |

Node क्या है?

W3C Standard के हिसाब से एक webpage के DOM structure में सारी चीजों को node कहा जाता है |

पूरा html page यानी पूरा document को एक document node कहलायेगा | document के सारे elements, सब element nodes कहलायेंगे | और जितने भी attributes होंगे वो attribute nodes कहलायेंगे | वैसे ही सारे comments को comment nodes कहा जाएगा |

ये सारे nodes मिल कर एक tree structure बनातें हैं और ये सब nodes एक दुसरे से जुड़े हुए होतें हैं | यानि सभी nodes एक दुसरे से connected होतें हैं |

तो चलिए एक DOM tree structure से DOM(document object model) और nodes को समझतें हैं |

DOM Tree Structure का उदाहरण

DOM Tree Structure Example

जैसा की हमने पढ़ा DOM में हर webpage को document कहा जाता है | और browser में load होते ही उसका एक DOM tree तय्यार होता है |

उस tree में पहली element को root element कही जाती है और <html> tag root element को represent करता है |

<html> tag की <head> और<body> tags दो child elements हैं | उसी तरह <head> tags के अंदर आने वाले सारे elements, <head> tag की child elements कहलायेंगे और एक दुसरे के siblings कहलायेगें | और <head> उनका parent कहलायेगा |

उसी तरह <body> tag के अंदर के सारे elements <body> tag के child elements कहलायेंगे | और ये child tags एक दुसरे के siblings कहलायेंगे |

DOM tree structure में सारे elements एक दुसरे से connected होतें हैं | ये एक दुसरे से parent-child या फिर siblings के relation से जुड़े होतें हैं |

इसीलिए DOM structure समझ कर उसकी कोई भी element को access की जा सकती है | या फिर उसमे नए बदलाव लाए जा सकती है |

अन्य javascript tutorials के सुझाव