Najlepszy samouczek HTML DOM nawigacji W 2024 r. W tym samouczku możesz dowiedzieć się
Lista węzła HTML DOM,Przykłady,Lista HTML DOM Node Długość,Przykłady,relacja nawigacyjny węzła,Przykłady,Węzeł główny DOM,Przykłady,childNodes i nodeValue,Przykłady,
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
var
x=document.getElementsByTagName("p");
Można je uzyskać przez następnej etykiety. Aby uzyskać dostęp do drugiego <p>, można napisać:
y=x[1];
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
x=document.getElementsByTagName("p");
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:
<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
<html>
<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
<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 »
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
<html>
<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.