de carlos da costa

Cum se manipulează DOM în Vanilla JavaScript

Cum se manipuleaza DOM in Vanilla JavaScript

Deci, ați învățat variabile, structuri de selecție și bucle. Acum este timpul să învățați despre manipularea DOM și să începeți să faceți câteva proiecte JavaScript minunate.

În acest tutorial, vom învăța cum să manipulăm DOM cu JavaScript vanilat. Fără alte întrebări, să sărim direct în el.

1. Primul lucru pe primul loc

Înainte de a ne scufunda în codificare, să învățăm ce este cu adevărat Dom:

Modelul de obiect document (DOM) este o interfață de programare pentru documente HTML și XML. Reprezintă pagina, astfel încât programele să poată schimba structura, stilul și conținutul documentului. DOM reprezintă documentul ca noduri și obiecte. În acest fel, limbajele de programare se pot conecta la pagină. Sursă

Practic, atunci când un browser încarcă o pagină, creează un model de obiect al acelei pagini și o imprimă pe ecran. Modelul obiectului este reprezentat într-o structură de date în arbore, fiecare nod este un obiect cu proprietăți și metode, iar cel mai de sus nod este obiectul document.

Un limbaj de programare poate fi folosit pentru a accesa și modifica acest model de obiect, iar această acțiune se numește manipulare DOM. Și vom face asta cu JavaScript, deoarece JS este minunat.

2. Tutorialul propriu-zis

Pentru tutorial, vom avea nevoie de două fișiere, unul index.html și celălalt manipulation.js.

<!-- Index.html file --><html>  <head>    <title>DOM Manipulation</title>  </head>  <body>     <div id="division"><h1 id="head"><em>DOM<em> manipulation</h1>      <p class="text" id="middle">Tutorial</p><p>Sibling</p>      <p class="text">Medium Tutorial</p>    </div>    <p class="text">Out of the div</p>    <!-- Then we call the javascript file -->    <script src="https://www.freecodecamp.org/news/dom-manipulation-in-vanilla-js-2036a568dcd9/manipulation.js"></script>  </body></html>

Deci, acolo avem fișierul nostru HTML și, după cum puteți vedea, avem un div cu id-ul diviziunii. În interiorul acestuia avem un element h1 și, în aceeași linie, veți înțelege de ce mai târziu, avem două elemente p și eticheta de închidere div. În cele din urmă avem un element ap cu o clasă de text.

2.1. Accesarea elementelor

Putem accesa fie un singur element, fie mai multe elemente.

2.1.1. Accesarea unui singur element

Pentru accesarea unui singur element, vom analiza două metode: getElementByID și querySelector.

// the method below selects the element with the id ofheadlet id = document.getElementById('head');
// the code below selects the first p element inside the first divlet q = document.querySelector('div p');
/* Extra code */// this changes the color to redid.style.color="red";// give a font size of 30pxq.style.fontSize="30px";

Acum am accesat două elemente, elementul h1 cu id-ul lui cap iar primul p element din interiorul div.

getElementById ia ca argument un id și querySelector ia ca argument un selector CSS și returnează primul element care se potrivește cu selectorul. După cum puteți vedea, am atribuit rezultatul metodelor în variabile și apoi am adăugat câteva stiluri la sfârșit.

2.1.2. Accesarea mai multor elemente

Când accesați mai multe elemente, se returnează o listă de noduri. Nu este o matrice, dar funcționează ca una. Deci, puteți să o parcurgeți și să utilizați proprietatea length pentru a obține dimensiunea listei de noduri. Dacă doriți să obțineți un anumit element, puteți folosi notația matricei sau metoda elementului. Le veți vedea în cod.

Pentru accesarea mai multor elemente vom folosi trei metode: getElementsByClassName, getElementsByTagName și querySelectorAll.

