querySelector JavaScript:একটি গাইড

getElementById . getElementByClass . আপনি আগে এই ফাংশন সম্পর্কে শুনে থাকতে পারে. তারা উভয়ই আপনাকে জাভাস্ক্রিপ্টে একটি নির্দিষ্ট উপাদান নির্বাচন করার অনুমতি দেয়।

একবার আপনি একটি উপাদান নির্বাচন করার পরে আপনি এর বিষয়বস্তু পরিবর্তন করতে পারেন, এর অবস্থা পরিবর্তন করতে পারেন বা এমনকি এটিকে অদৃশ্য করে দিতে পারেন।

জাভাস্ক্রিপ্টে একটি ওয়েবপেজে একটি আইটেম নির্বাচন করতে আপনি ব্যবহার করতে পারেন এমন আরেকটি ফাংশন আছে:querySelector . এই ফাংশনটির একটি বোন আছে যার নাম querySelectorAll , যা একটি নির্দিষ্ট ক্যোয়ারী পূরণ করে এমন সমস্ত উপাদান প্রদান করে।

এই নির্দেশিকায়, আমরা কিভাবে querySelector ব্যবহার করতে হয় তা নিয়ে আলোচনা করতে যাচ্ছি এবং querySelectorAll পদ্ধতি আমরা এই পদ্ধতিগুলির একটি উদাহরণের মাধ্যমে কাজ করব যাতে আপনি সেগুলিকে আপনার কোডে ব্যবহার করতে প্রস্তুত হন৷

querySelector কি?

querySelector একটি ফাংশন যা একটি উপাদান প্রদান করে যা একটি CSS কোয়েরির সাথে মেলে। querySelector নোট করুন পদ্ধতি শুধুমাত্র একটি নির্বাচকের প্রথম উদাহরণ প্রদান করে। querySelector ব্যবহার করার সময় , আপনি চান যে কোনো CSS নির্বাচক নির্দিষ্ট করতে পারেন। উদাহরণস্বরূপ, আপনি একটি উপাদান পুনরুদ্ধার করতে পারেন যার একটি নির্দিষ্ট আইডি সেট আছে, বা একটি উপাদান তার ট্যাগ নামের দ্বারা।

আপনি এই মত এই ফাংশন ব্যবহার করতে পারেন:

var elementName = document.querySelector('#thisElement');

আমরা উদ্ধৃতি চিহ্নের সাথে মিলের জন্য CSS নির্বাচকদের নির্দিষ্ট করেছি। উপরন্তু, আপনি অন্য উপাদানের মধ্যে একটি উপাদান নির্বাচন করার পদ্ধতি ব্যবহার করতে পারেন:

var parentElement = document.querySelector('main');
var childElement = document.querySelector('#childElement');

এটি আইডি #childElement সহ উপাদানটি ফিরিয়ে দেবে যা আমাদের HTML ফাইলের

ট্যাগের মধ্যে রয়েছে।

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।

querySelectorAll পদ্ধতি একই ভাবে কাজ করে। পার্থক্য হল যে এটি শুধুমাত্র প্রথমটির পরিবর্তে ক্যোয়ারী নির্বাচক দ্বারা পাওয়া সমস্ত মিল ফিরিয়ে দেয়:

var allParagraphs = document.querySelectorAll('p');

এটি একটি HTML পৃষ্ঠায় সমস্ত

ট্যাগের একটি তালিকা প্রদান করবে।

এখানে কয়েকটি নির্বাচকদের উদাহরণ রয়েছে যা আপনি এই ফাংশনের সাথে ব্যবহার করতে পারেন:

p:পৃষ্ঠার সমস্ত
ট্যাগ নির্বাচন করে।
#name_field:"name_field" আইডি সহ উপাদান নির্বাচন করে
.তালিকা:ক্লাস নাম "তালিকা" সহ সমস্ত উপাদান নির্বাচন করে
div> p:একটি
উপাদানের মধ্যে থাকা সমস্ত
উপাদান নির্বাচন করে।

আপনি querySelector ব্যবহার করে একাধিক নির্বাচক নির্দিষ্ট করতে পারেন এবং querySelectorAll পদ্ধতি CSS নির্বাচকদের সম্পর্কে আরও জানতে, CSS এবং HTML বৈশিষ্ট্য নির্বাচকদের জন্য আমাদের গাইড দেখুন।

মিল পাওয়া না গেলে, নাল ফেরত দেওয়া হয়।

কোয়েরি নির্বাচক কীভাবে ব্যবহার করবেন

কিভাবে querySelector তা ব্যাখ্যা করার জন্য একটি সহজ ওয়েব অ্যাপ্লিকেশন তৈরি করা যাক পদ্ধতি কাজ করে। আমরা একটি ওয়েব পৃষ্ঠা তৈরি করতে যাচ্ছি যা HTML সম্পর্কে একটি তথ্য প্রদর্শন করে। আমরা querySelector ব্যবহার করতে যাচ্ছি একটি বোতাম যোগ করতে যা ক্লিক করলে, একটি "ডার্ক মোড" সক্রিয় করবে৷

৷

ফ্রন্ট এন্ড সেট আপ করা হচ্ছে

আমরা আমাদের পৃষ্ঠার ফ্রন্ট-এন্ড সেট আপ করে শুরু করব:

