JavaScript HTML DOM 元素

Makao hii inatoa mafunzo ya kani kuwaonyesha matukio ya kutafuta na kufikia elementi za HTML wa sayari.

Kutafuta elementi za HTML

Kawaida, kwa JavaScript, inahitajika kufanya mawasiliano na elementi za HTML.

Kufikia hivyo, inahitajika kuwaonyesha kwanza elementi hizi. Kuna matukio mengi ambayo inaweza kufanyia kazi hiyo:

  • Kutafuta elementi kwa id
  • Kutafuta elementi kwa jina la taga
  • Kutafuta elementi kwa jina la klassi
  • Kutafuta elementi za HTML kwa CSS selector
  • Kutafuta elementi kwa kikolea kwa HTML object collection

Kutafuta elementi kwa id

Mwili wa kwanza wa kutafuta elementi za DOM ni kusaidia kwa id ya elementi.

Mivuno hii inafikia elementi ya id="intro":

Mifano

var myElement = document.getElementById("intro");

Kutafuta kwa mafanikio

Ikiwa elementi inafikia, mtu hii methodi inaruhusu kurejea elementi kama kitu (katika myElement).

Ikiwa elementi hayafikia, myElement inaonekana kuhusiana na null.

Kutafuta elementi kwa jina la taga

Mivuno hii inafikia yote ya <p> Elementi:

Mifano

var x = document.getElementsByTagName("p");

Kutafuta kwa mafanikio

Mivuno hii inafikia elementi ya id="main" na kisha kutafuta yote ya "main" <p> Elementi:

Mifano

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

Kutafuta kwa mafanikio

Kutafuta elementi kwa jina la klassi

Ikiwa unaonesha kuupata vifano vya elementi vyenye jina la klassi lile getElementsByClassName().

Mivuno hii inaruhusu vifano vya elementi vyenye class="intro":

Mifano

var x = document.getElementsByClassName("intro");

Kutafuta kwa mafanikio

Kutafuta elementi kwa jina la klassi hiliwe na Internet Explorer 8 na vya zamani zaidi.

Kutafuta elementi za HTML kwa CSS selector

Ikiwa unaonesha kuupata vifano vya HTML vyenye CSS selector (id, jina la klassi, aina, propeti, thamani ya propeti na hivyo pamoja na hivi pengine) querySelectorAll() Methodi.

Mivuno hii inaruhusu yote ya class="intro" <p> Mifano ya elementi:

Mifano

var x = document.querySelectorAll("p.intro");

Kutafuta kwa mafanikio

querySelectorAll() Hiliwe na Internet Explorer 8 na vya zamani zaidi.

Kuchagua viungo vya HTML kwa maelezo wa HTML

Mifano hii inafanya kusoma viungo vya form ya id="frm1" katika forms ya kikoa, na kuonyesha kila thamani ya kina:

Mifano

var x = document.forms["frm1"];
var text = "";
 var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

Kutafuta kwa mafanikio

Viungo vifuatavyo vya HTML (na majaribio ya viungo) pia vinapatikana kwa kuchagua: