Document Object Model – DOM scripting

Sursa tutorial: cursul de Programare Web – Universitatea Politehnica Bucuresti, pentru informatii la zi sunteti rugati sa vizitati acest site.

Bine v-am gasit pe ItAssistant. Astazi va vom prezenta un tutorial legat despre DOM (Document Object Model) scripting.

DOM

Rolul Javascript in aplicatiile Web este de a oferi programatorului un mod de a interactiona cu browserul. Tot ce se intampla in pagina web incarcata in browser, se intampla prin executia de cod Javascript.

DOM-ul este o conventie cross-platform si cross-language de reprezentare a unui document XML, HTML sau XHTML ca obiect si de manipulare a elementelor sale constitutive. El a fost standardizat de W3C ca urmare a “browser wars” dintre IE si Netscape Navigator, de la sfarsitul anilor ’90. Principalul beneficiu adus de adoptarea standardului a fost faptul ca dezvoltatorii nu au mai fost nevoiti sa scrie codul de doua ori, odata pentru IE si odata pentru restul browserelor .

DOM-ul are mai multe parti:

• core: care cuprinde constructele folosite pentru manipularea nodurilor in toate documentele care pot fi parsate in DOM;
• html: ce contine constructe specifice manipularii documentelor HTML (si al caror suport variaza intre implementarile din diferite browsere);
• css: care se ocupa de componenta de reprezentare vizuala a paginilor web si de manipularea proprietatilor CSS

Mai multe detalii puteti vedea pe Mozilla Developer Core.

Figura de mai jos este un exemplu de DOM (x)HTML:

DOM-ul este alcatuit din noduri, care pot fi de mai multe tipuri. Dintre acestea, cele mai importante tipuri sunt element, atribut si text. Verificarea tipului unui nod se face verificand proprietatea nodeType. Valoarea returnata este un intreg, nu un string (1 pentru element, 2 pentru atribut, 3 pentru text). De asemenea, nodurile au o proprietate nodeValue prin care se poate manipula valoarea nodului.

Toate browserele ofera un API in Javascript de manipulare a DOM-ului.

Referentierea nodurilor

In browser, toate elementele din DOM au un parinte comun, obiectul document. Acesta, la randul lui, are ca parinte obiectul window, care se refera la fereastra(tabul) din browser in care e redat continutul paginii. Medodele enumerate mai jos sunt folosite pentru referentierea elementelor din DOM, pornind de la document. Ele fac parte din standardul W3C:

• document.getElementById() – intoarce elementul cu id-ul precizat.
• document.getElementsByName() – intoarce o lista ce contine elementele care au atributul name corespunzator.
• document.getElementsByTagName() – intoarce o lista ce contine elementele cu tagurile corespunzatoare din document.

Celelalte metode si proprietati ale obiectului document sunt prezentate pe W3Schools.

Un element, la randul sau, are proprietati si metode ce pot fi folosite pentru referentierea altor elemente cu care acesta relationeaza:

• element.childNodes[]
• element.firstChild
• element.lastChild
• element.nextSibling
• element.parentNode
• element.previousSibling
• element.hasChildNodes
• element.getAttribute(attrName)
• element.setAttribute(attrName, attrValue)

Toate metodele prezentate mai sus fac parte din DOM core si ar trebui sa existe in toate browserele moderne.

Crearea, duplicarea si inserarea nodurilor din/in DOM

Urmatoarele metode sunt folosite pentru a crea elemente si a le integra intr-un DOM existent:

• document.createElement(element), creaza un element de tipul tagului dat ca parametru functiei.
• document.createTextNode(text), creaza un nod text cu continutul dat de parametrul primit.
• node.cloneNode(deep), duplica nodul pe care este aplicata. Parametrul determina daca se vor clona si copiii nodului.
• element.appendChild(newNode), ataseaza newNode ca ultimul copil al element.
• element.insertBefore(newNode, targetNode), ataseaza newNode ca si copil al element, inaintea targetNode. targetNode trebuie sa fie copil al element. Daca targetNode nu e specificat, functia se comporta exact ca appendChild().
• element.removeChild(node), sterge node, daca este copil al element.
• element.replaceChild(newChild, oldChild), inlocuieste oldChild cu newChild.

Elementele pot fi create si cu ajutorul metodelor document.write() si element.innerHTML(). Problema lui document.write() este ca este legat de locul in document unde este apelat. Problema lui innerHTML este ca nu face parte din standard; desi poate parea mai facil sa il folositi, solutia eleganta este folosirea constructelor standard puse la dispozitie in DOM. De asemenea, daca serviti documentele XHTML mimetype-ul corect – application/xhtml+xml – nici document.write() nici element.innerHTML() nu vor mai functiona.

Evenimente

Evenimentele se pot seta inline, prin atribute ale elementelor HTML:

<img src="event.jpg" id="eventImage" onmouseover="if (this.getAttribute('src') == 'event.jpg') alert('ping');" />

Acest mod de a aplica evenimente elementelor din DOM nu este recomandat, deoarece amesteca structura unui document cu comportamentul sau si nu este deloc lizibil. Daca luam in considerare faptul ca in DOM evenimentele sunt de fapt proprietati ale elementelor, avem la dispozitie si urmatorul tip de constructie:

var image = document.getElementById('eventImage');
image.onmouseover = function () {
  if (this.getAttribute('src') == 'event.jpg') {
    alert('ping');
  }
}

Modul de functionare al evenimentelor din DOM Level 0 este simplu de inteles. Obiectul document capteaza un eveniment, il delega la elementul tinta unde va fi executat de handlerul ce ii corespunde.

DOM Level 2 a introdus un nou model pentru tratarea evenimentelor in browser. Modelul este suportat de majoritatea browserelor moderne (exceptie facand, bineinteles, IE 6 si 7).

Fata de tratarea simpla a evenimentelor, acest model aduce in plus propagarea evenimentului si la nodurile parinte. Evenimentul se desfasoara in trei faze:

• faza de capturare, in care evenimentele se propaga de la obiectul document in jos, spre tinta. Daca vreunul din parintii nodului tinta au vreun event handler specific inregistrat pentru aceasta faza el este declansat.
• executarea handlerelor pe nodul tinta
• propagarea “in sus” (bubbling), unde evenimentul se propaga de la tinta inapoi spre document, trecand din nou prin toti parintii.

In continuare va prezentam un exemplu de creare a unei galerii de imagini cu ajutorul functiilor DOM; Codul exemplului il puteti downloada de AICI

fisierul “1.css”

#slideshow_wrapper {
    position: relative;
    left: 21px;
    top: 5px;
}
 
#slideshow_set li {
    float: left;
}
 
#placeholder {
    float: right;
}

fisierul “index.html”

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<link rel="stylesheet" href="1.css" type="text/css"/>
 
<script type="text/javascript">
	function showPic(whichpic) {
		if (document.getElementById) {
			document.getElementById('placeholder').src = whichpic.href;
 
			return false;
		} else {
			return true;
		}
	}
</script>
 
<title>Image Gallery</title>
</head>
<body>
<h1>Snapshots</h1>
 
<div id="slideshow_wrapper">
	<ul id="slideshow_set">
		<li>
			<a onclick="return showPic(this)" href="images/superman.jpg">
				<img src="images/superman-thumbnail.jpg" alt="Superman" />
			</a>
		</li>
		<li>
			<a href="images/flash.jpg" onclick="return showPic(this)">
				<img src="images/flash-thumbnail.jpg" alt="Flash" />
			</a>
		</li>
		<li>
			<a href="images/green-lantern.jpg" onclick="return showPic(this)">
				<img src="images/green-lantern-thumbnail.jpg" alt="Green Lantern" />
			</a>
		</li>
		<li>
			<a href="images/batman.jpg" onclick="return showPic(this)">
				<img src="images/batman-thumbnail.jpg" alt="Batman" />
			</a>
		</li>
	</ul>
</div>
 
<img id="placeholder" src="images/superman.jpg" alt="" />
</body>
</html>

Codul exemplului il puteti downloada de AICI

Related posts:

1. Tutorial jQuery – Write Less, Do More
2. Aspecte cheie ale dezvoltarii aplicatiilor WEB
3. Prezentare (X)HTML, CSS si HTML 5
4. Cum convertesti un document .docx in .doc
5. Tutorial JavaScript – Introducere