HTML DOM Element getElementsByClassName() विधि
- पिछला पृष्ठ getBoundingClientRect()
- अगला पृष्ठ getElementsByTagName()
- पिछला स्तर HTML DOM Elements ऑब्जेक्ट
वर्णन और उपयोग
getElementsByClassName()
विधि दिया हुआ क्लास नाम के सबसे बड़े उप-एलीमेंट के सेट को NodeList ऑब्जेक्ट के रूप में वापस करता है।
और देखें:
शिक्षा:
NodeList
NodeList यह आयताकार नोड सेट (सूची) है।
आप नोड को सूची में इंडेक्स (इंडेक्स) के द्वारा पहुंच सकते हैं। इंडेक्स 0 से शुरू होता है।
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
class="example" के दूसरे एलीमेंट में "child" और "color" वर्गों का प्रयोग करके पहले एलीमेंट के आकार को बदलें:
const elements = document.getElementsByClassName("example")[1]; elements.getElementsByClassName("child color")[0].style.fontSize = "24px";
उदाहरण 5
class="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 | सहायता | सहायता | सहायता | सहायता |
- पिछला पृष्ठ getBoundingClientRect()
- अगला पृष्ठ getElementsByTagName()
- पिछला स्तर HTML DOM Elements ऑब्जेक्ट