JavaSript DOM Manipulation

Descoperirea Elementelor DOM
O pagina web este structurata dintr-un document ce contine atat text cat si etichete HTML. DOM-ul sau
Document Object Model este standardizat ca fiind structura paginii.
● DOM este si un API ce permite interactiunea cu structura unei pagini web. Cu javascript, putem
accesa structura paginii afisat in browser si o putem modifica.
● DOM reprezinta o pagina web structurata pe obiecte ierarhice, unde fiecare obiect corespunde
nodului ramificat a elementelor sub forma unui copac.
● Variabila “document” acceseaza radacina DOM si corespunde cu elementele <html> in sine.
● Obiectele DOM au proprietati si metode care pot fi manipulate cu Javascript. De exemplu, tipul
nod returneaza informatii de tip nod, nodurile parinte continand o colectie de noduri copiii.
Introducere
Deja stim ca o pagina web este un document care contine etichete precum titluri, paragrafe, link-uri etc. si
texte.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My web page</title>
</head>
<body>
<h1>My web page</h1>
<p>Hello! My name's Baptiste.</p>
<p>I live in the great city of <a href="https://en.wikipedia.org/wiki/Bor\
deaux">Bordeaux</a>.</p>
</body>
</html>
HTML defineste structura unei pagini web prin utilizarea de elemente in construirea blocurilor. HTML de
unul singur nu poate face ca o pagina web sa fie interactiva, din acest motiv avem nevoie de JavaScript.
Programatorii web folosesc JS pentru a face o pagina web dinamica si interactiva.
Structura unei pagini web

O pagina web are etichete care la randul lor contin alte etichete. Putem reprezenta o pagina web intr-o
forma ierarhica sub forma unui copac. Elementul <html> este elementul principal, parintele paginii sau
radacina documentului html (root). El la randul lui are 2 copii, <head> si <body> care la randul lor au alti
copii si tot asa.
Introducere in DOM
Fiecare entitate reprezinta un nod. Avem doua tipuri de noduri:
• Nodurile care corespund elementelor HTML (cele albastre). Sunt denumite ca fiind elemente de tip
nod si pot avea la randul lor subnoduri, numite noduri copil sau copii.
• Nodurile care corespund continutului de tip text al paginii (cele rosii). Acestea sunt numite noduri
text si nu au copii.
Accesarea DOM-ului
Intr-un exemplu anterior v-am aratat cum sa accesati variabila “document” care ne returneaza intregul
document HTML sub forma unei structuri arborescente. Noi putem parcuge elementele din interiorul
acelei variante, cu ajutorul unor metode built-in si le putem modifica cu ajutorul unor proprietati.
Pe codul de mai jos vom aplica metodele de selectare a elementelor:
<!doctype html>
<html>
<head>
</head>
<body>
<h1>My web page</h1>
<p class="text">Hello! My name's Baptiste.</p>
<p class="text">I live in the great city of <a href="https://en.wikipedia.org/wiki/Bor\
deaux" id="bordeauWebsite">Bordeaux</a>.</p>
<script src="script.js"></script>
</body>
</html>
Metodele folosite pentru accesarea unui element DOM:
• .getElementsByTagName() – cu ajutorul acestei metode putem selecta toate elementele din DOM
care au un tag anume. Tag-ul se va da ca si argument.
Exemplu:
Metoda a fost apelata pe variabila “document” si cu ajutorul ei am selectat toate elementele de tip
paragraf din pagina.
• .getElementsByClassName() – cu ajutorul acestei metode putem selecta toate elementele care au
o clasa anume. Clasa se va da ca si argument.
Exemplu:
Dupa cum putem observa am selectat toate elementele care contin clasa “text” si le-am memorat
intr-o variabila.
• .getElementByClassName() – functioneaza similar cu metoda anterioara, diferenta fiind ca
selecteaza primul element din pagina pe care-l gaseste si care contine acea clasa.
• .getElementById() – cu ajutorul acestei metode putem selecta elementul din pagina care are ID-ul
dat ca si argument.
Exemplu:
• .querySelector() si .querySelectorAll – aceasta metoda returneaza primul element gasit in pagina

