HTML DOM getElementsByClassName() နည်းလမ်း
❮ Element Objectဥပမာ
class="example" ဖြင့် စာရင်းတစ်ခုရှိ class="child" (အညွှန်း 0) ဖြင့် ပထမစာရင်းအကြောင်းအရာ၏ စာသားကို ပြောင်းပါ-
var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
getElementsByClassName() နည်းလမ်းသည် NodeList အရာဝတ္ထုတစ်ခုအနေဖြင့် သတ်မှတ်ထားသော အတန်းအမည်ဖြင့် ဒြပ်စင်တစ်ခု၏ ကလေးဒြပ်စင်များစုစည်းမှုကို ပြန်ပေးသည်။
NodeList အရာဝတ္ထုသည် node အစုအဝေးကိုကိုယ်စားပြုသည်။ node များကို အညွှန်းနံပါတ်များဖြင့် ဝင်ရောက်ကြည့်ရှုနိုင်ပါသည်။ အညွှန်းကိန်းသည် 0 တွင် စတင်သည်။
အကြံပြုချက်- သင်သည် သတ်မှတ်ထားသော အတန်းအမည်ဖြင့် ကလေး node အရေအတွက်ကို ဆုံးဖြတ်ရန် NodeList object ၏ အရှည် ပိုင်ဆိုင်မှုကို သင်အသုံးပြုနိုင်ပြီး ၊ ထို့နောက် node အားလုံးကို လှည့်ပတ်ပြီး သင်အလိုရှိသော အချက်အလက်ကို ထုတ်ယူနိုင်ပါသည်။
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် နည်းလမ်းကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးပါသည်။
Method | |||||
---|---|---|---|---|---|
getElementsByClassName() | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |
အထားအသို
element.getElementsByClassName(classname)
ကန့်သတ်တန်ဖိုးများ
Parameter | Type | Description |
---|---|---|
classname | String | Required. The class name of the child elements you want to get. To search for multiple class names, separate them with spaces, like "child color". |
နည်းပညာဆိုင်ရာအသေးစိတ်
DOM ဗားရှင်း- | Core Level 1 Element Object |
---|---|
ပြန်ပို့တန်ဖိုး- | သတ်မှတ်ထားသော အတန်းအမည်ဖြင့် ဒြပ်စင်များ၏ ကလေးဒြပ်စင်များစုစည်းမှုကို ကိုယ်စားပြုသည့် NodeList အရာဝတ္ထု။ ပြန်ပေးထားသော စုစည်းမှုမှ အစိတ်အပိုင်းများကို အရင်းအမြစ်ကုဒ်တွင် ပေါ်နေသဖြင့် စီထားသည်။ |
နောက်ထပ် ဥပမာများ
ဥပမာ
<div> ဒြပ်စင်တစ်ခုအတွင်း class="child" ဖြင့် ဒုတိယဒြပ်စင်၏ နောက်ခံအရောင်ကို ပြောင်းပါ-
var x =
document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor = "red";
ဥပမာ
<div> ဒြပ်စင်တစ်ခုအတွင်း class="child" ပါရှိသည့် အစိတ်အပိုင်း မည်မျှရှိသည်ကို ရှာဖွေပါ (NodeList object ၏ အရှည်ကို အသုံးပြု၍)
var x =
document.getElementById("myDIV").getElementsByClassName("child").length;
ဥပမာ
class="example" ဖြင့် element တစ်ခုအတွင်းရှိ "child" နှင့် "color" class နှစ်ခုလုံးဖြင့် ပထမဒြပ်စင်၏ နောက်ခံအရောင်ကို ပြောင်းပါ-
var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red";
ဥပမာ
<div> ဒြပ်စင်တစ်ခုအတွင်း class="child" ဖြင့် ဒြပ်စင်အားလုံး၏ နောက်ခံအရောင်ကို ပြောင်းပါ-
var x = document.getElementById("myDIV");
var y = x.getElementsByClassName("child");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}
ဆက်စပ်စာမျက်နှာများ
CSS သင်ခန်းစာ- CSS Syntax
CSS ရည်ညွှန်းချက်- CSS .class ရွေးချယ်မှု
HTML DOM အကိုးအကား- document.getElementsByClassName()
HTML DOM ရည်ညွှန်းချက်- className Property
HTML DOM ရည်ညွှန်းချက်- classList Property
HTML DOM ရည်ညွှန်း- HTML DOM စတိုင် Object
❮ Element Object