// gets every element with the class of textlet className = document.getElementsByClassName('text');
// prints the node listconsole.log(className);
/* prints the third element from the node list using array notation */console.log(className[2]);
/* prints the third element from the node list using the item function */console.log(className.item(2));
let tagName = document.getElementsByTagName('p');let selector = document.querySelectorAll('div p');

Codul pare a fi auto-explicativ, dar oricum îl voi explica pentru că sunt un tip drăguț. 🙂

În primul rând, folosim getElementsByClassName care ia ca argument un nume de clasă. Întoarce o listă de noduri cu fiecare element care are text ca clasă. Apoi imprimăm lista de noduri pe consolă. De asemenea, imprimăm al treilea element din listă folosind notație matrice si metoda articolului.

În al doilea rând, selectăm fiecare p element folosind metoda getElementsByTagName care ia un nume de etichetă ca argument și returnează o listă de noduri a acelui element.

În cele din urmă, folosim querySelectorAll metoda, care ia ca argument un selector CSS. În acest caz, este nevoie div p deci va returna o listă de noduri de p elemente din interiorul unei div.

Ca exercițiu practic, tipăriți toate elementele din nume eticheta și selector lista nodurilor și aflați dimensiunea acestora.

2.2. Traversând DOM

Până acum am găsit o modalitate de a accesa elemente specifice. Ce se întâmplă dacă dorim să accesăm un element lângă un element pe care l-am accesat deja sau să accesăm nodul părinte al unui element accesat anterior? Proprietatile firstChild, lastChild, parentNode, nextSibling, și precedentSibling poate face treaba asta pentru noi.

primul copil este folosit pentru a obține primul element copil al unui nod. ultimul copil, după cum ați ghicit, obține ultimul element copil al unui nod. parentNode este folosit pentru a accesa un nod părinte al unui element. următorul frate primește pentru noi elementul de lângă elementul deja accesat și precedentSibling obține pentru noi elementul anterior elementului deja accesat.

// gets first child of the element with the id of divisionlet fChild = document.getElementById('division').firstChild;console.log(fChild);
// gets the last element from element with the id of divisionlet lChild = document.querySelector('#division').lastChild;
// gets the parent node of the element with the id divisionlet parent = document.querySElector('#division').parentNode;console.log(parent);
// selects the element with the id of middlelet middle = document.getElementById('middle');// prints ond the console the next sibling of middleconsole.log(middle.nextSibling);

Codul de mai sus primește primul primul copil element al elementului cu id-ul diviziunii și apoi îl imprimă pe consolă. Apoi capătă ultimul copil element din același element cu id-ul diviziunii. Apoi capătă parentNode a elementului cu id-ul diviziunii și îl imprimă pe consolă. În cele din urmă, selectează elementul cu id-ul de mijloc și îl imprimă următorul frate nodul.

Majoritatea browserelor tratează spațiile albe dintre elemente ca noduri de text, ceea ce face ca aceste proprietăți să funcționeze diferit în diferite browsere.

2.3. Obțineți și actualizați conținutul elementului

2.3.1. Setarea și obținerea de conținut text

Putem obține sau seta conținutul text al elementelor. Pentru a realiza această sarcină vom folosi două proprietăți: Valoare nod și textContent.

Valoare nod este folosit pentru a seta sau a obține conținutul text al unui nod text. textContent este folosit pentru a seta sau a obține textul unui element care conține.

// get text with nodeValuelet nodeValue = document.getElementById('middle').firstChild.nodeValue;console.log(nodeValue);
// set text with nodeValuedocument.getElementById('middle').firstChild.nodeValue = "nodeValue text";
// get text with textContentlet textContent = document.querySelectorAll('.text')[1].textContent;console.log(textContent);
// set text with textContentdocument.querySelectorAll('.text')[1].textContent="new textContent set";

Ai observat diferența dintre Valoare nod și textContent?

