JavaScript HTML DOM 导航

Sa pamamagitan ng HTML DOM, maaari mong gamitin ang relasyon ng node upang magmaneho sa puno ng node.

DOM Nodes

Ayon sa W3C HTML DOM standard, ang lahat ng bagay sa HTML dokumento ay mga node:

  • Ang buong dokumento ay isang node ng dokumento.
  • Ang bawat HTML element ay isang node ng element.
  • Ang teksto sa loob ng HTML element ay isang node ng teksto.
  • Ang bawat HTML attribute ay isang node ng attribute.
  • Ang lahat ng komento ay mga node ng komento.
DOM HTML ต้นไม้

Sa pamamagitan ng HTML DOM, ang lahat ng node sa puno ng node ay maaring ma-access sa pamamagitan ng JavaScript.

Maaari mong lumikha ng bagong node, at magbabago o alisin ang lahat ng mga node.

Relasyon ng node

Ang mga node sa puno ng node ay may ilang antas ng relasyon sa isa't isa.

  • Ang mga termino (magulang, anak, at magkakapatid, parent, child, at sibling) ay ginagamit upang ilarawan ang mga relasyon na ito.
  • Sa puno ng node, ang pinakamataas na node ay tinatawag na root (walang magulang ang pinakamataas na node).
  • Ang bawat node ay may magulang, maliban sa ang pinakamataas (walang magulang ang pinakamataas na node).
  • Ang bawat node ay may ilang mga anak.
  • Ang magkakapatid (kapatid na lalaki o babae) ay mga node na may parehong magulang.
<html>
   <head>
       <title> Tutorial ng DOM </title>
   </head>
  <body>
       <h1>Pangunahing klase ng DOM</h1>
       <p>Hello world!</p>
   </body>
</html>
DOM HTML ต้นไม้

Maaari mong mabasa sa ibang impormasyon mula sa HTML na ito:

  • Ang <html> ay ang pangunahing node
  • Wala ang magulang ang <html>
  • Ang <html> ay magulang ng <head> at <body>
  • Isang <head> ang unang anak ng <html>
  • <body> ay huling anak ng <html>

Pati na rin:

  • <head> ay may isang anak: <title>
  • <title> ay may isang anak (node ng teksto): "DOM Tutorial"
  • <body> ay may dalawang anak: <h1> at <p>
  • <h1> ay may isang anak: "DOM Unang Paksisyon"
  • <p> ay may isang anak: "Hello world!"
  • <h1> at <p> ay kapwa

Mag-navigate sa pagitan ng mga node

Sa pamamagitan ng JavaScript, maaari mong gamitin ang mga sumusunod na property ng node upang mag-navigate sa pagitan ng mga node:

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Anak na node at halaga ng node

Ang isang karaniwang pagkakamali sa paggamit ng DOM ay ang paniniwala na ang elemento ay naglalaman ng teksto.

Mga halimbawa:

<title id="demo">DOM Tutorial</title>

（sa halimbawa sa itaas）na elemento na may <title> Hindi naglalaman ngTeksto.

Ito ay naglalaman ng teksto na may halaga na "DOM Tutorial"Node ng teksto.

Ang halaga ng teksto ng isang node ng teksto ay maaaring ma-access sa pamamagitan ng halaga ng node: innerHTML Gumamit ng mga sumusunod na property ng node upang makapasok sa mga ito:

var myTitle = document.getElementById("demo").innerHTML;

Ang pag-access ng property na innerHTML ay katumbas ng pag-access ng unang anak na node: nodeValue:

var myTitle = document.getElementById("demo").firstChild.nodeValue;

Maaari rin itong gawin sa paraan na ito para makapagsalika sa unang anak na node:

var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

Ang mga sumusunod na tatlong halimbawa ay kumukuha ng <h1> Kopyahin ang teksto ng elemento at ilagay sa <p> Sa elemento:

Mga halimbawa 1

<html>
<body>
<h1 id="id01">Aking unang pahina</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML  = document.getElementById("id01").innerHTML;
</script>
</body>
</html>

Try It Yourself

Mga halimbawa 2

<html>
<body>
<h1 id="id01">Aking unang pahina</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>

Try It Yourself

Mga halimbawa 3

<html>
<body>
<h1 id="id01">Aking unang pahina</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>

Try It Yourself

InnerHTML

Sa katutubong ito, gumagamit kami ng innerHTML Kumuha ng nilalaman ng HTML element.

Subalit, ang pag-aaral ng ibang mga paraan ay nakakatulong sa pag-unawa ng straktura ng puno ng DOM at ang paglalakbay nito.

Root na node ng DOM

Mayroong dalawang espesyal na property na nagbibigay-daan sa buong dokumento:

  • document.body - Ang body ng dokumento
  • document.documentElement - Kompleto na dokumento

Egemplo

<html>
<body>
<p>Hello World!</p>
<div>
<p>Ang DOM ay napakakapaki!</p>
<p>Ang egemplo na ito ay nagpapakita ng property na <b>document.body</b>。</p>
</div>
<script>
 alert(document.body.innerHTML);
</script>
</body>
</html>

Try It Yourself

Egemplo

<html>
<body>
<p>Hello World!</p>
<div>
<p>Ang DOM ay napakakapaki!</p>
<p>Ang egemplo na ito ay nagpapakita ng property na <b>document.documentElement</b>。</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html>

Try It Yourself

property na nodeName

nodeName ang property na ito ay nagtutukoy sa pangalan ng node.

  • ang nodeName ay basahin lamang.
  • ang nodeName ng element na node ay katumbas ng pangalan ng tag.
  • ang nodeName ng property na node ay ang pangalan ng property.
  • ang nodeName ng text na node ay palaging #text.
  • ang nodeName ng dokumentong node ay palaging #document.

Egemplo

<h1 id="id01">Aking unang pahina</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

Try It Yourself

Komento:ang nodeName ay palaging naglalaman ng malalim na pangalan ng HTML element sa maiikling titik.

property na nodeValue

nodeValue ang property na ito ay nagtutukoy sa halaga ng node.

  • ang nodeValue ng element na node ay undefined.
  • ang nodeValue ng text na node ay ang teksto ng teksto.
  • ang nodeValue ng property na node ay ang halaga ng property.

property na nodeType

nodeType ang property ay ibibigay ang uri ng node.nodeType ay basahin lamang.

Egemplo

<h1 id="id01">Aking unang pahina</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

Try It Yourself

The most important nodeType property is:

Node Type Example
ELEMENT_NODE 1 <h1 class="heading">W3School</h1>
ATTRIBUTE_NODE 2 class = "heading" (deprecated)
TEXT_NODE 3 W3School
COMMENT_NODE 8 <!-- This is a comment -->
DOCUMENT_NODE 9 The HTML document itself (parent of <html>)
DOCUMENT_TYPE_NODE 10 <!DOCTYPE html>

Type 2 is deprecated in HTML DOM. Not deprecated in XML DOM.