care corespunde argumentului primit. Cu ajutorul ei putem selecta clase, id-uri, tag-uri etc. Prima
metoda este folosita in cazul in care vrem sa selectam un elemente si cea de a doua este folosita in
cazul in care dorim sa selectam toate elementele.
Exemplu:
Putem observa ca atunci cand dorim selectarea unui id sau a unei clase trecem si simbolul sugestiv
unui id sau a unei clase.
Obtinerea informatiilor despre elemente
DOM ne ofera deja informatiile pe care le selectam. Sa spunem ca avem urmatorul document:
<!doctype html>
<html>
<head>
</head>
<body>
<h1>Seven wonders of the world</h1>
<p>Do you know the seven wonders of the world?</p>
<div id="content">
<h2>Wonders from Antiquity</h2>
<p>This list comes to us from ancient times.</p>
<ul class="wonders" id="ancient">
<li class="exists">Great Pyramid of Giza</li>
<li>Hanging Gardens of Babylon</li>
<li>Lighthouse of Alexandria</li>
<li>Statue of Zeus at Olympia</li>
<li>Temple of Artemis at Ephesus</li>
<li>Mausoleum at Halicarnassus</li>
<li>Colossus of Rhodes</li>
</ul>
<h2>Modern wonders of the world</h2>117
Traverse the DOM
<p>This list was decided by vote.</p>
<ul class="wonders" id="new">
<li class="exists">Petra</li>
<li class="exists">Great Wall of China</li>
<Li class="exists">Christ the Redeemer</Li>
<Li class="exists">Machu Picchu</Li>
<li class="exists">Chichen Itza</li>
<li class="exists">Colosseum</li>
<li class="exists">Taj Mahal</li>
</ul>
<h2>References</h2>
<ul>
<li><a href="https://en.wikipedia.org/wiki/Seven_Wonders_of_the_Ancie\
nt_World">Seven Wonders of the Ancient World</a></li>
<li><a href="https://en.wikipedia.org/wiki/New7Wonders_of_the_World">\
New Wonders of the World</a></li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
Clase
O eticheta poate avea mai multe clase. Putem retrage toate clasele unui element cu ajutorul proprietatii
.classList.
// List of classes of the element identified by "ancient"

const classes = document.getElementById("ancient").classList;
console.log(classes.length); // 1 (elementul are doar o clasa)
console.log(classes[0]);
// "wonders"
Putem verifica daca un element detine o clasa prin apelarea metodei “.contains()”. In urma apelarii
metodei ni se va returna “true” sau “false”.
if (document.getElementById("ancient").classList.contains("wonders")) {
console.log("The element with ID 'ancient' has the class 'wonders'.");
} else {
console.log("The element with ID 'ancient' does not have the class 'wonders\
'.");
}
.style
Cu ajutorul proprietatii .style putem modifica inatisarea unui element HTML.
Exemplu:
const classes = document.getElementById("ancient");

classes.style.backgroundColor = "red";
Pentru mai multe informatii despre .style vizitati documentatia MDN:
https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style
Modificarea textului:
.textContent
Putem modifica textul dintr-un paragraf, titlu etc. cu ajutorul proprietatii .textContent
Exemplu:

classes.textContent = "Text modificat";
Putem chiar sa stocam textul dintr-un paragraf intr-o variabila.
let ancientText = classes.textContent;

console.log(ancientText);
// R: Text Modificat;
.innerHTML
O alta proprietate pe care o putem folosi este innerHTML. Aceasta proprietate modifica sau returneaza
continutul HTML corespunzator unui tag sau a unei clase/id.

classes.innerHTML = "Text modificat";
let ancientText = classes.innerHTML;

// R: Text Modificat;
In exemplul de mai sus avem acelasi rezultat ca si in cazul .textContent.
In exemplul de mai jos putem observa modificarile aduse prin folosirea .innerHTML
// List of classes of the element identified by "ancient"

classes.innerHTML = "<span style=\"color:green\"> Text modificat</span>";
let ancientText = classes.innerHTML;

// R: <span style="color:green"> Text modificat</span>
Modificarea structurii paginii
Vom folosi codul urmator pentru a vedea cum functioneaza modificarea structurii unei pagini:
<h3 class="beginning">Some languages</h3>

<div id="content">
<ul id="languages">
<li id="cpp">C++</li>
<li id="java">Java</li>
<li id="csharp">C#</li>
<li id="php">PHP</li>
</ul>
</div>
Cu ajutorul proprietatilor innerHTML, textContent, classList si a metodelor setAttribute putem modifica

informatii elementului DOM.
Setarea atributelor si proprietatilor

Putem adauga un id cu ajutorul metodei “.setAttribute()” . Cu ajutorul acestei metode, putem adauga
atribute elementelor, cum ar fi “ src, id, class, title, alt etc.”.
Primeste 2 argumente, primul fiind numele atributului si al doilea fiind valoarea lui.
// Definim id-ul atributului pentru primul titlu

