HTML DOM Element querySelector() মথদা

বিবরণ ও ব্যবহার

querySelector() মথুরা নির্দিষ্ট CSS চিহ্নিতাকারকের সাথে মাথালিখা করা এলিমেন্টের প্রথম সাব-এলিমেন্টকে ফিরায়。

মন্তব্য:

querySelector() মথুরা কেবল নির্দিষ্ট চিহ্নিতাকারকের সাথে মাথালিখা করা এলিমেন্টকে ফিরায়।সব মাথালিখা করা এলিমেন্টকে ফিরাতে, নিম্নোক্ত ব্যবহার করুন querySelectorAll() মথুরা。

অন্যান্য দেখুন:

পরিচ্ছেদক:

classList এপার্ট

className এপার্ট

querySelectorAll() মথুরা

getElementsByTagName() মথুরা

getElementsByClassName() মথুরা

HTML DOM Style অবজেক্ট

শিক্ষা:

CSS সিন্থ্য

CSS সিলেক্টর

CSS সিলেক্টর রেফারেন্স ম্যানুয়েল

উদাহরণ

উদাহরণ 1

পরিবর্তন করুন <div> এলিমেন্টের class="example" এর প্রথম সাব-এলিমেন্টের টেক্সট:

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";

আপনার হাতে পরীক্ষা করুন

পানের নিচে আরও উদাহরণ পাওয়া যাবে。

বিন্যাস

element.querySelector(CSSselectors)

পারামিটার

পারামিটার বর্ণনা
CSSselectors

প্রয়োজনীয়। স্ট্রিং।একটি বা একাধিক CSS চিহ্নিতাকারককে নির্দিষ্ট করে এলিমেন্টকে মাথালিখা করুন。

CSS চিহ্নিতাকারকগুলি id, class, ধরন, বৈশিষ্ট্য, বৈশিষ্ট্য মান ইত্যাদির ভিত্তিতে HTML এলিমেন্টকে চিহ্নিত করে।

একাধিক চিহ্নিতাকারকের জন্য, প্রত্যেকটি চিহ্নিতাকারককে কমা (,) দিয়ে বিভক্ত করুন。

ফলাফল এলিমেন্টটি প্রথমে ডকুমেন্টে পাওয়া এলিমেন্ট ভিত্তিতে নির্ধারিত হয় (উল্লেখ করুন নিচের "আরও উদাহরণ")

সুপারিশ:পূর্ণ সিএসএস চিহ্নিতাকারক তালিকা জানতে, আমাদের CSS সিলেক্টর রেফারেন্স ম্যানুয়েল。

প্রযুক্তিগত বিবরণ

ফলাফল:

নির্দিষ্ট CSS চিহ্নিতাকারকের প্রথম এলিমেন্টকে মাথালিখা করুন。

যদি কোনও মাথালিখা পাওয়া যায় না, তবে null ফিরায়।

যদি নির্দিষ্ট চিহ্নিতাকারক নেইয়েই, তবে SYNTAX_ERR সমস্যা ফেলে।
DOM সংস্করণ: Selectors Level 1 Element Object

আরও উদাহরণ

উদাহরণ 2

পরিবর্তন করুন <div> এলিমেন্টের প্রথম <p> এলিমেন্টের টেক্সট:

var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";

আপনার হাতে পরীক্ষা করুন

উদাহরণ 3

পরিবর্তন করুন <div> এলিমেন্টের class="example" এর প্রথম <p> এলিমেন্টের টেক্সট:

var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";

আপনার হাতে পরীক্ষা করুন

উদাহরণ 4

পরিবর্তন করুন <div> এলিমেন্টের id="demo" এলিমেন্টের টেক্সট:

var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";

আপনার হাতে পরীক্ষা করুন

উদাহরণ ৫

প্রথম টার্গেট প্রতিযোগী <a> ইলেকট্রনকে <div> ইলেকট্রনের মধ্যে লাল হাড় যোগ করুন:

var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";

আপনার হাতে পরীক্ষা করুন

উদাহরণ ৬

এই উদাহরণটি বহুবিধ সিলেক্টর কিভাবে কাজ করে দেখায়。

আপনার দুটি ইলেকট্রন আছে: <h2> এবং <h3> ইলেকট্রন。

নিম্নলিখিত কোডটি <div> এর প্রথম <h2> ইলেকট্রনে পটল যোগ করবে:

<div id="myDIV">
  <h2>A h2 element</h2>
  <h3>A h3 element</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

আপনার হাতে পরীক্ষা করুন

উদাহরণ ৭

কিন্তু, যদি <div> এর মধ্যে <h3> ইলেকট্রন একটি <h2> ইলেকট্রনের আগে থাকে, <h3> ইলেকট্রন লাল পটল পাবে。

<div id="myDIV">
  <h3>A h3 element</h3>
  <h2>A h2 element</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

আপনার হাতে পরীক্ষা করুন

ব্রাউজার সমর্থন

সার্ভিসের সংখ্যা প্রথম সম্পূর্ণভাবে এই পদ্ধতিকে সমর্থনকারী ব্রাউজারের সংস্করণকে উল্লেখ করে।

চ্রোম এজ ফায়ারফক্স স্যাফারি ওপেরা
চ্রোম এজ ফায়ারফক্স স্যাফারি ওপেরা
4.0 8.0 3.5 3.2 10.0

সংশ্লিষ্ট পৃষ্ঠা

CSS টিউটোরিয়াল:CSS সিলেক্টর

CSS রেফারেন্স ম্যানুয়াল:CSS সিলেক্টর রেফারেন্স ম্যানুয়েল

জেভাস্ক্রিপ্ট টিউটোরিয়াল:জেভাস্ক্রিপ্ট HTML DOM Node List

জেভাস্ক্রিপ্ট রেফারেন্স ম্যানুয়াল:document.querySelector()

জেভাস্ক্রিপ্ট রেফারেন্স ম্যানুয়াল:element.querySelectorAll()

HTML DOM রেফারেন্স ম্যানুয়াল:document.querySelectorAll()