JavaScript getElementsByClassName() Method

Javascript இல் getElementsByClassName() method இங்கு ஒரு class attribute இன் name ஆனது argument ஆக அனுபப்படுகிறது. இங்கு நாம் அனுப்பிய class attribute இன் name ஐ கொண்டுள்ள elements ஐ நமக்கு கொடுக்கிறது.

getElementsByClassName(class_name);

Note: இங்கு getElementsByClassName() method இங்கு class attribute இன் name மட்டும் argument ஆக அனுபப்படுகிறது, அதனை பொருத்து நமக்கு அந்த html elements ஐ return செய்கிறது. இங்கு ஒவ்வொரு html element கும் ஒரே மாதிரியான class name கள் இருக்க முடியும். நாம் கொடுக்கும் class name கொண்ட attribute இல்லை என்றால் null ஐ return செய்கிறது.

Example1


<html>
<head>
    <title>Learn Programming In Tamilwebsite</title>
</head>
<body>
    <h2 class="youtube">Linto.in</h2>
</body>
</html>
<script>
var data = document.getElementsByClassName('youtube');
console.log(data);
</script>

மேலே உள்ள Example1-ஐ கவனிக்கவும் இங்கு html tag கள் கொடுகப்பட்டுள்ளது. இங்கு p என்ற tag இல் class="youtube" என உள்ளது. document.getElementsByClassName() method இங்கு ஒரு class attribute இன் name ஆனது argument ஆக அனுபப்படுகிறது. இங்கு நாம் அனுப்பிய class attribute இன் name ஐ கொண்டுள்ள elements ஐ நமக்கு கொடுக்கிறது. எனவே இங்கு youtube என்ற class attribute argument ஆக அனுபப்படுகிறது எனவே நமக்கு <h2 class="youtube">Linto.in</h2> என்ற tag ஐ output ஆக தருகிறது. console.log ஐ கவனிக்கவும்.

Output: 

<h2 class="youtube">Linto.in</h2>

Example2


<html>
<head>
    <title>Favourite Bird</title>
</head>
<body>
    <h2 class="bird">Peacock</h2>
</body>
</html>
<script>
var data = document.getElementsByClassName('bird');
console.log(data);
</script>

மேலே உள்ள Example2-ஐ கவனிக்கவும் இங்கு html tag கள் கொடுகப்பட்டுள்ளது. இங்கு p என்ற tag இல் class="bird" என உள்ளது. document.getElementsByClassName() method இங்கு ஒரு class attribute இன் name ஆனது argument ஆக அனுபப்படுகிறது. இங்கு நாம் அனுப்பிய class attribute இன் name ஐ கொண்டுள்ள elements ஐ நமக்கு கொடுக்கிறது. எனவே இங்கு bird என்ற class attribute argument ஆக அனுபப்படுகிறது எனவே நமக்கு <h2 class="youtube">Linto.in</h2> என்ற tag ஐ output ஆக தருகிறது. console.log ஐ கவனிக்கவும்.

Output: 

<h2 class="bird">Peacock</h2>

Comments