HTML DOM nawigacji
Poprzez DOM HTML, jesteś w stanie korzystać z węzła w drzewie nawigacji relacji węzła.
Lista węzła HTML DOM
getElementsByTagName () zwraca listę węzłów. Lista węzeł jest tablica węzła.
Poniższy kod wybrany dokument wszystkie <p> node:
Przykłady
Można je uzyskać przez następnej etykiety. Aby uzyskać dostęp do drugiego <p>, można napisać:
Spróbuj »
Uwaga:
Pod etykietą rozpoczyna się od 0.
Lista HTML DOM Node Długość
Atrybut długość określa liczbę węzłów w liście węzłów.
Można użyć właściwości length do listy węzłów pętli:
Przykłady
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}
Spróbuj »
Przykłady analizy:
- Uzyskaj wszystkie <p> węzeł elementu
- Wartość wyjściowa każdego <p> element węzła tekstowego
relacja nawigacyjny węzła
Można użyć trzy atrybuty węzła: parentNode firstChild i lastChild, poruszać się po strukturze dokumentu.
Rozważmy następujący fragment HTML:
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates node relationships.</p>
</div>
</body>
</html>
- Pierwsza <p> Element jest pierwszym dzieckiem elementu <body> (firstChild)
- <Div> to ostatni element podrzędny <body> (lastChild)
- <Body> jest pierwszy <p> i <div> węzeł nadrzędny elementu (parentNode)
firstChild nieruchomość może być używana w celu uzyskania dostępu elementy tekstu:
Przykłady
<body>
<p id="intro">Hello World!</p>
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
Spróbuj »
Węzeł główny DOM
Istnieją dwa specjalne atrybuty, można uzyskać dostęp do całej dokumentacji:
- document.documentElement - wszystkie dokumenty
- document.body - ciało dokumentu
Przykłady
<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 »
childNodes i nodeValue
Oprócz właściwości innerHTML, można również użyć childNodes i mienia nodeValue aby uzyskać zawartość elementu.
Poniższy kod pobiera id = "intro" to <p> wartości elementu:
Przykłady
<body>
<p id="intro">Hello World!</p>
<script>
var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>
Spróbuj »
W powyższym przykładzie, getElementById jest metodą, natomiast childNodes i nodeValue są właściwości.
W tym tutorialu użyjemy właściwości innerHTML. Jednak powyższa metoda uczenia pomaga nawigować strukturę drzewa DOM i zrozumienia.