Cu HTML DOM, puteți naviga copac nod folosind relații de nod.
DOM Nodurile
În conformitate cu standardul W3C HTML DOM, totul într-un document HTML este un nod:
- Întregul document este un document de nod
- Fiecare element HTML este un nod element de
- Textul din interiorul elementelor HTML sunt noduri de text
- Fiecare atribut HTML este un nod atribut
- Toate comentariile sunt noduri comentariu
Cu HTML DOM, toate nodurile din arborele de nod poate fi accesat de JavaScript.
Noile noduri pot fi create și toate nodurile pot fi modificate sau șterse.
Relațiile Node
Nodurile din arborele de nod au o relație ierarhică între ele.
Termenii părinte, copil, frate si sunt folosite pentru a descrie relațiile.
- Într - un copac nod, nodul de sus este numit rădăcină (or root node)
- Fiecare nod are exact un părinte, cu excepția rădăcinii (care nu are nici un părinte)
- Un nod poate avea un număr de copii
- Siblings (brothers or sisters) sunt noduri cu același părinte
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
Din HTML de mai sus puteți citi:
- <html> este nodul rădăcină
- <html> nu are parinti
- <html> este părintele <head> și <body>
- <head> este primul copil al <html>
- <body> este ultimul copil al <html>
și:
- <head> are un copil: <title>
- <title> are un copil (a text node) : "DOM Tutorial"
- <body> are doi copii: <h1> și <p>
- <h1> are un copil: "DOM Lesson one"
- <p> are un copil: "Hello world!"
- <h1> și <p> sunt frați
Navigarea între Nodurile
Puteți utiliza următoarele proprietăți nod pentru a naviga între noduri cu JavaScript:
- parentNode
- childNodes[ nodenumber ]
- firstChild
- lastChild
- nextSibling
- previousSibling
Avertizare !
O eroare comună în procesarea DOM este de a aștepta un nod element conține text.
În acest exemplu: <title> DOM Tutorial </title> , nodul elementului <title> nu conține text. Acesta conține un text node de "DOM Tutorial" text node cu valoarea "DOM Tutorial" .
Valoarea nodului text poate fi accesat de către nodul de innerHTML proprietate, sau nodeValue .
Child Nodurile și valori Node
În plus față de innerHTML proprietate, puteți utiliza , de asemenea, childNodes și nodeValue proprietăți pentru a obține conținutul unui element.
Exemplul următor colectează valoarea nodului unui <h1> Element și copiază - l într - un <p> Element:
Exemplu
<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> Încearcă - l singur » In exemplul de mai sus, getElementById este o metodă, în timp ce childNodes și nodeValue sunt proprietăți.
In acest tutorial folosim innerHTML proprietate. Cu toate acestea, învățarea metoda de mai sus este utilă pentru înțelegerea structurii copac și navigarea DOM.
Utilizarea firstChild proprietatea este la fel ca folosind childNodes[0] :
Exemplu
<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> Încearcă - l singur » DOM Root Nodurile
Există două proprietăți speciale care permit accesul la documentul complet:
- document.body - Corpul documentului
- document.documentElement - Documentul complet
Exemplu
<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> Încearcă - l singur » Exemplu
<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> Încearcă - l singur » nodeName Proprietatea
nodeName Proprietatea specifică numele unui nod.
- nodeName este read-only
- nodeName unui nod element este același ca numele tag
- nodeName al unui nod atribut este numele atributului
- nodeName al unui nod de text este întotdeauna #text
- nodeName al nodului document este întotdeauna #document
Note: nodeName conține întotdeauna numele tag - ul majuscule al unui element HTML.
nodeValue Proprietatea
nodeValue Proprietatea specifică valoarea unui nod.
- nodeValue pentru nodurile element este nedefinit
- nodeValue pentru nodurile de text este textul propriu - zis
- nodeValue pentru nodurile atribut este valoarea atributului
nodeType Proprietatea
nodeType Proprietatea returnează tipul de nod. nodeType este doar pentru citire.
Cele mai importante tipuri de noduri sunt:
| tip de element | nodeType |
|---|---|
| Element | 1 |
| Attribute | 2 |
| Text | 3 |
| Comment | 8 |
| Document | 9 |