ຈີສະຄອັບ HTML DOM ເປັນຕົວ

ວັນນີ້ຈະສອນເຈົ້າວ່າບວກແລະເຂົ້າເຖິງປະກອບ HTML ໃນຫົວໜ້າ HTML.

ຊອກຫາປະກັບ HTML 元素

ປົກກະຕິ, ພາຍໃນ JavaScript, ເຈົ້າຕ້ອງກະທຳປະກອບ HTML.

ເພື່ອພະຍາຍາມພວກນີ້, ເຈົ້າຕ້ອງຊອກຫາປະກອບທັງໝົດ. ມີຫຼາຍວິທີທີ່ສາມາດເຮັດບາບການດັ່ງກ່າວ:

  • �ອກຫາປະກັບ id HTML 元素
  • �ອກຫາປະກັບຊັບຊີ HTML 元素
  • �ອກຫາປະກັບ CSS 选择器 HTML 元素
  • ຊອກຫາປະກັບ CSS 选择器 HTML 元素
  • �ອກຫາປະກັບ HTML 对象集合

�ອກຫາປະກັບ id HTML 元素

ວິທີສະເພາະສາມາດຊອກຫາປະກອບ HTML ໃນ DOM ແມ່ນໃຊ້ id.

ບົດຢ່າງນີ້ຊອກຫາປະກອບ id="intro":

ຄວາມຄົງຄວາມຈິງ

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

ທຳການທົດລອງຄົນຕົນ

ຖ້າພົບປະກອບ, ວິທີກໍານົດຈະກັບບັນຍາການວ່າໂຕເອກະບາຍ (ໃນ myElement).

ຖ້າບໍ່ພົບປະກອບ, myElement ຈະບັນຈຸ: null.

�ອກຫາປະກັບຊັບຊີ HTML 元素

ບົດຢ່າງນີ້ຊອກຫາປະກອບ: <p> ປະກອບ:

ຄວາມຄົງຄວາມຈິງ

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

ທຳການທົດລອງຄົນຕົນ

ບົດຢ່າງນີ້ຊອກຫາປະກອບ id="main" ແລະຊອກຫາ "main" ທັງໝົດ: <p> ປະກອບ:

ຄວາມຄົງຄວາມຈິງ

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

ທຳການທົດລອງຄົນຕົນ

�ອກຫາປະກັບ CSS 选择器 HTML 元素

ຖ້າເຈົ້າຕ້ອງຊອກຫາປະກັບບັນຊີທີ່ມີຊັບຊີດຽວກັນ, ກະລຸນາໃຊ້: getElementsByClassName().

ບົດຢ່າງນີ້ກັບບັນຊີ "class="intro"" ທັງໝົດ:

ຄວາມຄົງຄວາມຈິງ

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

ທຳການທົດລອງຄົນຕົນ

querySelectorAll()

ຊອກຫາປະກັບ CSS 选择器 HTML 元素

ຖ້າເຈົ້າຕ້ອງຊອກຫາປະກັບສິ່ງທີ່ຕິດຕາມຄູ່ຄັດເລືອກ CSS (id, ຊັບຊີ, ແບບ, ປະສົມ, ຄຸນຄ່າຂອງປະສົມປະສານງານ, ແລະອື່ນໆ), ກະລຸນາໃຊ້: querySelectorAll() ພື້ນຖານຂັດຂອງ.

ບົດຢ່າງນີ້ກັບບັນຊີ "class="intro"" ທັງໝົດ: <p> ບັນຊີຂອງປະກອບ:

ຄວາມຄົງຄວາມຈິງ

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

ທຳການທົດລອງຄົນຕົນ

querySelectorAll() ບໍ່ສາມາດນຳໃຊ້ໃນ Internet Explorer 8 ແລະແຜນຄືນທີ່ຫນັງກ່ວາ.

ທຳການຄົ້ນຫາ HTML ໂອບຄອມ ຈາກ HTML ໂອບຄອມ ຄົນຕົນ

ຄືກັບນີ້ການຄົ້ນຫາຂອງ form ໂອບຄອມ id="frm1" ໃນ ກຸ່ມ 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 ໂອບຄອມ (ແລະ ກຸ່ມໂອບຄອມ) ກໍ່ສາມາດເຂົ້າເຖິງຄືກໍ່ຕາມ: