(Model DOM)
Paginile HTML sunt implementate intern printr-un arbore care conține elementele HTML (și stilurile CSS) ca noduri. Acest arbore se numește Document-Object Model sau DOM. JavaScript are acces complet la DOM. Poate naviga prin arbore, modifica arborele și nodurile, de la simpla adăugare de noi noduri până la rearanjarea mai multor zone de pe pagină.
Un indiciu despre terminologie: Datorită apropierii sale de XML, HTML folosește termenul element; iar datorită structurii sale de arbore, DOM folosește termenul nod.
Noduri
La încărcarea în browser, documentul HTML este împărțit într-un arbore de noduri. De exemplu, aruncați o privire la următorul fragment HTML:
<div id="exampleDiv">Acesta este un<br>exemplu de fragment HTML.</div>
Prin DOM, JavaScript vede acest fragment ca patru noduri.
- div de la eticheta sa de început până la eticheta sa de sfârșit, este un nod. Acest div are o proprietate atribuită în eticheta sa de început. Această proprietate se numește „id” și are valoarea „exampleDiv”. Celelalte trei noduri din acest exemplu se află în interiorul div. Acestea sunt numite noduri copil ale lui div, deoarece div le conține. Invers, div este nodul părinte al acestora.
- Primul copil al lui div este un nod text, cu valoarea „Acesta este un”. Nodurile text conțin doar text; nu conțin niciodată etichete, motiv pentru care arborele se oprește aici.
- Eticheta br este un alt nod.
- Restul textului este un alt nod text.
Deoarece nodurile text și eticheta br au toate același părinte, se spune că sunt noduri surori.
Accesarea nodurilor
Puteți accesa nodurile arborelui DOM prin diverse metode. Una dintre ele este getElementById.
<!DOCTYPE html>
<html>
<head>
<script>
function go() {
"use strict";
const p = document.getElementById("p2");
alert(p.innerHTML);
}
</script>
</head>
<body id="body">
<p id="p1" style="background: aqua">one</p>
<p id="p2" style="background: green">two</p>
<p id="p3" style="background: red">three</p>
<button onclick="go()">Afișează al doilea paragraf</button>
</body>
</html>
Când se dă clic pe buton, se apelează funcția go. Aceasta accesează elementul cu ID-ul ‘p2’ și afișează conținutul acestuia.
Accesarea conținutului
Dacă doriți să accesați conținutul unui nod, puteți utiliza diferite proprietăți ale diferitelor clase: Node.textContent, HTMLElement.innerText sau Element.innerHTML. Dar acestea nu sunt egale; vă rugăm să luați în considerare diferențele. Pentru a menține exemplele noastre clare și simple, folosim Element.innerHTML ori de câte ori este posibil, deoarece este foarte apropiat de codul sursă HTML.
const exampleContent = document.getElementById("example").innerHTML;
Modificarea conținutului
După accesarea unui nod, puteți modifica conținutul acestuia atribuind o nouă valoare conținutului său.
<!DOCTYPE html>
<html>
<head>
<script>
function go() {
"use strict";
const p = document.getElementById("p2");
p.innerHTML = "Un alt text";
}
</script>
</head>
<body id="body">
<p id="p1" style="background: aqua">one</p>
<p id="p2" style="background: green">two</p>
<p id="p3" style="background: red">three</p>
<button onclick="go()">Afișează al doilea paragraf</button>
</body>
</html>
Când faceți clic pe buton, este apelată funcția go. Din nou, accesează elementul cu id-ul „p2” și îi modifică conținutul.
Modificarea structurii arborelui
JavaScript poate manipula structura arborelui DOM.
<!DOCTYPE html>
<html>
<head>
<script>
function go() {
"use strict";
// read 'body' node
const b = document.getElementById("body");
// read second 'p' node
const p = document.getElementById("p2");
// moves it to the end of 'body'
b.appendChild(p);
}
</script>
</head>
<body id="body">
<p id="p1" style="background: aqua">one</p>
<p id="p2" style="background: green">two</p>
<p id="p3" style="background: red">three</p>
<button onclick="go()">Move the second paragraph</button>
</body>
</html>
Când se dă clic pe buton, se apelează funcția go. Aceasta accesează elementele „body” și „p2”, apoi mută elementul „p” la sfârșitul elementului „body”.
(Include texte din Wikibooks traduse și adaptate de Nicolae Sfetcu)
Tehnologia informației și comunicațiilor în România: Analiza comparativă cu UE, impactul social, provocări și oportunități, direcții viitoare
Ideal Pentru: Decidenți politici, cercetători și pasionați de TIC pregătiți să exploreze potențialul României în sfera digitală europeană.
Telelucru (Telework)
Resursa ideală pentru profesioniști, angajatori și freelanceri care vor să navigheze eficient în era muncii la distanță.
Rolul social media în democrație, noul management public, și guvernanța electronică
O resursă esențială pentru oricine dorește să înțeleagă intersecția în evoluție dintre tehnologie și guvernare.
Descoperă mai multe la MultiMedia
Abonează-te ca să primești ultimele articole prin email.
Lasă un răspuns