Cuprins
În prima parte a acestui tutorial vedeam cum este structurat și cum funcționează DOM, în acest lucru vom continua să lucrăm cu acesta pentru a-i extinde funcționalitățile și a putea manipula toate elementele documentului nostru HTML.Lucrul cu DOM
Pentru a accesa obiectul document utilizăm o variabilă globală de document; Această variabilă este unul dintre obiectele cheie pe care ni le creează browserul, deoarece prin acest obiect document putem accesa informațiile despre document în ansamblu și ne oferă acces individual la fiecare obiect document.
Ca întotdeauna, să vedem un exemplu cu care putem concilia teoria pe care o cunoaștem cu modul în care este aplicată în realitate.
ExempluExistă o mulțime de feluri diferite de fructe - există peste 500 de soiuri de banane numai. Până când adăugăm nenumăratele tipuri de mere, portocale și alte fructe cunoscute, ne confruntăm cu mii de alegeri.
Unul dintre cele mai interesante aspecte ale fructelor este varietatea disponibilă în fiecare țară. Locuiesc lângă Londra, într-o zonă cunoscută pentru merele sale.
Codul cu care folosim SOARE Este destul de scurt și simplu, cu toate acestea surprinde diferitele utilizări pe care i le putem da, vom explica codul parte cu parte pentru a vedea cum am folosit obiectele.
Una dintre cele mai simple acțiuni pe care le putem folosi este să obținem informații din documentul HTML cu care lucrăm, astfel încât prima linie pe care am plasat-o în codul nostru face exact acest lucru și o putem vedea:
document.writeln („URL: "+ document.URL);
În acest caz, citim valoarea proprietății document.URL, care returnează adresa URL a documentului curent, adică adresa URL utilizată de browser pentru a încărca documentul în care avem codul.
Vedem, de asemenea, cum folosim metoda writeln:
document.writeln („URL: "+ document.URL);
Această metodă adaugă pur și simplu conținut la sfârșitul documentului nostru HTML, în acest caz special începem prin adăugarea unei etichete și apoi proprietatea URL, cu aceasta am modificat deja structura și conținutul DOM.
Acum, următorul lucru pe care l-am făcut a fost să selectăm toate elementele care au eticheta p în document, pentru aceasta folosim următoarea linie:
var elems = document.getElementsByTagName ("p");
Cum vedem metoda getElementsByTagName Acesta este cel care ne servește scopului, în același timp, tot ceea ce colectează această metodă atribuim elemelor variabile.
În următoarea linie facem o iterație asupra variabilei elems, obținând obiectele atribuite, pentru fiecare pe care îl vom itera vom adăuga o linie de text cu id-ul său și mai târziu îi vom schimba atributele pentru a-i modifica aspectul .
for (var i = 0; i <elems.length; i ++) {document.writeln ("ID element:" + elems [i] .id); elems [i] .style.border = "negru dublu mediu"; elems [i] .style.padding = "4px"; }
După cum putem vedea, adăugăm o margine la fiecare element pe care l-am stocat în elemurile noastre variabile și adăugăm suplimentar o căptușeală.
După toate acestea, să vedem în cele din urmă cum arată toate acestea în browser:
V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv
MARI
