XML DOM ການສອນ

ວ່າເປັນຫຍັງ DOM?

DOM ອະທິບາຍວິທີການການເຂົ້າເຖິງ ແລະ ການປະຕິບັດບັນທຶກຄວາມ:

“W3C Document Object Model (DOM) ແມ່ນອີກຄຳສັບສຳລັບອຸປະກອນບໍ່ພົວພັນກັບອຸປະກອນ ແລະ ພາສາທີ່ອະນຸຍາດໃຫ້ໂປຣກິດ ແລະ ສະແດງຄວາມຄິດຂອງບັນທຶກຄວາມ ຄວາມສ້າງຄວາມຄິດ ແລະ ການຈັດຕັ້ງທຳມະຊາດ.”

HTML DOM ອະທິບາຍວິທີການການເຂົ້າເຖິງ ແລະ ການປະຕິບັດ HTML ທີ່ມີມາດຕະຖານ. ມັນຈະສະແດງ HTML ບັນທຶກຄວາມຫຼາຍຄວາມວ່າເຮັດໃຫ້ມີພາບຕົວຢູ່ທີ່ຮູບຮ່າງຕົ້ນຖິ່ນ.

XML DOM ອະທິບາຍວິທີການການເຂົ້າເຖິງ ແລະ ການປະຕິບັດ XML ທີ່ມີມາດຕະຖານ. ມັນຈະສະແດງ XML ບັນທຶກຄວາມຫຼາຍຄວາມວ່າເຮັດໃຫ້ມີພາບຕົວຢູ່ທີ່ຮູບຮ່າງຕົ້ນຖິ່ນ.

ສຳລັບທຸກຄົນທີ່ໃຊ້ HTML ຫຼື XML ຂອງສາມາດທີ່ເຂົ້າເຖິງ DOM ແມ່ນຈຳເປັນ.

HTML DOM

ທຸກປະກອບ HTML ສາມາດເຂົ້າເຖິງໂດຍ HTML DOM.

ບົດສະຫຼຸບ 1

ບົດສະຫຼຸບນີ້ຈະປ່ຽນຄວາມຂອງ HTML ປະກອບສານທີ່ມີ id="demo":

<h1 id="demo">ນີ້ເປັນຫົວຂໍ້</h1>
<p id="demo"></p>
document.getElementById("demo").innerHTML = "Hello World!";
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

</html>

ບົດສະຫຼຸບ 2

ບົດສະຫຼຸບນີ້ຈະປ່ຽນຄວາມຂອງ <h1> ທຳອິດໃນ HTML ຂອງທ່ານ:

<h1>ນີ້ເປັນຫົວຂໍ້</h1>
<h1>ນີ້ເປັນຫົວຂໍ້</h1>
<p id="demo"></p>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

</html>

ເຫັນດີ:ເຖິງວ່າ HTML ຂອງທ່ານພຽງແຕ່ມີ <h1> ປະກອບສານດຽວ, ທ່ານກໍ່ຕ້ອງກຳນົດບັນນາທິບັນ [0] ຍ້ອນວ່າ getElementsByTagName() ມີຄວາມສຳຄັນຄືກັນກັບສະໜາມ.

ທ່ານສາມາດຮຽນຫຼາຍກ່ຽວກັບ HTML DOM ໃນຫຼັກສູດ JavaScript ຂອງພວກເຮົາ.

XML DOM

ທຸກປະກອບສານ XML ສາມາດເຂົ້າເຖິງໄດ້ຜ່ານ XML DOM.

XML DOM ແມ່ນ:

  • ມາດຕະຖານປະກອບສານ XML
  • ມາດຕະຖານຄົ້ນຫາຂໍ້ຄວາມ XML
  • ບໍ່ຕິດຕໍ່ວັດຖຸ ແລະ ພາສາ
  • ມາດຕະຖານ W3C

ບອກກັບວ່າ: XML DOM ແມ່ນກົດລະບຽບຂອງວິທີການຄົ້ນຫາ, ປ່ຽນ, ສະເໜີ ຫຼື ຖອນ XML ປະກອບສານ.

ຄົ້ນຫາຄວາມຂອງ XML ປະກອບສານ.

