JavaScript HTML DOM 元素

Ang kabanatang ito ay magtuturo kung paano hanapin at pumunta sa HTML element sa pahina.

Hanapin ang HTML element

Karaniwang, sa pamamagitan ng JavaScript, kailangan mong gamitin ang HTML element.

Para maabot ito, kailangan mo muna hanapin ang mga elemento. May ilang mga paraan para gawin ito:

  • Hanapin ang HTML elementong sa pamamagitan ng id
  • Hanapin ang HTML elementong sa pamamagitan ng pangalang tag
  • Hanapin ang HTML elementong sa pamamagitan ng klase
  • Hanapin ang HTML elementong sa pamamagitan ng CSS selector
  • Hanapin ang HTML elementong sa pamamagitan ng HTML object collection

Hanapin ang HTML elementong sa pamamagitan ng id

Ang pinakasimpleng paraan para hanapin ang HTML elementong DOM ay gamitin ang id ng elemento.

Ang kasong ito ay hinahanap ang elemento na may id="intro":

实例

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

亲自试一试

Kung natagpuan ang elemento, ang paraan na ito ay ibabalik ang elemento bilang isang bagay (sa myElement).

Kung hindi natagpuan ang elemento, ang myElement ay maglalaman ng null.

Hanapin ang HTML elementong sa pamamagitan ng pangalang tag

Ang kasong ito ay hinahanap ang lahat ng <p> Elemento:

实例

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

亲自试一试

Ang kasong ito ay hinahanap ang elemento na may id="main", pagkatapos ay hinahanap ang lahat ng <p> Elemento:

实例

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

亲自试一试

Hanapin ang HTML elementong sa pamamagitan ng klase

Kung kailangan mong hanapin ang lahat ng HTML elementong may parehong klase, gamitin ang getElementsByClassName().

Ang kasong ito ay ibabalik ang listahan ng lahat ng elemento na may klase "intro":

实例

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

亲自试一试

Hindi ginagamit para sa Internet Explorer 8 at mas maagang bersiyon.

Hanapin ang HTML elementong sa pamamagitan ng CSS selector

Kung kailangan mong hanapin ang lahat ng HTML elementong tumutugma sa tinukoy na CSS selector (id, pangalan ng klase, uri, attribute, halaga ng attribute at iba pa), gamitin ang querySelectorAll() mga paraan.

Ang kasong ito ay ibabalik ang lahat ng may klase "intro" na mga <p> Listahan ng elemento:

实例

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

亲自试一试

querySelectorAll() Hindi ginagamit para sa Internet Explorer 8 at mas maagang bersiyon.

通过 HTML 对象选择器查找 HTML 对象

本例查找 id="frm1" 的 form 元素，在 forms 集合中，然后显示所有元素值：

实例

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;

亲自试一试

以下 HTML 对象（和对象集合）也是可访问的：