HTML DOM Element querySelectorAll() మాదిరి పద్ధతి

定义和用法

querySelectorAll() 方法返回与指定 CSS 选择器匹配的元素的子元素的集合，以静态 NodeList 对象。

NodeList

NodeList 是类数组的节点集合（列表）。

列表中的节点可以通过索引（下标）访问。索引从 0 开始。

length అటువంటి పారామీటర్ ద్వారా జాబితాలో నోడ్స్ సంఖ్యను తిరిగి వచ్చే విలువ

మరియు చూడండి:

పరికల్పనా శాస్త్రం:

classList అటువంటి పారామీటర్

className అటువంటి పారామీటర్

querySelector() మంథనం

getElementsByTagName() మంథనం

getElementsByClassName() మంథనం

HTML DOM Style ఆబ్జెక్ట్

శిక్షణ పద్ధతి:

CSS 语法

CSS 选择器

CSS 选择器参考手册

ఉదాహరణ

ఉదాహరణ 1

డివ్ ఎలమెంట్ లో class="example" యొక్క మొదటి ఎలమెంట్ యొక్క బ్యాక్గ్రౌండ్ రంగును సెట్ చేయండి:

// id="myDIV" ఎలమెంట్ని పొందండి (డివ్), అప్పుడు div లో class="example" యొక్క అన్ని ఎలమెంట్స్ ను పొందండి
వార్ x = document.getElementById("myDIV").querySelectorAll(".example"); 
// డివ్ లో మొదటి class="example" (సూచిక 0) ఎలమెంట్ యొక్క బ్యాక్గ్రౌండ్ రంగును సెట్ చేయండి
x[0].style.backgroundColor = "red";

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

సలహా:పేజీ లోపల మరిన్ని ఉదాహరణలను చూడండి

వినియోగం

element.querySelectorAll(cssSelectors)

పారామీటర్స్

పారామీటర్స్ వివరణ
cssSelectors

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

CSS సెలెక్టర్స్ హీల్ప్ కొరకు ఉపయోగించబడతాయి, ఇది id, క్లాస్, రకం, అటువంటి అన్ని హీరోగ్రాఫ్స్ మరియు అన్ని అటువంటి అన్ని విలువలను ప్రతిపాదిస్తుంది.

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

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

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

తిరిగి వచ్చే విలువ

NodeList ఆబ్జెక్ట్, ఇది పేరుబద్దమైన CSS సెలెక్టర్ తో మేళ చేసుకునే ప్రస్తుత ఎలమెంట్ యొక్క అన్ని పరివార ఎలమెంట్లను ప్రతినిధీకరిస్తుంది.

NodeList స్థిరమైన కలవరం ఉంది, అంటే DOM లో మార్పులు కలవరం పై ప్రభావం లేదు.

గమనిక:పేరుబద్దమైన సెలెక్టర్ అసలుగా ఉన్నప్పుడు SYNTAX_ERR అప్రమత్తత చెలాయించబడుతుంది
DOM సంస్కరణలు: సెలెక్టర్స్ లెవల్ 1 డాక్యుమెంట్ ఆబ్జెక్ట్

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

ఉదాహరణ 2

డివ్ ఎలమెంట్ లోని అన్ని <p> మెటాలను పొందండి మరియు మొదటి <p> మెటా (సూచిక 0) యొక్క బ్యాక్గ్రౌండ్ రంగును సెట్ చేయండి:

// పరిశీలించండి id="myDIV" యొక్క మూలకం (div) ను మరియు దానిలో అన్ని p మూలకాలను పరిశీలించండి
వార్ x = document.getElementById("myDIV").querySelectorAll("p"); 
// డివ్ లో మొదటి <p> మెటా (సూచిక 0) యొక్క బ్యాక్గ్రౌండ్ రంగును సెట్ చేయండి
x[0].style.backgroundColor = "red";

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

ఉదాహరణ 3

పొందండి <div> లో class="example" యొక్క అన్ని <p> మెటాలను మరియు మొదటి <p> మెటా యొక్క బ్యాక్గ్రౌండ్ అన్నిటిని సెట్ చేయండి：

// పరిశీలించండి id="myDIV" యొక్క మూలకం (div) ను మరియు దానిలో అన్ని class="example" యొక్క p మూలకాలను పరిశీలించండి
వార్ x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// పరిశీలించండి div లో class="example" యొక్క మొదటి <p> మూలకం (అంకె 0) యొక్క బ్యాక్గ్రౌండ్ కలర్ ను అమర్చండి
x[0].style.backgroundColor = "red";

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

