Nawigacja HTML DOM JavaScript

Przez HTML DOM, możesz używać relacji węzłów do nawigacji drzewa węzłów.

Węzeł DOM

Zgodnie z standardem W3C HTML DOM, wszystkie rzeczy w dokumencie HTML są węzłami:

  • Cały dokument jest węzłem dokumentu
  • Każdy element HTML jest węzłem elementu
  • Tekst wewnątrz elementu HTML jest węzłem tekstowym
  • Każda właściwość HTML jest węzłem właściwości
  • Wszystkie komenary są węzłami komentarzy
Drzewo HTML DOM

Dzięki HTML DOM, wszystkie węzły w drzewie węzłów mogą być dostępne za pomocą JavaScript.

Można tworzyć nowe węzły, a także modyfikować i usuwać wszystkie węzły.

Relacje węzłów

Węzły w drzewie węzłów mają pewien związek hierarchiczny.

  • Terminy (rodzic, dziecko i bliscy, parent, child oraz sibling) są używane do opisania tych relacji.
  • W drzewie węzłów, wierzchołkowy węzeł nazywa się korzeniem (węzeł korzeniowy).
  • Każdy węzeł ma węzeł rodzica, z wyjątkiem korzenia (węzeł korzeniowy nie ma węzła rodzica).
  • Węzły mogą mieć pewną liczbę dzieci
  • Bliscy (rodzeństwo lub siostry) to węzły posiadające tego samego rodzica.
<html>
   <head>
       <title>Podręcznik DOM</title>
   </head>
  <body>
       <h1>Lekcja pierwsza DOM</h1>
       <p>Hej, świat!</p>
   </body>
</html>
Drzewo HTML DOM

Z powyższego HTML-u możesz przeczytać następujące informacje:

  • <html> jest węzłem korzeniowym
  • <html> nie ma rodzica
  • <html> jest rodzicem <head> i <body>
  • <head> jest pierwszym dzieckiem <html>
  • <body> jest ostatnim potomkiem <html>

Również:

  • <head> ma jednego potomka: <title>
  • <title> ma jednego potomka (węzeł tekstowy): \
  • <body> ma dwóch potomków: <h1> i <p>
  • <h1> ma jednego potomka: \
  • <p> ma jednego potomka: \
  • <h1> i <p> są rodzeństwem

Nawigacja między węzłami

Dzięki JavaScript, można używać następujących właściwości węzłów do nawigacji między węzłami:

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

potomków i wartości węzłów

Częstym błędem w przetwarzaniu DOM jest mylenie elementów z tekstem.

Przykład:

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

（w powyższym przykładzie）węzła elementu <title> Nie zawieratekst.

Zawiera tekst o wartości \Węzeł tekstowy.

Wartość węzła tekstowego można uzyskać przez wartość węzła: innerHTML Dostęp do właściwości za pomocą:

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

Dostęp do właściwości innerHTML jest równoznaczny z dostępem do pierwszego potomka: nodeValue:

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

Można również w ten sposób uzyskać wartość pierwszego potomka:

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

Poniższe trzy przykłady pobierają <h1> Tekst elementu i skopiuj do <p> Element zawiera:

Przykład 1

<html>
<body>
<h1 id="id01">Mój pierwszy stron</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML  = document.getElementById("id01").innerHTML;
</script>
</body>
</html>

Spróbuj sam!

Przykład 2

<html>
<body>
<h1 id="id01">Mój pierwszy stron</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>

Spróbuj sam!

Przykład 3

<html>
<body>
<h1 id="id01">Mój pierwszy stron</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>

Spróbuj sam!

InnerHTML

W tym kursie używamy innerHTML Pobieranie zawartości elementu HTML.

Jednak, nauka powyższych innych metod pomoże zrozumieć strukturę drzewa i nawigację DOM.

Główny węzeł DOM

Istnieją dwa specjalne atrybuty, które pozwalają uzyskać dostęp do pełnego dokumentu:

  • document.body - Ciało dokumentu
  • document.documentElement - Pełny dokument

Przykład

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM jest bardzo przydatny!</p>
<p>W tym przykładzie pokazujemy właściwość <b>document.body</b>。</p>
</div>
<script>
 alert(document.body.innerHTML);
</script>
</body>
</html>

Spróbuj sam!

Przykład

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM jest bardzo przydatny!</p>
<p>W tym przykładzie pokazujemy właściwość <b>document.documentElement</b>。</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html>

Spróbuj sam!

Właściwość nodeName

nodeName Atrybut określa nazwę węzła.

  • Właściwość nodeName jest tylko do odczytu
  • Właściwość nodeName węzła elementu jest równa nazwie etykiety
  • Właściwość nodeName atrybutu jest nazwą atrybutu
  • Właściwość nodeName węzła tekstowego zawsze jest #text
  • Właściwość nodeName węzła dokumentu zawsze jest #document

Przykład

<h1 id="id01">Mój pierwszy stronę internetową</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

Spróbuj sam!

Uwaga:nodeName zawsze zawiera nazwę etykiety dużej litery HTML elementu.

Właściwość nodeValue

nodeValue Atrybut określa wartość węzła.

  • właściwość nodeValue węzła elementu jest undefined
  • właściwość nodeValue węzła tekstowego jest tekstem
  • właściwość nodeValue węzła jest wartością atrybutu

Właściwość nodeType

Właściwość nodeType zwraca typ węzła.Właściwość nodeType jest tylko do odczytu.

Przykład

<h1 id="id01">Mój pierwszy stronę internetową</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

Spróbuj sam!

Najważniejszą właściwością nodeType jest:

Węzeł Typ Przykład
ELEMENT_NODE 1 <h1 class="heading">W3School</h1>
ATTRIBUTE_NODE 2 class = "heading" (przestarzałe)
TEXT_NODE 3 W3School
COMMENT_NODE 8 <!-- To jest komentarz -->
DOCUMENT_NODE 9 Sam dokument HTML (rodzic <html>)
DOCUMENT_TYPE_NODE 10 <!Doctype html>

Typ 2 w HTML DOM jest przestarzały. W XML DOM nie jest przestarzały.