Z DOM HTML, można poruszać się za pomocą węzła drzewa relacje węzłów.
Węzły DOM
Zgodnie ze standardem W3C HTML DOM, wszystko w dokumencie HTML jest węzłem:
- Cały dokument jest dokumentem węzła
- Każdy element HTML jest wierzchołkiem elementu
- Tekst wewnątrz elementów HTML są węzły tekstowe
- Każdy atrybut HTML jest węzłem atrybutu
- Wszystkie komentarze są węzły komentarz
Z DOM HTML, wszystkie węzły w drzewie węzłów można uzyskać przez JavaScript.
Nowe węzły mogą być tworzone i wszystkie węzły mogą być modyfikowane lub usuwane.
Relacje node
Te węzły w drzewie węzeł posiada hierarchiczny stosunek do siebie.
Określenia rodzic, dziecko, rodzeństwo i są używane do opisania relacji.
- W drzewie węzłów, górny węzeł nazywa się główny (lub węzeł główny)
- Każdy węzeł ma dokładnie jedno z rodziców, z wyjątkiem korzenia (co ma rodzic)
- Węzeł może mieć liczby dzieci
- Rodzeństwo (rodzeństwo) są węzły z tego samego rodzica
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
Z HTML powyżej można przeczytać:
- <html> jest węzeł główny
- <html> nie ma rodziców
- <html> jest rodzicem <head> i <body>
- <head> jest pierwszym dzieckiem <html>
- <body> jest ostatnim dzieckiem <html>
i:
- <head> ma jedno dziecko: <title>
- <title> ma jedno dziecko (węzeł tekstowy): "DOM Tutorial"
- <body> ma dwoje dzieci: <h1> i <p>
- <h1> ma jedno dziecko: "DOM Lekcja pierwsza"
- <p> ma jedno dziecko: "Hello world!"
- <h1> i <p> są rodzeństwem
Poruszanie się pomiędzy węzłami
Można użyć następujących właściwości węzła, aby poruszać się między węzłami z JavaScript:
- parentNode
- childNodes[ nodenumber ]
- firstChild
- lastChild
- nextSibling
- previousSibling
Ostrzeżenie !
Częstym błędem w przetwarzaniu Dom znajduje się spodziewać węzeł elementu, aby zawierał tekst.
W tym przykładzie:<title> DOM Tutorial </title> węzeł elementu <title> nie zawiera tekstu.Zawierawęzeł tekstowy z wartością "DOM Tutorial".
Wartość węzła tekstu można uzyskać poprzez węzła innerHTML mienia, lub nodeValue .
Child węzłów i wartości węzłów
Oprócz innerHTML nieruchomości, można również użyć childNodes i nodeValue właściwości, aby uzyskać zawartość elementu.
Poniższy przykład pobiera wartość węzła na <h1> elementu i kopie go w <p> element:
Przykład
<html>
<body>
<h1 id="intro">My First Page</h1>
<p id="demo">Hello!</p>
<script>
var myText =
document.getElementById("intro").childNodes[0].nodeValue;
document.getElementById("demo").innerHTML =
myText;
</script>
</body>
</html> Spróbuj sam " W powyższym przykładzie, getElementById jest metodą, natomiast childNodes i nodeValue są właściwości.
W tym tutorialu użyjemy innerHTML właściwość. Jednak nauka powyższej metody jest przydatny dla zrozumienia struktury drzewa i nawigację DOM.
Stosując firstChild własności są takie same, jak przy użyciu childNodes[0] :
Przykład
<html>
<body>
<h1 id="intro">My First Page</h1>
<p id="demo">Hello World!</p>
<script>
myText = document.getElementById("intro").firstChild.nodeValue;
document.getElementById("demo").innerHTML = myText;
</script>
</body>
</html> Spróbuj sam " DOM Węzły korzeniowe
Istnieją dwa specjalne właściwości, które umożliwiają 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>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.body</b> property.</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</body>
</html> Spróbuj sam " Przykład
<html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.documentElement</b> property.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html> Spróbuj sam " nodeName nieruchomości
nodeName właściwość określa nazwę węzła.
- nodeName jest tylko do odczytu
- nodeName od węzła elementów jest taka sama jak nazwa znacznika
- nodeName od węzła atrybutu jest nazwa atrybutu
- nodeName węzła tekstowego jest zawsze #text
- nodeName węzła dokumentu jest zawsze #document
Uwaga: nodeName zawsze zawiera wielką nazwę znacznika elementu HTML.
nodeValue nieruchomości
nodeValue właściwość określa wartość węzła.
- nodeValue dla węzłów elementów jest niezdefiniowany
- nodeValue dla węzłów tekstowych jest sam tekst
- nodeValue dla węzłów atrybutu jest wartość atrybutu
nodeType nieruchomości
nodeType właściwość zwraca typ węzła. nodeType jest tylko do odczytu.
Najważniejsze rodzaje węzłów są:
| typ elementu | NodeType |
|---|---|
| Element | 1 |
| Attribute | 2 |
| Text | 3 |
| Comment | 8 |
| Document | 9 |