HTML DOM Element getElementsByClassName() పద్ధతి

నిర్వచనం మరియు వినియోగం

getElementsByClassName() పద్ధతి ద్వారా ప్రదత్త క్లాస్ నామమున్న ఉపాంశముల సమూహమును తిరిగి ఇవ్వుతుంది, NodeList అనునది వంటి వస్తువు.

మరింత చూడండి:

classList అనునది స్పష్టము.

className అనునది స్పష్టము.

querySelector() పద్ధతి

querySelectorAll() పద్ధతి

getElementsByTagName() పద్ధతి

HTML DOM Style 对象

పాఠ్యక్రమం:

సిఎస్ఎస్ సంకేతం

సిఎస్ఎస్ సెలెక్టర్

సిఎస్ఎస్ సెలెక్టర్ పరికల్పనా కిరాజ్

NodeList

NodeList ఇది అనుకూలమైన క్రమాంకాల అంశముల సమూహము (జాబితా).

మీరు జాబితాలో అంశములను ఇండెక్స్ (పోయింట్) ద్వారా ప్రాప్తి చేసుకోవచ్చు. ఇండెక్స్ మొదటి నుండి ప్రారంభమవుతుంది.

length అనునది స్పష్టము.జాబితాలో అంశముల సంఖ్యను తిరిగి ఇవ్వు.

ఉదాహరణ

ఉదాహరణ 1

class="child" ద్వారా మొదటి జాబితా అంశము వచనము మార్చు:

const list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";

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

ఉదాహరణ 2

"myDIV" లో class="child" యొక్క అంశముల సంఖ్య:

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
let number = nodes.length;

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

ఉదాహరణ 3

మార్చు class="child" యొక్క రెండవ అంశము పరిమాణము:

const element = document.getElementById("myDIV");
element.getElementsByClassName("child")[1].style.fontSize = 24px";

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

ఉదాహరణ 4

క్లాస్="example" యొక్క రెండవ ఎలంట్లో "child" మరియు "color" క్లాస్లను ఉపయోగించి మొదటి ఎలంట్ల పరిమాణాన్ని మార్చండి:

const elements = document.getElementsByClassName("example")[1];
elements.getElementsByClassName("child color")[0].style.fontSize = "24px";

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

ఉదాహరణ 5

క్లాస్="child" యొక్క "myDIV" లోని అన్ని ఎలంట్ల రంగును మార్చండి:

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.color = "red";
}

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

సంకేతం

element.getElementsByClassName(classname)

పారామిటర్

పారామిటర్ వివరణ
classname

అవసరం. పిల్ల ఎలంట్ల క్లాస్ పేరు.

పలు పేర్లను స్పేస్ తో వేరు చేయండి (ఉదా. "child color")

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

రకం వివరణ
NodeList

ఇచ్చిన క్లాస్ పేరుతో కలిగిన ఎలంట్ల పిల్లలు.

మూల కోడ్లో కనిపించే క్రమంలో ఎలంట్లు వంటిగా క్రమీకరించబడతాయి.

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

element.getElementsByClassName() ఇది DOM Level 1 (1998) లక్షణం.

అన్ని బ్రౌజర్లు పూర్తిగా మద్దతు ఇస్తాయి:

చ్రోమ్ ఐఇ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఆపరా
చ్రోమ్ ఐఇ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఆపరా
మద్దతు 9-11 మద్దతు మద్దతు మద్దతు మద్దతు