JavaScript querySelectorAll() Method

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

document.querySelectorAll(name);

Note: இங்கு querySelectorAll() method இங்கு tag name அல்லது class name அல்லது id ஆகியனவற்றை argument ஆக அனுபப்படுகிறது. அதனை பொருத்து நமக்கு அந்த html element ஐ return செய்கிறது. இங்கு class name ஆனது .class_name என அமையும் மற்றும் id name ஆனது .id_name என அமையும். இங்கு multiple element கள் match ஆக அமைந்தால் நமக்கு அனைத்து elements களையும் return செய்கிறது.

Example1


<!DOCTYPE html>
<html lang="en">
<head>
	<title>querySelectorAll() Demo</title>
</head>
<body>
    <div class="name">Liam</div>
    <div class="name">Noah</div>
    <div class="name">William</div>
    <div class="name">James</div>
    <div class="name">Benjamin</div>
    <div class="name">Elijah</div>
	<script>
		let element = document.querySelectorAll('.name');
		console.log(element);
	</script>
</body>
</html>

மேலே உள்ள Example1-ஐ கவனிக்கவும் இங்கு html tag கள் கொடுகப்பட்டுள்ளது.இங்கு document.querySelectorAll() method இங்கு ஒரு class name ஆனது argument ஆக அனுபப்படுகிறது. இங்கு நாம் அனுப்பிய class name ஐ கொண்டுள்ள elements ஐ நமக்கு கொடுக்கிறது. இங்கு class name ஆனது ஆறு div க்கு உள்ளது எனவே querySelectorAll() method ஆனது அனைத்து elements களையும் நமக்கு console இல் output ஆக கொடுக்கிறது.console.log ஐ கவனிக்கவும்.

Output: 

    <div class="name">Liam</div>
    <div class="name">Noah</div>
    <div class="name">William</div>
    <div class="name">James</div>
    <div class="name">Benjamin</div>
    <div class="name">Elijah</div>

Example2


<!DOCTYPE html>
<html lang="en">
<head>
	<title>querySelectorAll() Demo</title>
</head>
<body>
    <p>Lion</p>
	<p>Tiger</p>
	<p>Horse</p>
	<script>
		let element = document.querySelectorAll('p');
		console.log(element[0].innerText);
	</script>
</body>
</html>

மேலே உள்ள Example2-ஐ கவனிக்கவும் இங்கு html tag கள் கொடுகப்பட்டுள்ளது. இங்கு இரண்டு மூன்று p tag ஆனது உள்ளது. document.querySelectorAll() method இங்கு p என்ற tag name ஆனது argument ஆக அனுபப்படுகிறது. இங்கு முக்கியமாக நாம் அனுப்பிய tag name ஐ கொண்டுள்ள அனைத்து elements யும் நமக்கு கொடுக்கிறது. எனவே element[0].innerText என்பதை console செய்து பார்க்கும் போது நமக்கு முதல் p tag element இல் உள்ள text output Lion என கிடைக்கிறது.console.log ஐ கவனிக்கவும்.

Output: 

Lion

Comments