Contents
Introduction
हेलो दोस्तों आज हम इस post में सीखेंगे की elements के class name से elements को get करने के लिए getElementsByClassName() method का इस्तेमाल कैसे कर सकते है!.
getElementsByClassName() method के बारे में!
getElementByClassName() method specific class name के साथ child elements के objects का array return करता है!. जब बी getElementsByClassName() method को call करते time वह पुरे document में find करता है और document के matching class के child elements को return करता है. getElementsByClassName() method उन element का child elements return करेंगे जो दिए गए class name के साथ match होते होंगे!.
syntax:
getElementsByClassName(names);
paremeters
names जिसमे हमें element का class name define करके element के class name से match होने वाले same elements को get कर सकते है!. और इस method में multiple class names को whitespace से separated किया जा सकता है!.
getElementsByClassName() method के simple example
Elements में जिसका class name “test” है वह सभी element को get करने के लिए
document.getElementsByClassName("test");
जिसे elements के दो class name हो जैसे की “red” and “test” ऐसे elements get करने के लिए
document.getElementsByClassName('red test');
HTML dom में किसी parent element में से specific class name के आधार पर element को get करने के लिए
document.getElementById('main').getElementsByClassName('test');
JavaScript getElementsByClassName() method examples
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>getElementsByClassName Example</title>
</head>
<body>
<div class="main">
<ul id="main_id">
<li class="item" id="text1">Text1</li>
<li class="item" id="text2">Text2</li>
<li class="item" id="text3">Text3</li>
<li class="item" id="text4">Text4</li>
</ul>
</div>
</body>
</html>
Javascript code
<script>
let main = document.getElementById('main_id');
let items = main.getElementsByClassName('item');
let data = [].map.call(items, item => item.textContent);
console.log(data);
</script>
Specific parent element से same class name वाले element को get करने के लिए कुछ इस तरह javascript code को लिख सकते है!. ऊपर के example में देख सकते है की parent element की ID “main_id” same class “item” वाले element को get किया है!.
अगर same class name वाले element को पुरे document में find करना हो तो javascript code कुछ इस तरह लिख सकते है!.
<script>
let items = document.getElementsByClassName('item');
let data = [].map.call(items, item => item.textContent);
console.log(data);
</script>
HTML Javascript code
<!DOCTYPE html>
<html lang="en">
<head>
<title>getElementsByClassName Example</title>
</head>
<body>
<div class="main">
<ul id="main_id">
<li class="item" id="text1">Text1</li>
<li class="item" id="text2">Text2</li>
<li class="item" id="text3">Text3</li>
<li class="item" id="text4">Text4</li>
</ul>
</div>
<script>
let main = document.getElementById('main_id');
let items = main.getElementsByClassName('item');
let data = [].map.call(items, item => item.textContent);
console.log(data);
</script>
</body>
</html>
