DOM
पुनः प्राप्त करने वाले तत्व

आईडी द्वारा

document.getElementById('uniqueID')

पुनः प्राप्त करेंगे

<div id="uniqueID"></div>

जब तक दिए गए आईडी वाला एक तत्व मौजूद है, तब तक document.getElementById केवल उसी तत्व को वापस करेगा। अन्यथा, यह null हो जाएगा।

नोट: आईडी अद्वितीय होनी चाहिए। एकाधिक तत्वों में समान ID नहीं हो सकती है।

वर्ग के नाम से

document.getElementsByClassName('class-name')

पुनः प्राप्त करेंगे

<a class="class-name">Any</a>
<b class="class-name">tag</b>
<div class="class-name an-extra-class">with that class.</div>

यदि किसी मौजूदा तत्व में दिए गए वर्ग नहीं हैं, तो एक खाली संग्रह लौटा दिया जाएगा।

उदाहरण:

<p class="my-class">I will be matched</p>
<p class="my-class another-class">So will I</p>
<p class="something-else">I won't</p>

var myClassElements = document.getElementByClassName('my-class');
console.log(myClassElements.length); // 2
var nonExistentClassElements = document.getElementByClassName('nope');
console.log(nonExistentClassElements.length); // 0

टैग नाम से

document.getElementsByTagName('b')

पुनः प्राप्त करेंगे

<b>All</b>
<b>of</b>
<b>the b elements.</b>

यदि दिए गए टैग नाम के साथ कोई तत्व मौजूद नहीं है, तो एक खाली संग्रह लौटा दिया जाएगा।

CSS चयनकर्ता द्वारा

Html कोड का पालन करने पर विचार करें

<ul>
  <li id=“one” class=“main”>Item 1</li>
  <li id=“two” class=“main”>Item 2</li>
  <li id=“three” class=“main”>Item 3</li>
  <li id=“four”>Item 4</li>
</ul>

HTML कोड के आधार पर डोम ट्री का निर्माण किया जाएगा

                      ul
    
                      |
    
     |          |         |         |
    
    li         li        li        li
     |          |         |         |
Item 1        Item 2    Item 3    Item 4

हम सीएसएस चयनकर्ताओं की मदद से डोम ट्री से तत्वों का चयन कर सकते हैं। यह दो जावास्क्रिप्ट विधियों अर्थात querySelector() और querySelectorAll() माध्यम से संभव है।

querySelector () विधि पहले तत्व है जो DOM से दिए गए css चयनकर्ता से मेल खाती है।

document.querySelector('li.main')

पहला li एलिमेंट देता है जिसकी क्लास main

document.querySelector('#two')

आईडी two साथ तत्व देता है

नोट: यदि कोई तत्व नहीं मिला है तो null वापस आ गया है। यदि चयनकर्ता स्ट्रिंग में CSS छद्म तत्व है, तो रिटर्न null होगा।

querySelectorAll () विधि उन सभी तत्वों को वापस करती है जो DOM से दिए गए css चयनकर्ता से मेल खाते हैं।

document.querySelectorAll('li.main')

एक नोड सूची देता है जिसमें सभी li तत्व होते हैं जिनकी कक्षा main ।

नोट : यदि कोई तत्व नहीं मिला है तो एक खाली नोड सूची दी गई है। यदि चयनकर्ता स्ट्रिंग में CSS pseudo-element शामिल है, तो दिया गया एलिमेंटलिस्ट खाली होगा

चयनकर्ताओं का चयन

आधुनिक ब्राउज़रों [1] में , दस्तावेज़ में तत्वों के लिए क्वेरी करने के लिए सीएसएस-जैसे चयनकर्ता का उपयोग करना संभव है - उसी तरह जैसे कि sizzle.js (jQuery द्वारा उपयोग किया जाता है)।

querySelector

क्वेरी से मेल खाने वाले दस्तावेज़ में पहला Element लौटाता है। यदि कोई मेल नहीं है, तो null ।

// gets the element whose id="some-id"
var el1 = document.querySelector('#some-id');
 
// gets the first element in the document containing "class-name" in attribute class
var el2 = document.querySelector('.class-name');
 
// gets the first anchor element in the document
var el2 = document.querySelector('a');
 
// gets the first anchor element inside a section element in the document
var el2 = document.querySelector('section a');

querySelectorAll

क्वेरी से मेल खाते दस्तावेज़ में सभी तत्वों से युक्त एक NodeList लौटाता है। यदि कोई भी मैच नहीं करता है, तो एक खाली NodeList लौटाता है।

// gets all elements in the document containing "class-name" in attribute class
var el2 = document.querySelectorAll('.class-name');
 
// gets all anchor elements in the document
var el2 = document.querySelectorAll('a');

// gets all anchor elements inside any section element in the document
var el2 = document.querySelectorAll('section a');