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, క్లాస్, రకం, అట్రిబ్యూట్, అట్రిబ్యూట్ విలువ మొదలైన విషయాలను ఆధారంగా ఎంచుకుంటాయి.

పలు సెలెక్టర్లకు, ప్రతి సెలెక్టర్ ను కొమా తో వేరు చేయండి.

తిరిగే ఎలమెంట్ డాక్యుమెంట్ లో మొదటి చేరువ ఎలమెంట్ ఆధారంగా ఉంటుంది (క్రింది "మరిన్ని ఉదాహరణలు" చూడండి).

సలహా:పూర్తి CSS సెలెక్టర్ జాబితా కొరకు, మా ముందుకు చూడండి: CSS 选择器参考手册.

సాంకేతిక వివరాలు

తిరిగే విలువ:

పేరున్న CSS సెలెక్టర్ యొక్క మొదటి ఎలమెంట్ మేళికలు చేస్తుంది.

మేళికలు కనుగొనబడలేకపోతే, null తిరిగి ఇస్తుంది.

పేరున్న సెలెక్టర్ విఫలమైతే, SYNTAX_ERR అప్రిషన్ ప్రాప్తి చేస్తుంది.
DOM వెర్షన్: సెలెక్టర్స్ లెవల్ 1 ఎలమెంట్ ఓబ్జెక్ట్

మరిన్ని ఉదాహరణలు

ఉదాహరణ 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!";

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 5

డివ్ లోని టార్గెట్ అంతర్జాతికంగా సెట్ చేయబడిన మొదటి <a> ఎలిమెంట్కు ఎరుపు బార్డర్ జోడించండి:

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

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 6

ఈ ఉదాహరణలో పలు సెలెక్టర్లు ఎలా పని చేస్తాయి చూపబడుతుంది.

మీరు రెండు ఎలిమెంట్లు ఉన్నారని హెచ్ టి ఎమ్ ప్రక్రియా హెచ్ టి ఎమ్ మరియు హెచ్ టి ఎమ్ ప్రక్రియా హెచ్ టి ఎమ్ ఉన్నారని భావించండి.

ఈ కోడ్ డివ్ లో మొదటి హెచ్ టి ఎమ్ ప్రక్రియా హెచ్ టి ఎమ్ కు బేక్గ్రౌండ్ కలిగించే విధంగా ఉంటుంది:

<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";

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 7

కానీ, జిఎస్ క్యూ ఈడిటి లో ఉన్న హెచ్ టి ఎమ్ ప్రక్రియా హెచ్ టి ఎమ్ ఎ ముందు ఉన్నట్లయితే, హెచ్ టి ఎమ్ ప్రక్రియా హెచ్ టి ఎమ్ ని ఎరుపు బేక్గ్రౌండ్ కలిగించబడుతుంది.

<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 选择器参考手册

JavaScript శిక్షణం:JavaScript HTML DOM నోడ్ లిస్ట్

JavaScript పరిచయం మానికించండి:document.querySelector()

JavaScript పరిచయం మానికించండి:element.querySelectorAll()

HTML DOM పరిచయం మానికించండి:document.querySelectorAll()