JavaScript querySelector() Method

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

querySelector(name);

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

Example1


<!DOCTYPE html>
<html lang="en">
<head>
	<title>querySelector() Demo</title>
</head>
<body>
	<h1>Query Selector</h1>
	<script>
		let element = document.querySelector('h1');
		console.log(element);
	</script>
</body>
</html>

மேலே உள்ள Example1-ஐ கவனிக்கவும் இங்கு html tag கள் கொடுகப்பட்டுள்ளது. இங்கு ஒரு h1 tag ஆனது உள்ளது. document.querySelector() method இங்கு ஒரு tag name ஆனது argument ஆக அனுபப்படுகிறது. இங்கு நாம் அனுப்பிய tag name ஐ கொண்டுள்ள elements ஐ நமக்கு கொடுக்கிறது. எனவே store செய்து உள்ள element என்பதை console செய்து பார்க்கும் போது நமக்கு output <h1>Query Selector</h1> என கிடைக்கிறது.console.log ஐ கவனிக்கவும்.

Output: 

<h1>Query Selector</h1>

Example2


<!DOCTYPE html>
<html lang="en">
<head>
	<title>querySelector() Demo</title>
</head>
<body>
	<p>Parallel Codes</p>
	<p>Linto.in</p>
	<script>
		let element = document.querySelector('p');
		console.log(element.innerText);
	</script>
</body>
</html>

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

Output: 

Parallel Codes

Comments