document.querySelector("h3").setAttribute("id", "title");
Exista si proprietati pe care le putem actualiza in mod direct:
// Definim id-ul atributului pentru primul titlu

document.querySelector("h3").id = "title";
Modificarea claselor
Putem adauga o noua clasa unui element cu ajutorul metodei “.add()”. Intre paranteze vom adauga
numele clasei pe care vrem sa o adaugam elementului. Numele clasei va fi intre ghilimele.
const titleElement = document.querySelector("h3"); // Luam primul element ce folo

seste atributul h3
titleElement.classList.add("title");
Am aplicat metoda .add() variabilei classes in care este stocata proprietatea elementului cu id-ul
“ancient”.
Daca putem adauga o clasa inseamna ca putem si sa stergem una. Putem realiza asta cu ajutorul metodei
“.remove()” care primeste ca si argument clasa pe care dorim sa o stergem.
const titleElement = document.querySelector("h3"); // Luam primul element ce folo

seste atributul h3
titleElement.classList.remove("beginning");
Sa spunem ca avem un buton “Apasa-ma”. Vreau ca el sa-si schimbe culoarea daca este apasat o data si
daca il apas pentru a doua oara sa revina la culoarea initiala. Putem realiza acest efect foarte usor cu
ajutorul metodei “.toggle()”.
Atunci cand apelam metoda “.toggle()”. Ea verifica daca un element are clasa data ca si argument, in
cazul in care clasa nu exista pe acel element ea va fi pusa si in cazul in care ea exista pe acel element ea va
fi stearsa. In mod normal aceasta metoda este folosita in concordanta cu eventurile, despre ele vom vorbi
intr-o sedinta viitoare, dar este bine sa stiti ca exista si aceasta metoda.
classes.toggle("start");
Am observat ca putem modifica informatii afisate in pagina cu ajutorul proprietatilor si metodelor insa
putem modifica si structura unei pagini cu ajutorul metodelor.
Exemple de metode cu care putem modifica structura paginii:
• creatTextNode()
• createElement()
• appendChild()
• insertBefore()
• insertAdjacentHTML()
• replaceChild()
• removeChild()
Adaugarea unui nou element:

Adaugarea unui nou element in pagina poate fi realizata in 3 pasi:
• Crearea unui element nou

• Setarea proprietatilor elementului
• Inserarea lui in DOM
Crearea elementului:
Putem crea un element folosind metoda “.createElement()”. Aceasta metoda este folosita asupra
obiectului document. Metoda primeste ca si argument tagul elementului pe care vrem sa-l cream. Ea
returneaza elementul creat sub forma unui obiect, pe care-l memoram intr-o variabila.
Obs: Crearea unui element nu presupune si inserarea lui in DOM.

Exemplu:
const pythonElement = document.createElement("li"); //Creaza un element de tip li
Setarea proprietatilor elementului

Acum ca elementul este creat si stocat intr-o variabila, ii putem adauga atribute, continut textual etc.
// ...
pythonElement.id = "python";
// Define element ID
pythonElement.textContent = "Python";
Inserarea elementului in DOM

Sunt cateva tehnici pentru a insera un nou node in DOM. Cea mai folosita este apelarea metodei
“.appendChild()” asupra elementului pe care-l vrem ca parinte. Elementul adaugat va fi ultimul in lista de
elemente copil al nodului parinte.
In exemplul nostru, elementul parinte este “ul” care se identifica prin ajutorul id-ului “languages”:
// ...
document.getElementById("languages").appendChild(pythonElement); // Insert the new element into the DOM
Putem folosi metoda createTextNode() pentru a adauga un nod textual, aceasta metoda o putem folosi in
locul proprietatii .textContent.
Acest exemplu demonstreaza posibilitatea inserarii unui text la finalul nodului parinte:
const rubyElement = document.createElement("li"); // Cream un elemet "li"

rubyElement.id = "ruby"; // Defineste elementul Id
rubyElement.appendChild(document.createTextNode("Ruby")); // defineste textul
document.getElementById("languages").appendChild(rubyElement); // Insereaza un nou element in DOM.
Inlocuirea sau stergerea unui nod

In unele cazuri inserarea unui nod nou la finalul listei elementului parinte nu este ideala. In acest caz ne
putem folosi de metoda insertBefore(). Cu ajutorul ei putem lua ca referinta un alt element din lista
nodului parinte si sa adaugam noul element inaintea lui.
const perlElement = document.createElement("li"); // Create an "li" element