<!DOCTYPE html>
<html>
	<head>
		<title>HTML Facts!</title>
		<link rel="stylesheet" href="./facts.css">
	</head>

	<body>
		<div class="mainBox">
			<h1 class="text">HTML Facts!</h1>
			<p class="text">Did you know that HTML is actually based on another markup language, SGML, or Standard Generalized Markup Language?</p>
			<button type="button">Enable dark mode</button>
		</div>
		<script src="./facts.js"></script>
	</body>
</html>

আমরা একটি সাধারণ HTML ওয়েবপেজ তৈরি করেছি যা HTML সম্পর্কে একটি তথ্য প্রদর্শন করে। এই মুহূর্তে, আমাদের পৃষ্ঠাটি এইরকম দেখাচ্ছে:

যদিও আমাদের পৃষ্ঠাটি আমাদের ব্যবহারকারীকে HTML সম্পর্কে একটি তথ্য দেয়, এটিতে দুটি মূল বৈশিষ্ট্য অনুপস্থিত:শৈলী এবং একটি কার্যকরী ডার্ক মোড বোতাম। Facts.css নামে একটি ফাইলে নিম্নলিখিত স্টাইলগুলি যোগ করা যাক:

.mainBox {
    margin: auto;
    width: 50%;
    text-align: center;
    background: hotpink;
    padding: 5%;
}

body {
    background: lightblue;
}

button {
    padding: 10px;
    background: lightgreen;
    border-radius: 10px;
    border: none;
}

এই শৈলীগুলি আমাদের সাইটটিকে আরও নান্দনিকভাবে আনন্দদায়ক দেখায়:

সামনের প্রান্তে আমাদের যা করতে হবে। এখন আমরা জাভাস্ক্রিপ্ট ব্যবহার করে আমাদের ডার্ক মোড যোগ করার উপর ফোকাস করতে যাচ্ছি।

জাভাস্ক্রিপ্ট ব্যবহার করে ডার্ক মোড যোগ করা

আমাদের অন্ধকার মোড ফাংশন দুটি বৈশিষ্ট্য অন্তর্ভুক্ত করা উচিত:

আমাদের বক্সের ভিতরে শিরোনাম এবং অনুচ্ছেদটি সাদা করা উচিত৷
আমাদের সাইটের নীল পটভূমি কালোতে পরিবর্তন করা উচিত।

আসুন DOM উপাদানগুলি (ওয়েবপৃষ্ঠা উপাদানগুলি) নির্বাচন করে শুরু করি যা আমরা লক্ষ্য করতে চাই:শিরোনাম, অনুচ্ছেদ এবং আমাদের পৃষ্ঠার মূল অংশ। আমরা facts.js নামক একটি ফাইলে এটি করতে যাচ্ছি:

const heading = document.querySelector("h1");
const paragraph = document.querySelector("p");
const body = document.querySelector("body");

এই কোডটি নথির প্রথম উপাদানটিকে ফেরত দেয় যেটিতে ট্যাগ আছে

, এবং এখন আমরা একটি ফাংশন তৈরি করতে যাচ্ছি যা আমাদের পাঠ্য এবং বডি ট্যাগের রঙ পরিবর্তন করে। আমরা আমাদের শিরোনাম এবং অনুচ্ছেদ পাঠ্যকে সাদা এবং আমাদের সাইটের পটভূমি কালোতে পরিবর্তন করব।

function enableDarkMode() {
	heading.setAttribute("style", "color: white;");
	paragraph.setAttribute("style", "color: white;");
	body.setAttribute("style", "background-color: black;");
}

আমরা প্রায় সেখানে আছি। পরবর্তী ধাপ হল একটি ইভেন্ট লিসেনার সেট আপ করা। যখনই একজন ব্যবহারকারী আমাদের বোতামে ক্লিক করবে তখনই এই শ্রোতা শুনবে। ব্যবহারকারী বোতামে ক্লিক করলে, ডার্ক মোড সক্রিয় হবে:

document.querySelector("button").addEventListener("click", enableDarkMode);

এখন, দেখা যাক যখন আমরা আমাদের বোতামে ক্লিক করি তখন কী হয়:

আমাদের সাইট সফলভাবে একটি অন্ধকার মোডে পরিবর্তিত হয়েছে৷

৷

উপসংহার (এবং চ্যালেঞ্জ)

আপনি লক্ষ্য করবেন যে আমাদের কোড শুধুমাত্র একজন ব্যবহারকারীকে অন্ধকার মোড সক্ষম করতে দেয়। কি দেয়? এটি আপনার জন্য একটি চ্যালেঞ্জ উপস্থাপন করে:কোডটি লিখুন যা ব্যবহারকারীকে সাইটে অন্ধকার মোড অক্ষম করতে দেয়।

querySelector পদ্ধতি আপনাকে একটি CSS নির্বাচক প্রশ্নের উপর ভিত্তি করে HTML উপাদান নির্বাচন করতে দেয়। এই পদ্ধতিটি একটি ম্যাচের প্রথম দৃষ্টান্ত প্রদান করে। আপনি querySelectorAll ব্যবহার করতে পারেন একটি নির্দিষ্ট নির্বাচকের সাথে মেলে এমন সমস্ত উপাদানগুলির একটি তালিকা পুনরুদ্ধার করার পদ্ধতি

এখন আপনি querySelector ব্যবহার শুরু করতে প্রস্তুত একটি জাভাস্ক্রিপ্ট প্রো মত পদ্ধতি!