If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
जैसा कि आपने पिछले Topic में DOM (Document Object Model ) के बारे में पढ़ा और समझा कि किस - किस तरह से JavaScript के trough हम आसानी से Document को manipulate कर सकते हैं।
इस Topic में आप सीखेंगे कि किस तरह से Document में present HTML Tags (Elements) को select करते हैं या किन - किन अलग तरीकों से Elements को access कर सकते हैं।
अगर आप CSS जानते हैं , तो आपको याद होगा कि , किसी भी HTML Element पर Style Apply करने के लिए उसे select करना होता था। वैसे ही JavaScript में भी DOM Manipulation के लिए elements को उसी तरह select किया जाता है।
Document में HTML Elements को find करने के लिए मुख्य रूप से इस प्रकार करते हैं -
document.getElementById(id) method का use HTML Elements में define की गयी ID के according element को select कर सकते हैं।
इस method के trough element select करने पर single element Object मिलता है , क्योंकि ID किसी भी element पर unique ही होती है, same ID को आप एक से ज्यादा elements पर नहीं लगा सकते हैं अगर document में Element present है तो इसका Object मिलता है, otherwise null .
See Example -
File : DomElembyId.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript DOM Elements</title>
</head>
<body>
<p id="mypara">This is a simple paragraph</p>
<script type="text/javascript">
/* select elemnt and print it on console so that we can undertand well */
let myapar = document.getElementById('mypara');
console.log(mypara);
</script>
</body>
</html>ऊपर दिए गए O/P Image में selected paragraph की सभी properties और methods को देख सकते हैं , और इन्ही methods और properties के through आप पूरे HTML Document को completely modify कर सकते हैं।
मुख्य रूप से innerHtml और innerText ये properties बहुत important हैं DOM manipulation के लिए। इन्हे हम next topic में deeply पढ़ेंगे।
getElementsByClassName(class_name) की help से वो सभी elements select करते हैं , जिन पर pass की गयी class लगी है। क्योंकि same class कई elements पर हो सकती है।
class के according elements select करने पर Elements NodeList मिलती है जो कि Array की तरह ही behave करती है। which means index के according एक particular element को access कर सकते हैं। हाँ ,सभी elements के लिए normal methods और properties लगभग same ही होंगी।
For Example -
File : DomElembyClassName.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript DOM getElementsByClassName</title>
</head>
<body>
<p class="testClass">This is first paragraph</p>
<p class="testClass">This is second paragraph</p>
<div class="testClass">This is third paragraph</div>
<span class="testClass">This is fourth paragraph</span>
<strong class="testClass">This is fifth paragraph</strong>
<script type="text/javascript">
let elements = document.getElementsByClassName('testClass');
/*print it on console and see the difference*/
console.log(elements);
/*
however Nodelist behave like array . means you can access elemnt by index
elements[0] for first element
elements[1] for second element ....and so on
also you can iterate it using for loop , for of loop or each
*/
</script>
</body>
</html>getElementsByTagName() का use HTML tag name के according elements को select करने के लिए use किया जाता। हालाँकि यहाँ भी HTML Document में मौजूद सभी Tags select हो रहे हैं , इसलिए getElementsByClassName() की तरह ही getElementsByTagName() भी Elements की NodeList return होती है।
For Example -
<script type="text/javascript">
/*select all <p> elements in document*/
let p_elements = document.getElementsByTagName('p');
/*select all <div> elements in document*/
let div_elements = document.getElementsByTagName('div');
/*select all anchors <a> elements in document*/
let a_elements = document.getElementsByTagName('a');
/*select all <img> elements in document*/
let img_elements = document.getElementsByTagName('img');
</script>
JavaScript का use करके CSS की तरह भी elements select कर सकते हैं। इसके लिए दो methods हैं -
querySelector document में first matched element return करता है , pass किया जाने वाला selector कुछ भी हो सकता सकता है className , Id , Tag anything . ।
जबकि querySelectorAll document में present सभी matched element की NodeList return करता है।
For Example -
<script type="text/javascript">
/* select first <p> element */
let p_element = document.querySelector('p');
/* select first element with myClass */
let class_element = document.querySelector('myClass');
/*select all <p> elements in document*/
let p_elements = document.querySelectorAll('p');
/*select all elements with myClass*/
let class_elements = document.querySelectorAll('.myClass');
</script>
इनके अलावा भी elements को select करने के तरीके है , आप किसी भी Element console में print कराकर आसानी से सभी functions बारे में जान सकते हैं।
I Hope अब आप समझ गए होंगे कि , DOM Elements को कैसे access करते हैं।