Med HTML DOM kan du navigera i nodträdet med hjälp av nod relationer.
Enligt W3C HTML DOM-standarden är allt i ett HTML-dokument en nod:
Hela dokumentet är en dokumentnod
Varje HTML-element är en elementnod
Texten inuti HTML-element är textnoder
Varje HTML-attribut är en attributnod (utfasad)
Alla kommentarer är kommentarsnoder
Med HTML DOM kan alla noder i nodträdet nås med JavaScript.
Nya noder kan skapas, och allt noder kan ändras eller tas bort.
Noderna i nodträdet har en hierarkisk relation till varandra.
Termerna förälder, barn och syskon används för att beskriva relationerna.
I ett nodträd kallas toppnoden roten (eller rotnoden)
Varje nod har exakt en förälder, förutom roten (som inte har någon förälder)
En nod kan ha ett antal barn
Syskon (bröder eller systrar) är noder med samma förälder
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
Från HTML-koden ovan kan du läsa:
><html>
är rotnoden
><html>
har inga föräldrar
><html>
är föräldern till <head>
och >< body>
<head>
är det första barnet till ><html>
><body>
är det sista barnet till ><html>
och :
<head>
har ett barn:
<title>
har ett underordnat (en textnod): "DOM Tutorial"
<body>
har två barn: ><h1>
och p>
<h1>
har ett barn: "DOM Lektion ett"
><p>
har ett barn: "Hej världen!"
<h1>
och ><p>
är syskon
Du kan använda följande nodegenskaper för att navigera mellan noder med JavaScript:
parentNode
barnnoder[nodnummer]
firstChild
lastChild
nextSibling
föregåendeSibling
Ett vanligt fel i DOM-behandling är att förvänta sig att en elementnod innehåller text.
<title
id="demo">DOM Tutorial</title>
Elementnoden <title>
(i exemplet ovan) innehåller inte text.
Den innehåller en textnod med värdet "DOM Tutorial".
Värdet på textnoden kan nås av nodens innerHTML
-egenskap:
myTitle = document.getElementById("demo").innerHTML;
Att komma åt innerHTML-egenskapen är detsamma som att komma åt nodeValue
av det första barnet:
myTitle = document.getElementById("demo").firstChild.nodeValue;
Att komma åt det första barnet kan också göras så här:
myTitle = document.getElementById("demo").childNodes[0].nodeValue;
Alla (3) följande exempel hämtar texten från ett ><h1>
-element och kopierar det till ett ><p>
-element:
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").innerHTML;
</script>
</body>
</html>
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
</script>
</body>
</html>
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>
I den här handledningen använder vi egenskapen innerHTML för att hämta innehållet i en HTML-element.
Däremot lärande de andra metoderna ovan är användbara för att förstå trädstrukturen och navigering av DOM.
Det finns två speciella egenskaper som tillåter åtkomst till hela dokumentet:
document.body
- Brödtexten i dokumentet
document.documentElement
- Hela dokumentet
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>
<p
id="demo"></p>
<script>
document.getElementById("demo").innerHTML
= document.body.innerHTML;
</script>
</body>
</html>
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = document.body.innerHTML;
</script>
</body>
</html>
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
document.documentElement.innerHTML;
</script>
</body>
</html>
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = document.documentElement.innerHTML;
</script>
</body>
</html>
Egenskapen nodeName
anger namnet på en nod.
nodeName är skrivskyddad
nodNamn på en elementnod är samma som taggnamnet
nodeNamn på ett attribut nod är attributnamnet
nodNamn på en textnod är alltid #text
nodNamn på dokumentnoden är alltid #dokument
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeName;
</script>
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>
</body>
</html>
Obs! nodnamn
innehåller alltid taggnamnet med versaler för ett HTML-element.
Egenskapen nodeValue
anger värdet på en nod.
nodeValue för elementnoder är null
nodeValue för textnoder är själva texten
nodeValue för attributnoder är attributvärdet
Egenskapen nodeType
är skrivskyddad. Den returnerar typen av en nod.
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeType;
</script>
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>
</body>
</html>
De viktigaste nodeType-egenskaperna är:
Node | Type | Example |
---|---|---|
ELEMENT_NODE | 1 | <h1 class="heading">W3Schools</h1> |
ATTRIBUTE_NODE | 2 | class = "heading" (deprecated) |
TEXT_NODE | 3 | W3Schools |
COMMENT_NODE | 8 | <!-- This is a comment --> |
DOCUMENT_NODE | 9 | The HTML document itself (the parent of <html>) |
DOCUMENT_TYPE_NODE | 10 | <!Doctype html> |
Typ 2 är utfasad i HTML DOM (men fungerar). Den är inte utfasad i XML DOM.