HTML DOM Document querySelectorAll() పద్ధతి
- పైన పేజీ
- తదుపరి పేజీ
- పైకి తిరిగి వెళ్ళు HTML DOM డాక్యుమెంట్స్
నిర్వచనం మరియు ఉపయోగం
querySelectorAll() ఈ మాధ్యమం CSS ఎంపికకర్తతో సరిపోయే అన్ని ఎలిమెంట్స్ ను తిరిగి ఇస్తుంది.
querySelectorAll() ఈ మాధ్యమం NodeList యొక్క సంఖ్యను తిరిగి ఇస్తుంది.
యది ఎంపికకర్త అనార్థం అయితే querySelectorAll() ఈ మాధ్యమం ఫలించించబడుతుంది SYNTAX_ERR అనార్థం.
ఇన్స్టాన్స్
ఉదాహరణ 1
class="example" క్లాస్ ఎలిమెంట్స్ అన్ని ఎంపిక చేయండి:
document.querySelectorAll(".example");
ఉదాహరణ 2
మొదటి <p> ఎలిమెంట్కు బ్యాక్గ్రౌండ్ కలర్ జోడించండి:
const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";
ఉదాహరణ 3
మొదటి class="example" <p> ఎలిమెంట్కు బ్యాక్గ్రౌండ్ కలర్ జోడించండి:
const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";
ఉదాహరణ 4
class="example" క్లాస్ ఎలిమెంట్స్ యొక్క సంఖ్య:
let numb = document.querySelectorAll(".example").length;
ఉదాహరణ 5
అన్ని class="example" క్లాస్ ఎలిమెంట్స్ యొక్క బ్యాక్గ్రౌండ్ కలర్ సెట్ చేయండి:
const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
ఉదాహరణ 6
అన్ని <p> ఎలిమెంట్ల బ్యాక్గ్రౌండ్ కలర్ ను అమర్చుము:
let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
ఉదాహరణ 7
అన్ని "target" అంశం ఉన్న <a> ఎలిమెంట్ల బార్డర్ ను అమర్చుము:
const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}
ఉదాహరణ 8
పైన ఉన్న <div> ఎలిమెంట్లపై ఉన్న ప్రతి <p> ఎలిమెంట్ల బ్యాక్గ్రౌండ్ కలర్ ను అమర్చుము:
const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
ఉదాహరణ 9
అన్ని <h3>, <div> మరియు <span> ఎలిమెంట్ల బ్యాక్గ్రౌండ్ కలర్ ను అమర్చుము:
const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
సింథెక్స్
document.querySelectorAll(CSSselectors)
పారామీటర్లు
| పారామీటర్లు | వివరణ |
|---|---|
| CSSselectors |
అవసరం. ఒకటి లేదా పలు CSS selectors. CSS selectors అనేది id, క్లాస్, రకం, అంశం, అంశవిలువ మొదలైన విషయాల పై అనుసంధానించబడుతుంది మరియు HTML ఎలిమెంట్లను ఎంపిక చేస్తుంది. పూర్తి జాబితా కొరకు, మా వెబ్సైట్ను సందర్శించండి CSS ఎంపికకర్త పరిచయాన్ని. పలు ఎంపికలను వినియోగించడానికి, ప్రతి ఎంపికను కొలతలో వేరుచేసుకోండి (పైన ఉన్న ఉదాహరణను చూడండి). |
తిరిగి ఇచ్చే విలువ
| రకం | వివరణ |
|---|---|
| ఆబ్జెక్ట్ |
CSS ఎంపికకర్తలతో సరిపోలుతున్న ఎలిమెంట్లను కలిగివుంటుంది. ఏ సరికొత్త అంశం లేకపోతే, ఖాళీ NodeList ఆబ్జెక్ట్ను తిరిగి ఇస్తుంది. |
HTMLCollection మరియు NodeList మధ్య వ్యత్యాసం
NodeList మరియు HTMLcollection చాలా పోల్చబడేది.
రెండింటికీ డాక్యుమెంట్ నుండి తీసుకున్న నోడ్లు (ఎలిమెంట్లు) పోల్చబడే క్రమబద్ధ కలిసికలు (జాబితాలు). నోడ్లను అంకురం సంఖ్యతో ప్రాప్యం చేసుకోవచ్చు. అంకురం 0 నుండి మొదలుకు ఉంటుంది.
రెండింటికీ length అంశం, ఇది జాబితా (కలిసికలు)లో గల ఎలిమెంట్ల సంఖ్యను తిరిగి ఇస్తుంది。
HTMLCollection ఉందిడాక్యుమెంట్ ఎలమెంట్కలవరం
NodeList అనేది:డాక్యుమెంట్ నోడ్ఎలమెంట్ నోడ్, అట్రిబ్యూట్ నోడ్ మరియు టెక్స్ట్ నోడ్ కలవరం.
HTMLCollection ప్రాజెక్టులను వాటి పేరు, id లేదా సంఖ్యాంకం ద్వారా ప్రాప్తి చేయవచ్చు.
NodeList ప్రాజెక్టులను వాటి సంఖ్యాంకం ద్వారా మాత్రమే ప్రాప్తి చేయవచ్చు.
HTMLCollection ఎల్లప్పుడూ ఉంటుంది:వాస్తవమైనకలవరం
ఉదాహరణకు: జిఎమ్ఎల్ ఎలమెంట్ను DOM లోకి చేర్చినప్పుడు, హెచ్టిఎమ్ఎల్ కలెక్షన్ లోని జాబితా మారుతుంది.
నోడ్ లిస్ట్ సాధారణంగా ఉంటుంది:స్థిరమైనకలవరం
ఉదాహరణకు: జిఎమ్ఎల్ ఎలమెంట్ను DOM లోకి చేర్చినప్పుడు, నోడ్ లిస్ట్ లోని జాబితా మారదు.
getElementsByClassName() మరియు getElementsByTagName() పద్ధతులు వాస్తవ HTMLCollection అనున్నది.
querySelectorAll() పద్ధతి వాస్తవ నోడ్ లిస్ట్ అనున్నది.
childNodes అనునది వాస్తవ నోడ్ లిస్ట్ అనునది అనున్నది.
బ్రౌజర్ మద్దతు
document.querySelectorAll() ఇది DOM Level 3 (2004) లక్షణం.
అన్ని బ్రౌజర్లు దానిని మద్దతు ఇస్తాయి:
| చ్రోమ్ | ఐఇ | ఎడ్జ్ | ఫైర్ఫాక్స్ | సఫారీ | ఒపెరా |
|---|---|---|---|---|---|
| చ్రోమ్ | ఐఇ | ఎడ్జ్ | ఫైర్ఫాక్స్ | సఫారీ | ఒపెరా |
| మద్దతు | 9-11 | మద్దతు | మద్దతు | మద్దతు | మద్దతు |
సంబంధిత పేజీలు
శిక్షణాగారం:
JavaScript Node List శిక్షణాగారం
QuerySelector పద్ధతి:
Element querySelector() పద్ధతి
Element querySelectorAll() పద్ధతి
Document querySelector() పద్ధతి
Document querySelectorAll() పద్ధతి
GetElement పద్ధతి:
Document getElementById() పద్ధతి
- పైన పేజీ
- తదుపరి పేజీ
- పైకి తిరిగి వెళ్ళు HTML DOM డాక్యుమెంట్స్