ບົດສະຫຼຸບນີ້ຈະຊອກຫາຄວາມຂອງ ຢູ່ <title> ທຳອິດໃນ XML ທີ່ຖືກອອກໄປ:

ນັກການຄົ້ນຄວ້າ

txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

ເລື່ອງຫາ XML ທີ່ຖືກອອກໄປ.

XML ທີ່ນຳໃຊ້ໃນບົດສະຫຼຸບນີ້ແມ່ນ books.xml.

ບົດສະຫຼຸບນີ້ຈະ "books.xml" ອອກໃນ xmlDoc ແລະ ຊອກຫາຄວາມຂອງ ຢູ່ <title> ທຳອິດໃນ books.xml:

ນັກການຄົ້ນຄວ້າ

<!DOCTYPE html>
ຄວາມຄິດ
<html>
<body>
<p id="demo"></p>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    myFunction(this);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    xmlDoc = parser.parseFromString(text,"text/xml");
    document.getElementById("demo").innerHTML =
}
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>

</html>

ການອະທິບາຍຕົວຢ່າງ

  1. xmlDoc - XML DOM ບັນຊີທີ່ຖືກສ້າງໂດຍກົນປະສົມ
  2. getElementsByTagName("title")[0] - ຊອກຫົວເຂົາ <title> ທີ່ທໍາອິດ
  3. childNodes[0] - ຫົວເຂົາທີ່ເປັນຫົວເຂົາບັນຊີທີ່ທໍາອິດຂອງ <title>
  4. nodeValue - ຄວາມຄິດຂອງຫົວເຂົາ (ຄວາມຄິດແບບຕົວເລື່ອງ)

ການນຳມາ XML ຄວາມສັບສົນ

ການນຳມາສະໜັບສະໜູນ XML DOM ບັນຊີຄວາມສັບສົນ, ແລະໃຊ້ JavaScript ທີ່ຈະນຳມາຊອກຂໍ້ມູນຈາກນັ້ນ:

ນັກການຄົ້ນຄວ້າ

ຄວາມຄິດ
<html>
<body>
<p id="demo"></p>
<script>
var text, parser, xmlDoc;
text = "<bookstore><book>" +
"<title>雅舍谈吃</title>" +
"<author>梁实秋</author>" +
"<year>2013</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>

</html>

ການສຶກສາສຳລັບຕົວຊີວິດ

ຄູ່ມືການກົດຫມາຍ

DOM ສະແດງຄູ່ມືການກົດຫມາຍທີ່ຖືກກໍານົດເປັນປະເພດທີ່ມັກຂອງກົນລະຍຸດ. DOM ຈະສ້າງ XML ວ່າຫົວເຂົາບັນຊີອອກຈາກ JavaScript ຫຼືພິມມອງອື່ນໆ. ໃນການສະໜັບສະໜູນນີ້, ພວກເຮົາໃຊ້ JavaScript.

ປະເພດປົກກະຕິເປັນສິ່ງທີ່ມັນ (ເປັນຕົວຢ່າງ nodename ຖື "book").

ກົນລະຍຸດປົກກະຕິເປັນສິ່ງທີ່ສາມາດເຮັດ (ເປັນຕົວຢ່າງການລົບ "book" ດັ່ງກ່າວ).

XML DOM ປະເພດ

ນີ້ເປັນບາງປະເພດທີ່ປະກອບດ້ວຍ DOM:

  • x.nodeName - ຊື່ຫົວເຂົາຂອງ x
  • x.nodeValue - ຄວາມຄິດຂອງ x
  • x.parentNode - ອົງການພໍ່ຂອງ x
  • x.childNodes - ອົງການລູກຊົງຂອງ x
  • x.attributes - ອົງການປະສົມຂອງ x

注释：ໃນລາຍການຂັ້ນວາງກ່າວນີ້ x ແມ່ນອົງການຫົວເຂົາບັນຊີ。

XML DOM 方法

  • x.getElementsByTagName(name) - 获取拥有指定标签名称的所有元素
  • x.appendChild(node) - 向 x 插入一个子节点
  • x.removeChild(node) - 从 x 中删除子节点

注释：在上面的列表中，x 是一个节点对象。