Contents
Introduction
हेलो दोस्तों आज हम इस post में document के getElementsByTagName() method के बारे में जानेगे!. इस method का इस्तेमाल से specific tag element को कैसे access कर सकते है और इस access elements पर कैसे action perfom करा सकते है वह हम इस post में detail से example के साथ समझेंगे!.
Document getElementsByTagName()
Document.getElementsByTagName() में argument के तोर पर दिए गए tag neme को यह method पुरे document में find करता है और document में match होने वाले सभी elements का एक collection हमें return करता है!.
syntax:
getElementsByTagName(name)
parameters
name: argument में pass होने वाला name वह element का name होता है. जैसे की div, p, h1 to h6, section etc..
इस method को example के जरिये detail से समजने की कोसिस करते है!.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> getElementsByTagName() method </title>
</head>
<body>
<header>Header section</header>
<div class="main" style="padding: 15px; border: 1px solid greenyellow;">
<div id="div_1" style="border: 1px solid red; padding: 10px;">
<h2>Heading for Div1</h2>
<p>paragraph for div1</p>
</div>
<div id="div_2" style="border: 1px solid green; padding: 10px;">
<h2>Heading for Div2</h2>
<p>paragraph for div2</p>
<p>paragraph for div2</p>
</div>
<div id="div_3" style="border: 1px solid beige; padding: 10px;">
<h2>Heading for Div3</h2>
<p>paragraph for div3</p>
<p>paragraph for div3</p>
<p>paragraph for div3</p>
</div>
<div id="div_4" style="border: 1px solid gold; padding: 10px;">
<h2>Heading for Div4</h2>
<p>paragraph for div4</p>
<p>paragraph for div4</p>
<p>paragraph for div4</p>
<button>Click</button>
</div>
<div id="div_5" style="border: 1px solid pink; padding: 10px;">
<h2>Heading for Div5</h2>
<p>paragraph for div5</p>
<p>paragraph for div5</p>
<p>paragraph for div5</p>
<button>Click</button>
<button>Reset</button>
</div>
<div id="div_6" style="border: 1px solid hotpink;padding: 10px;">
<h2>Heading for Div6</h2>
<p>paragraph for div6</p>
</div>
</div>
<footer>
<script>
//pure document se p tag (element) ko find karne ke liye
let paragraph = document.getElementsByTagName("p");
//console.log(paragraph);
//Specific parent element se p tag (element) ko find karne ke liye
const div_1 = document.getElementById("div_5");
const head2 = div_1.getElementsByTagName("h2");
const para = div_1.getElementsByTagName("p");
console.log(head2);
console.log(para);
</script>
</footer>
</body>
</html>
ऊपर के exanple में देख सकते है की सबसे पहले document.getElementsbyTagName() method हमें document में present सभी p element का collection return करेगा. document.getElementsByTagName() वह पुरे document में p element को find करेगा. दूसरे में जब हमें specific parents elements के child elements मेसे specific element को कैसे access कर सकते है वह हमें example में देख सकते है!.
अगर हमें specific event पैर elements को find और access करना हो तो इसके लिए हमें document.getElementsbyTagName() को कैसे इस्तेमाल कर सकते है वह example के जरिये समझेंगे!.
<button onclick="getDivElement();">Click</button>
fhakjhjfa
<script>
//call function for get elements
function getDivElement(){
const div_4 = document.getElementById("div_4");
const head4 = div_4.getElementsByTagName("h2");
const para4 = div_1.getElementsByTagName("p");
console.log(head4);
console.log(para4);
}
</script>
on click event में getElementsByTagName() method के जरिये हमें just onclick event पे function call करना होता है और function call होने के बाद जिस elements को access करना चाहते है इसकी ID और tagname से elements collection को access कर सकते है!.