perlElement.id = "perl"; // Define element ID
perlElement.textContent = "Perl"; // Define its text content
// Insert the new element before the "PHP" node
document.getElementById("languages").insertBefore(perlElement, document.getElementById("php"));
O alta metoda pe care o putem folosi este cu ajutorul metodei insertAdjacentHTML().
Aceasta metoda permite alegerea mai multor locatii unde sa fie inserat noul element:
• Before begin
• After begin
• Before end
• After end
document.querySelector("h3").setAttribute("id", "title");
/*

<p>

foo

</p>

Urmatorul exemplu foloseste insertAdjacentHTML() pentru a adauga Javascript in partea de sus a limbajului
Modificare structurii paginii
*/
// Add an element to the beginning of a list
document.getElementById('languages').insertAdjacentHTML("afterBegin", '<li id\
="javascript">JavaScript</li>');
Un element poate fi inlocuit cu ajutorul metodei replaceChild(). In exemplul urmator demonstram cum
inlocuim “Perl” cu “Lisp”.
const lispElement = document.createElement("li"); // Create an li element

lispElement.id = "lisp";
// Define its ID
lispElement.textContent = "Lisp"; // Define its text content
// Replace the element identified by "perl" with the new element
document.getElementById("languages").replaceChild(lispElement, document.getElementById("perl"));
Performanta
Actualizand DOM-ul prin JavaScript duce la modificarile de tip compute catre noua pagina afisata.
Manipularile frecvente pot duce la incetinirea paginii si la scaderea performantei. Pentru a rezolva aceste
probleme trebuie sa accesam DOM-ul facand cat mai putine operatii.
O metoda este setarea proprietatilor pentru element inainte ca acesta sa fie inserat in DOM, acest lucru ne
ofera o performanta mai buna.
// Bad: DOM is updated multiple times

const newNode = document.createElement(...); // Create new element
parentNode.appendChild(newNode); // Add it to the DOM
newNode.id = ...; // Set some element properties
newNode.textContent = "...";
// ...
// Better: DOM is updated only once
const newNode = document.createElement(...); // Create new element
newNode.id = ...; // Set some element properties
newNode.textContent = "...";
// ...
parentNode.appendChild(newNode); // Add it to the DOM

JavaSript DOM Manipulation

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

JavaSript DOM Manipulation

Încărcat de

Drepturi de autor:

Formate disponibile

Descoperirea Elementelor DOM

Programatorii web folosesc JS pentru a face o pagina web dinamica si interactiva.

Structura unei pagini web

Pe codul de mai jos vom aplica metodele de selectare a elementelor:

Metodele folosite pentru accesarea unui element DOM:

• .querySelector() si .querySelectorAll – aceasta metoda returneaza primul element gasit in pagina

// List of classes of the element identified by "ancient"

const classes = document.getElementById("ancient");

Pentru mai multe informatii despre .style vizitati documentatia MDN:

const classes = document.getElementById("ancient");

Putem chiar sa stocam textul dintr-un paragraf intr-o variabila.

let ancientText = classes.textContent;

const classes = document.getElementById("ancient");

let ancientText = classes.innerHTML;

In exemplul de mai sus avem acelasi rezultat ca si in cazul .textContent.

// List of classes of the element identified by "ancient"

let ancientText = classes.innerHTML;

<h3 class="beginning">Some languages</h3>

Cu ajutorul proprietatilor innerHTML, textContent, classList si a metodelor setAttribute putem modifica

Setarea atributelor si proprietatilor

// Definim id-ul atributului pentru primul titlu

Exista si proprietati pe care le putem actualiza in mod direct:

// Definim id-ul atributului pentru primul titlu

const titleElement = document.querySelector("h3"); // Luam primul element ce folo

const titleElement = document.querySelector("h3"); // Luam primul element ce folo

Exemple de metode cu care putem modifica structura paginii:

Adaugarea unui nou element:

• Crearea unui element nou

Obs: Crearea unui element nu presupune si inserarea lui in DOM.

const pythonElement = document.createElement("li"); //Creaza un element de tip li

Setarea proprietatilor elementului

Inserarea elementului in DOM

const rubyElement = document.createElement("li"); // Cream un elemet "li"

Inlocuirea sau stergerea unui nod

const perlElement = document.createElement("li"); // Create an "li" element

const lispElement = document.createElement("li"); // Create an li element

// Bad: DOM is updated multiple times

S-ar putea să vă placă și