JavaScript HTML DOM 导航
- ກັບຄືນໜຶ່ງວັນ ຜູ້ຟັງເຫດໃນ DOM
- ອີກໜຶ່ງວັນ ຫຼັກ DOM
ຈາກ HTML DOM ທ່ານສາມາດໃຊ້ສາຍລັງຕົວເລກເພື່ອອານນະຈາກຕົວເລກທີ່ມີຈຳນວນຫຼາຍຂອງຕົວເລກຫຼັງຄາດກໍ່ຕາມ
ຫຼັກ DOM
ອີງຕາມມາດຕະຖານ W3C HTML DOM ທຸກຢູ່ທີ່ໃນ HTML document ແມ່ນຕົວເລກ:
- ທຸກໜຶ່ງໃນໂຕກາດແມ່ນຕົວເລກdocument
- ແຕ່ລະ HTML element ແມ່ນຕົວເລກelement
- ຄວາມຂຽນໃນ HTML element ແມ່ນຕົວເລກtext
- ແຕ່ລະບັນດາ HTML attribute ແມ່ນຕົວເລກattribute
- ທຸກຄວາມຄິດຄັດແມ່ນຕົວເລກຄິດຄັດ
ດັ່ງນັ້ນ HTML DOM ຕົວເລກທັງໝົດໃນຕົວເລກທີ່ມີຈຳນວນຫຼາຍຂອງຕົວເລກຫຼັງຄາດກໍ່ຕາມສາມາດເຂົ້າເຖິງຈາກ JavaScript
ສາມາດສ້າງຕົວເລກໃໝ່ ແລະສາມາດດັດແກ້ ແລະລຶບຕົວເລກທັງໝົດ
ສາຍລັງຕົວເລກ
ຕົວເລກໃນຕົວເລກທີ່ມີຈຳນວນຫຼາຍຂອງຕົວເລກຫຼັງຄາດກໍ່ຕາມມີສາຍລັງທີ່ມີຄວາມລະດັບ
- ອັດຕາ (ພໍ່, ລູກ ແລະ ພີ່ນລູກ, parent, child ແລະ sibling) ແມ່ນໃຊ້ເພື່ອອະທິບາຍສາຍລັງດັ່ງກ່າວ
- ໃນຕົວເລກທີ່ມີຈຳນວນຫຼາຍຂອງຕົວເລກຫຼັງຄາດກໍ່ຕາມ ຕົວເລກສະຖານະທີ່ຢູ່ທີ່ສຸດແມ່ນອອກຮູບຮ່າງຫຼັງ
- ແຕ່ລະຕົວເລກມີພໍ່ຕົວເລກຫຼັງຄາດກໍ່ຕາມ (ຜູ້ຫຼັງຂອງຕົວເລກຫຼັງຄາດກໍ່ຕາມບໍ່ມີພໍ່ຕົວເລກ)
- ຕົວເລກສາມາດມີຈຳນວນລູກລັງຫຼາຍຫຼືໜ້ອຍ
- ຄົນຮ່ວມ (ພີ່ນລູກຫຼືພີ່ນຍິງ) ແມ່ນຕົວເລກທີ່ມີພໍ່ດຽວກັນ
<html>
<head>
<title>ການສອນ DOM</title>
</head>
<body>
<h1>ຊຸດສະຖານະຂອງ DOM</h1>
<p>Hello world!</p>
</body>
</html>
ຈາກ HTML ທີ່ຂ້ອຍອ່ານເທິງມັນທ່ານຈະອ່ານໄດ້ຂໍ້ມູນດັ່ງກ່າວຫຼັງນັ້ນ:
- html ແມ່ນຜູ້ຫຼັງ
- html ບໍ່ມີພໍ່
- html ແມ່ນພໍ່ຂອງ head ແລະ body
- head ແມ່ນລູກລັງຂອງ html
- <body> ແມ່ນຜູ້ລູກສຸດທ້າຍຂອງ <html>
ພ້ອມກັນ:
- <head> ມີຜູ້ລູກຄົນດຽວ: <title>
- <title> ມີຜູ້ລູກຄົນດຽວ (ຜູ້ລູກຄູ່ມູນ): "DOM 教程"
- <body> ມີຜູ້ລູກສອງຄົນ: <h1> ແລະ <p>
- <h1> ມີຜູ້ລູກຄົນດຽວ: "DOM 第一课"
- <p> ມີຜູ້ລູກຄົນດຽວ: "Hello world!"
- <h1> ແລະ <p> ແມ່ນຜູ້ລູກສອງຄົນ:
ຈັດການກັບຜູ້ລູກລະຫວ່າງຫຼັກຕົວ:
ຜ່ານ JavaScript，ທ່ານສາມາດໃຊ້ສະຖານທີ່ຫຼັງຈາກຫຼັກຕົວເພື່ອຈັດການກັບຜູ້ລູກ:
- parentNode
- childNodes[nodenumber]
- firstChild
- lastChild
- nextSibling
- previousSibling
ຜູ້ລູກຫຼັງຄາວາມ ແລະ ຄູ່ມູນຂອງຜູ້ລູກ:
ຄວາມຜິດທີ່ປະກອບສັນ DOM ແມ່ນຄິດວ່າປະກອບສັນບັນທຶກຄູ່ມູນ.
ຄວາມນັບບັນຫາ:
<title id="demo">ການສອນ DOM</title>
ປະກອບສັນ <title> (ຕາມຄວາມນັບບັນຫາກ່ວາ): ບໍ່ມີ:ຄູ່ມູນ.
ມີຄູ່ມູນວ່າ "ການສອນ DOM":ຜູ້ລູກຂອງຄູ່ມູນ:.
ຄູ່ມູນຂອງຜູ້ລູກຂອງຫຼັກຕົວຢູ່: innerHTML ສະຖານທີ່ເຂົ້າເຖິງ:
var myTitle = document.getElementById("demo").innerHTML;
ການເຂົ້າເຖິງ innerHTML ສະຖານທີ່ທຽບກັບການເຂົ້າເຖິງຜູ້ລູກທຳອິດ: nodeValue:
var myTitle = document.getElementById("demo").firstChild.nodeValue;
ກໍ່ສາມາດເຂົ້າເຖິງຜູ້ລູກທຳອິດ:
var myTitle = document.getElementById("demo").childNodes[0].nodeValue;
ບົດຮູບທີ່ຖືກເລືອກຄັ້ງທີ່: <h1> ປະກອບສັນຂອງປະກອບສັນ: <p> ໃນປະກອບສັນ:
ຄວາມນັບບັນຫາ 1
<html>
<body>
<h1 id="id01">ບົດຮູບຕະຫຼອດຄັ້ງທຳອິດ</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
</script>
</body>
</html>
ຄວາມນັບບັນຫາ 2
<html>
<body>
<h1 id="id01">ບົດຮູບຕະຫຼອດຄັ້ງທຳອິດ</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>
ຄວາມນັບບັນຫາ 3
<html>
<body>
<h1 id="id01">ບົດຮູບຕະຫຼອດຄັ້ງທຳອິດ</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>
InnerHTML
ໃນການຮຽນນີ້ພວກເຮົານຳໃຊ້ innerHTML ຊອກບັນດາຂະນະກຳລັງຂຽນຂອງບັນດາຫົວຂໍ້ HTML.
ແຕ່ວ່າການຮຽນຮູ້ກັບວິທີອື່ນໆຈະຊ່ວຍໃຫ້ເຂົາເຈົ້າເຂົ້າໃຈກ່ຽວກັບຂອບແຂງຂອງ DOM ແລະການອອກໄປຫາຫົວຂໍ້.
ຫົວຂໍ້ທີ່ຫົວເຫນືອຂອງ DOM
ມີບັນດາບັນດາຫົວຂໍ້ພິເສດທີ່ອະນຸຍາດສະແດງບັນດາຫົວຂໍ້ທົ່ວໄປ:
- document.body - ບັນດາຫົວຂໍ້ຂອງບັນດາຫົວຂໍ້ຂອງເອກະສານ
- document.documentElement - ບັນດາຫົວຂໍ້ທົ່ວໄປຂອງເອກະສານ
ຄວາມນິຍົມ
<html> <body> <p>Hello World!</p> <div> <p>DOM ແມ່ນມີປະສິດທິພາບ!</p> <p>ຄວາມນິຍົມນີ້ສະແດງວ່າ <b>document.body</b> ປະສົມປະກອບ.</p> </div> <script> alert(document.body.innerHTML); </script> </body> </html>
ຄວາມນິຍົມ
<html> <body> <p>Hello World!</p> <div> <p>DOM ແມ່ນມີປະສິດທິພາບ!</p> <p>ຄວາມນິຍົມນີ້ສະແດງວ່າ <b>document.documentElement</b> ປະສົມປະກອບ.</p> </div> <script> alert(document.documentElement.innerHTML); </script> </body> </html>
nodeName ປະສົມປະກອບ
nodeName ບັນດາຫົວຂໍ້ມີຄວາມນິຍົມຂອງບັນດາຫົວຂໍ້.
- nodeName ເປັນທີ່ສາມາດອ່ານໄດ້ພຽງພໍ.
- nodeName ມີຄວາມນິຍົມຂອງຊື່ບັນດາຫົວຂໍ້.
- nodeName ຂອງບັນດາຫົວຂໍ້ມີຄວາມນິຍົມຂອງຊື່ບັນດາບັນດາອັນດັບ.
- nodeName ຂອງບັນດາຫົວຂໍ້ມີຄວາມນິຍົມ #text
- nodeName ຂອງບັນດາຫົວຂໍ້ແມ່ນ #document
ຄວາມນິຍົມ
<h1 id="id01">ບັນຊີເວບຂອງຂ້ອຍຄັ້ງທຳອິດ</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>
ຄໍາເຫັນ:nodeName ມີຄວາມນິຍົມຂອງບັນດາຫົວຂໍ້ຂອງ HTML ອັດສະນະທີ່ບາງການຄິດ.
nodeValue ປະສົມປະກອບ
nodeValue ບັນດາຫົວຂໍ້ມີຄວາມນິຍົມຂອງບັນດາຫົວຂໍ້.
- ບັນດາຫົວຂໍ້ບັນດາອັນດັບມີຄວາມນິຍົມ undefined.
- ບັນດາຫົວຂໍ້ຂອງບັນດາອັນດັບມີຄວາມນິຍົມຂອງຂະນະກຳລັງຂຽນ.
- ບັນດາຫົວຂໍ້ບັນດາອັນດັບມີຄວາມນິຍົມຂອງບັນດາບັນດາອັນດັບທີ່ມີຄວາມນິຍົມ.
ປະສົມປະກອບ nodeType
nodeType ປະສົມປະກອບຂອງບັນດາອັນດັບຈະມີຄວາມຮູບຮ່າງຂອງບັນດາຫົວຂໍ້。nodeType ເປັນທີ່ສາມາດອ່ານໄດ້ພຽງພໍ。
ຄວາມນິຍົມ
<h1 id="id01">ບັນຊີເວບຂອງຂ້ອຍຄັ້ງທຳອິດ</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>
ຄວາມສຳຄັນຂອງປະສົງ nodeType ���ອາດເປັນ:
| ຫຼັກ | ຊະນິດ | ຄວາມປະສົງ |
|---|---|---|
| ELEMENT_NODE | 1 | <h1 class="heading">W3School</h1> |
| ATTRIBUTE_NODE | 2 | class = "heading" (ຖືກຖອນ) |
| TEXT_NODE | 3 | W3School |
| COMMENT_NODE | 8 | <!-- ນີ້ແມ່ນຄຳສັງເກດ --> |
| DOCUMENT_NODE | 9 | HTML ສະບັບແບບ (ເປັນພໍ່ <html>) |
| DOCUMENT_TYPE_NODE | 10 | <!Doctype html> |
Type 2 ໃນ HTML DOM ໄດ້ຖືກຖອນ. XML DOM ບໍ່ຖືກຖອນ.
- ກັບຄືນໜຶ່ງວັນ ຜູ້ຟັງເຫດໃນ DOM
- ອີກໜຶ່ງວັນ ຫຼັກ DOM