Dacă vă uitați cu atenție la codul de mai sus, veți vedea acest lucru pentru ca noi să obținem sau să setăm textul Valoare nod, mai întâi a trebuit să selectăm nodul de text. În primul rând, am primit elementul cu mijloc id, atunci avem primul copil care este nodul de text, apoi am primit Valoare nod care a returnat cuvântul Tutorial.

Acum cu textContent, nu este nevoie să selectăm nodul de text, tocmai am obținut elementul și apoi l-am obținut textContent, fie pentru a seta și pentru a obține textul.

2.3.2. Adăugarea și eliminarea conținutului HTML

Puteți adăuga și elimina conținut HTML în DOM. Pentru aceasta, vom analiza trei metode și o singură proprietate.

Să începem cu HTML interioară proprietate, deoarece este cel mai simplu mod de a adăuga și a elimina conținut HTML. HTML interioară poate fi folosit pentru a obține sau seta conținut HTML. Dar aveți grijă când utilizați innerHTML pentru a seta conținut HTML, deoarece elimină conținutul HTML din interiorul elementului și îl adaugă pe cel nou.

document.getElementById('division').innerHTML =`<ul>  <li>Angular</li>  <li>Vue</li>  <li>React</li></ul>`;

Dacă rulați codul, veți observa că orice altceva din div cu ID-ul diviziunii va dispărea și lista va fi adăugată.

Putem folosi metodele: createElement (), createTextNode (), și appendChild () Pentru a rezolva această problemă.

createElement este folosit pentru a crea un nou element HTML. creatTextNode utilizat pentru a crea un nod text, iar appendChild este utilizat pentru a adăuga un element nou într-un element părinte.

//first we create a new p element using the creatElementlet newElement = document.createElement('p');/* then we create a new text node and append the text node to the element created*/let text = document.createTextNode('Text Added!');newElement.appendChild(text);
/* then we append the new element with the text node into the div with the id division.*/document.getElementById('division').appendChild(newElement);

Există, de asemenea, o metodă numită removeChild folosit pentru a elimina elemente HTML.

// first we get the element we want to removelet toBeRemoved = document.getElementById('head');// then we get the parent node, using the parentNOde propertylet parent = toBeRemoved.parentNode;/* then we use the removeChild method, with the element to be removed as a parameter.*/parent.removeChild(toBeRemoved);

Deci, mai întâi obținem elementul pe care dorim să-l eliminăm, apoi obținem nodul său părinte. Apoi am apelat la metoda removeChild pentru a elimina elementul.

2.4. Nod atribut

Acum știm cum să gestionăm elemente, deci să învățăm cum să gestionăm atributele acestor elemente. Există câteva metode precum GetAttribute, setAttribute, hasAttribute, removeAttribute, și unele proprietăți precum numele clasei și id.

getAttribute după cum sugerează și numele său, este folosit pentru a obține un atribut. La fel ca numele clasei, numele id-ului, href-ul unui link sau orice alt atribut HTML.

setAttribute este folosit pentru a seta un nou atribut unui element. Este nevoie de două argumente, mai întâi atributul și al doilea numele atributului.

hasAttribute folosit pentru a verifica dacă există un atribut, ia un atribut ca argument.

removeAttribute folosit pentru a elimina un atribut, ia un atribut ca argument.

Id această proprietate este utilizată pentru a seta sau a obține id-ul unui element.

Numele clasei este folosit pentru a seta sau pentru a obține clasa unui element.

// selects the first divlet d = document.querySelector('div');// checks if it has an id attribute, returns true/falseconsole.log('checks id: '+d.hasAttribute('id'));// set a new class attributed.setAttribute('class','newClass');// returns the class nameconsole.log(d.className);

Știu că sunt un tip bun, dar acest cod se explică de la sine.

Concluzie

Aia este! Am învățat atât de multe concepte, dar există mai multe de învățat despre manipularea DOM. Ceea ce am acoperit aici vă oferă o bază bună.

Mergeți mai departe și exersați și creați ceva nou pentru a consolida aceste noi cunoștințe.

Bună ziua, codificare bună.