HTML DOM Anchor कलेक्शन का उपयोग हमारे HTML दस्तावेज़ में मौजूद सभी एंकर टैग(<a>) के कलेक्शन को लौटाने के लिए किया जाता है। यह केवल उन्हीं लिंक्स को गिनेगा जिनसे name एट्रिब्यूट जुड़ा हो। name एट्रिब्यूट हालांकि वर्तमान HTML5 में अप्रचलित है। एलिमेंट्स उसी क्रम में दिखाई देते हैं जैसे वे html सोर्स दस्तावेज़ में मौजूद होते हैं।
प्रॉपर्टीज
Anchor कलेक्शन की निम्नलिखित प्रॉपर्टीज हैं।
| प्रॉपर्टी |
विवरण |
|---|---|
| length |
यह हमारे html दस्तावेज़ में लिंक्स(<a>) की संख्या लौटाएगा। |
मेथड्स
Anchor कलेक्शन के निम्नलिखित मेथड्स हैं।
| मेथड |
विवरण |
|---|---|
| [Index] |
यह निर्दिष्ट इंडेक्स पर लिंक लौटाएगा। इंडेक्स 0 से शुरू होता है और ऊपर से नीचे के क्रम में। यदि कोई आइटम नहीं मिला तो null लौटाया जाएगा। |
| item(index) |
यह निर्दिष्ट इंडेक्स पर लिंक लौटाएगा। इंडेक्स 0 से शुरू होता है। यदि कोई आइटम नहीं मिला तो null लौटाया जाएगा। |
| namedItem(id): |
यह निर्दिष्ट id वाले कलेक्शन से लिंक लौटाएगा। यदि कोई आइटम नहीं मिला तो null लौटाया जाएगा। |
सिंटैक्स
निम्नलिखित सिंटैक्स है -
एंकर कलेक्शन प्राप्त करने के लिए।
document.anchors
नोट - Anchor कलेक्शन को सेट नहीं किया जा सकता क्योंकि वे रीड-ओनली हैं।
उदाहरण
आइए anchor कलेक्शन का एक उदाहरण देखें -
<!DOCTYPE html> <html> <body> <a name="example">Sample1</a><br> <a name="example1">Sample2</a><br> <a name="example2">Sample3</a><br> <p>Click the button to get first link text in the above list</p> <button onclick="getCollection()">Collection</button> <button onclick="getLength()">Length</button> <p id="sample"></p> <script> function getCollection() { var x = document.anchors[0].innerHTML; document.getElementById("sample").innerHTML = x; } function getLength() { var x = document.anchors[0].innerHTML.length; document.getElementById("sample").innerHTML = x; } </script> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा -
“Collection” बटन पर क्लिक करने पर -
“Length” बटन पर क्लिक करने पर -
उपरोक्त उदाहरण में -
हमारे पास name एट्रिब्यूट के साथ तीन लिंक्स हैं जो क्रमशः example, example1 और example2 के बराबर हैं
<a name="example">Sample1</a><br> <a name="example1">Sample2</a><br> <a name="example2">Sample3</a> <br>
फिर हमारे पास collection और length नाम के दो बटन हैं जो क्रमशः getCollection() और getLength() फ़ंक्शन को निष्पादित करते हैं।
<button onclick="getCollection()">Collection</button> <button onclick="getLength()">Length</button>
getCollection() फ़ंक्शन 0 इंडेक्स पोजीशन पर एंकर टैग टेक्स्ट लौटाता है जो हमारे मामले में Sample1 है। getLength() फ़ंक्शन लिंक टेक्स्ट की लंबाई लौटाता है। यहां लिंक टेक्स्ट Sample1 है इसलिए लौटाई गई लंबाई 7 है।