ఉదాహరణ 4

పరిశీలించండి <div> మూలకంలో ఎన్ని క్లాస్="example" మూలకాలు ఉన్నాయి (నోడ్లిస్ట్ ఆబ్జెక్ట్ యొక్క length అంశాన్ని ఉపయోగించండి):

/* పరిశీలించండి id="myDIV" యొక్క మూలకం (div) ను మరియు దానిలో అన్ని class="example" యొక్క p మూలకాలను పరిశీలించండి, కనుగొన్న మూలకాల సంఖ్యను తిరిగి ఇవ్వండి */
వార్ x = document.getElementById("myDIV").querySelectorAll(".example").length;

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

ఉదాహరణ 5

పరిశీలించండి <div> మూలకంలో class="example" యొక్క అన్ని మూలకాల బ్యాక్గ్రౌండ్ కలర్ ను అమర్చండి:

// పరిశీలించండి id="myDIV" యొక్క మూలకం (div) ను మరియు దానిలో అన్ని class="example" మూలకాలను పరిశీలించండి
వార్ x = document.getElementById("myDIV").querySelectorAll(".example");
// for లోపాన్ని సృష్టించండి మరియు div లో అన్ని class="example" మూలకాల బ్యాక్గ్రౌండ్ కలర్ ను అమర్చండి
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

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

ఉదాహరణ 6

పరిశీలించండి <div> మూలకంలో అన్ని <p> మూలకాల బ్యాక్గ్రౌండ్ కలర్ ను అమర్చండి:

// పరిశీలించండి id="myDIV" యొక్క మూలకం (div) ను మరియు దానిలో అన్ని p మూలకాలను పరిశీలించండి
వార్ x = document.getElementById("myDIV").querySelectorAll("p");
// for లోపాన్ని సృష్టించండి మరియు div లో అన్ని p మూలకాల బ్యాక్గ్రౌండ్ కలర్ ను అమర్చండి
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

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

ఉదాహరణ 7

పరిశీలించండి <div> మూలకంలో అన్ని అన్ని target అంశం కలిగిన <a> మూలకాల సరిహద్దు శైలిని అమర్చండి:

// పరిశీలించండి id="myDIV" యొక్క మూలకం (div) ను మరియు దానిలో పరిశీలించండి అన్ని "target" అంశం కలిగిన <a> మూలకాలు
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// for చక్రాన్ని సృష్టించండి మరియు div లోని అన్ని టార్గెట్ అంశాలను పట్టించు చేస్తుంది
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

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

ఉదాహరణ 8

అన్ని <div> అంశాలలో అన్ని <h2>、<div> మరియు <span> అంశాల బ్యాక్గ్రౌండ్ కలర్ ను నిర్వహించండి:

// id="myDIV" యొక్క అంశాన్ని పొందండి (div) మరియు <div> లోని అన్ని <h2>、<div> మరియు <span> అంశాలను పొందండి
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// for చక్రాన్ని సృష్టించండి మరియు <div> లోని అన్ని <h2>、<div> మరియు <span> ఎల్లా అంశాల బ్యాక్గ్రౌండ్ కలర్ ను నిర్వహించండి
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

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

బ్రౌజర్ మద్దతు

పట్టికలో వర్గీకరించిన సంఖ్యలు ఈ పద్ధతిని పూర్తిగా మద్దతు ఇస్తున్న మొదటి బ్రౌజర్ వెర్షన్ను గుర్తిస్తాయి.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 3.2 10.0

గమనిక:Internet Explorer 8 CSS2 ఎంపికకర్తలను మద్దతు ఇస్తుంది. IE9 మరియు అంతకన్నా పెద్ద వెర్షన్లు CSS3 ను మద్దతు ఇస్తాయి.

సంబంధిత పేజీలు

CSS పాఠ్యక్రమం:CSS 选择器

CSS సంపూర్ణ పరిచయం:CSS 选择器参考手册

JavaScript పాఠ్యక్రమం:JavaScript HTML DOM Node List

JavaScript సంపూర్ణ పరిచయం:element.querySelector()

HTML DOM సంపూర్ణ పరిచయం:document.querySelectorAll()