MySQL Java JavaScript PHP Python HTML-CSS C-sharp

Căutarea elementelor pe o pagină; web

Obiectul document oferă o serie de metode pentru căutarea și gestionarea elementelor pe o pagină web:

  • getElementById(value): selectează elementul cu atributul id egal cu value. Dacă nu există un element cu acest identificator, se returnează null
  • getElementsByTagName(value): selectează toate elementele cu eticheta egală cu value. Returnează o listă de elemente (listă de tip NodeList), care este similară cu un array
  • getElementsByClassName(value): selectează toate elementele care au clasa value. Returnează o listă NodeList
  • getElementsByName(value): selectează toate elementele care se numesc value. Returnează o listă NodeList
  • querySelector(value): selectează primul element care corespunde selectorului CSS value
  • querySelectorAll(value): selectează toate elementele care corespund selectorului CSS value. Returnează o listă NodeList

Obținerea elementelor după id

De exemplu, să găsim un element după id:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
   <h1 id="header">Home Page</h1>
   <script>
       const headerElement = document.getElementById("header");
       console.log("Text: ", headerElement.innerText); // Text:  Home Page
   </script>
</body>
</html>

Folosind apelul document.getElementById("header"), găsim elementul cu id="header". Și prin proprietatea innerText se poate obține textul elementului găsit.

Este de menționat că, dacă elementul nu este găsit, atunci metoda returnează null. Prin urmare, înainte de a utiliza elementul, se recomandă verificarea acestuia pentru null.

Căutare după un anumit tag:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
   <h1>Home Page</h1>
   <p>Primul paragraf</p>
   <p>Al doilea paragraf</p>
   <script>
       const paragraphs = document.getElementsByTagName("p");

       for (p of paragraphs) {
           console.log(p.innerText);   // afișăm textul paragrafului
       }
   </script>
</body>
</html>

Folosind apelul document.getElementsByTagName("p"), găsim toate elementele de tip paragraf. Acest apel returnează o listă de tip NodeList, care în multe moduri este similară cu un array și care conține elementele găsite. Pentru a obține elemente individuale din această listă, se poate parcurge lista într-un ciclu.

Afișarea la consolă:

Primul paragraf
Al doilea paragraf

Dacă dorim să obținem doar primul element, putem accesa primul element al colecției găsite de obiecte.

const p = document.getElementsByTagName("p")[0];
console.log(p.innerText);

Pentru a itera prin lista, desigur, se pot folosi și alte tipuri de cicluri:

const paragraphs = document.getElementsByTagName("p");
for (let i = 0; i < paragraphs.length; i++) {
   console.log(paragraphs[i].innerText);
}

Obținerea elementelor după clasă

Obținerea elementelor după clasă:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
   <h1>Home Page</h1>
   <p class="text">Textul paginii</p>
   <p class="contacts">Email: supercorp@zmail.com</p> 
   <p class="contacts">Telefon: +1-234-567-8901</p>
   <script>
       const contacts = document.getElementsByClassName("contacts");

       for (contact of contacts) {
           console.log(contact.innerText);
       }
   </script>
</body>
</html>

În acest caz, selectăm toate elementele cu clasa "contacts". Afișarea în consolă:

Email: supercorp@zmail.com
Telefon: +1-234-567-8901

Căutarea elementelor după atributul name

Metoda getElementsByName() permite obținerea unei liste de elemente după nume - atributul name. Această metodă este aplicată elementelor de formular. De exemplu:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
   <form>
       <p>Limbaj:</p>
       <input type="radio" name="lang" value="Java">
       <label>Java</label>
       <br>
       <input type="radio" name="lang" value="JavaScript" checked>
       <label>JavaScript</label>
       <br>
       <input type="radio" name="lang" value="PHP">
       <label>PHP</label>
       <br>
   </form>
   <script>
   // selectăm toate elementele cu atributul name="lang"
   const langs = document.getElementsByName("lang");
   for (lang of langs) {
       console.log(lang.value);    // obținem valoarea atributului value
   }
   </script>
</body>
</html>

În acest caz, selectăm toate elementele a căror atribut name este egal cu "lang". În exemplul de mai sus, acestea sunt butoanele radio. Apoi, afișăm în consolă valoarea atributului value a fiecărui element obținut. Afișarea în consolă:

Java
JavaScript
PHP

Este de menționat că această metodă poate funcționa puțin diferit în browserele vechi, cum ar fi Internet Explorer sau Opera. În special, selectează elementul dacă nu doar atributul său name corespunde valorii transmise, ci și atributul id.

Căutarea elementelor după selectorul CSS

Alegerea după selectorul CSS:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
   <div class="annotation">
       <p>Annotația articolului</p>
   </div>
   <div class="text">
       <p>Primul paragraf</p>
       <p>Al doilea paragraf</p>
   </div>
   <script>
       const elem = document.querySelector(".annotation p");
       console.log(elem.innerText);    // Annotația articolului
   </script>
</body>
</html>

Expresia document.querySelector(".annotation p") găsește elementul care corespunde selectorului .annotation p. Dacă există mai multe elemente pe pagină care corespund selectorului, metoda va selecta primul dintre ele.

Pentru a obține toate elementele după selector, se poate utiliza în mod similar metoda document.querySelectorAll, care returnează o listă NodeList cu elementele găsite:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
   <div class="annotation">
       <p>Annotația articolului</p>
   </div>
   <div class="text">
       <p>Primul paragraf</p>
       <p>Al doilea paragraf</p>
   </div>
   <script>
       const elems = document.querySelectorAll(".text p");
       for (elem of elems) {
           console.log(elem.innerText);
       }
   </script>
</body>
</html>

Afișarea în browser:

Primul paragraf
Al doilea paragraf

Căutarea în elemente încorporate

În mod similar, putem căuta elemente nu numai în întregul document, ci și în elemente individuale pe o pagină web. De exemplu:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
   <div id="article">
       <h1 id="header">Pagina principală</h1>
       <p class="text">Textul paginii 1</p>
       <p class="text">Textul paginii 2</p>
   </div>
   <div id="footer">
       <p class="text">Textul subsolului</p>
   </div>
   <script>
   // obținem elementul cu id="article"
   const article = document.getElementById("article");
   // în acest element obținem toate elementele cu class="text"
   const articleContent = article.getElementsByClassName("text");
   for(p of articleContent){
       console.log(p);
   }
   </script>
</body>
</html>

În acest caz, mai întâi obținem elementul cu id="article", apoi în interiorul acestui element căutăm toate elementele cu class="text". Ca rezultat, consola va afișa două elemente:

- \<p class="text">Textul paginii 1\</p>
- \<p class="text">Textul paginii 2\</p>

Selectori CSS

O scurtă enumerare a selectorilor CSS de bază pe care îi putem folosi pentru a căuta elemente:

  • *: selectează toate elementele
  • E: selectează toate elementele de tipul E
  • [a]: selectează toate elementele cu atributul a
  • [a="b"]: selectează toate elementele în care atributul a are valoarea b
  • [a~="b"]: selectează toate elementele în care atributul a conține o listă de valori, una dintre acestea fiind b
  • [a^="b"]: selectează toate elementele în care valoarea atributului a începe cu b
  • [a$="b"]: selectează toate elementele în care valoarea atributului a se termină cu b
  • [a*="b"]: selectează toate elementele în care valoarea atributului a conține subșirul b
  • [a|="b"]: selectează toate elementele în care valoarea atributului a reprezintă o serie de valori separate prin liniuță, iar prima dintre aceste valori este b
  • :root: selectează elementul rădăcină al documentului
  • :nth-child(n): selectează al n-lea element încorporat (numărătoarea începe de la început)
  • :nth-last-child(n): selectează al n-lea element încorporat (numărătoarea începe de la sfârșit)
  • :nth-of-type(n): selectează al n-lea element frate de tipul type (numărătoarea începe de la început)
  • :nth-last-of-type(n): selectează al n-lea element frate de tipul type (numărătoarea începe de la sfârșit)
  • :first-child: selectează primul element încorporat
  • :last-child: selectează ultimul element încorporat
  • :first-of-type: selectează primul element frate de tipul type
  • :last-of-type: selectează ultimul element frate de tipul type
  • :only-child: selectează toate elementele care au doar un singur element încorporat
  • :only-of-type: selectează toate elementele frate de tipul type
  • :empty: selectează toate elementele care nu au elemente încorporate
  • :link: selectează toate linkurile care încă nu au fost
  • :visited: selectează toate linkurile care au fost deja accesate
  • :active: selectează toate linkurile care sunt active în acel moment (apăsate)
  • :hover: selectează toate linkurile peste care cursorul se află în acel moment
  • :focus: selectează toate elementele care au primit focus în acel moment
  • :target: selectează toate elementele la care se poate ajunge utilizând adrese URL în cadrul paginii
  • :lang(en): selectează toate elementele ale căror atribut lang are valoarea "en"
  • :enabled: selectează toate elementele de formular care sunt disponibile pentru interacțiune
  • :disabled: selectează toate elementele de formular care NU sunt disponibile pentru interacțiune
  • :checked: selectează toate căsuțele de bifat (checkbox-uri) și butoanele radio care sunt selectate
  • .class: selectează toate elementele cu clasa class
  • #id: selectează toate elementele cu identificatorul id
  • :not(s): selectează toate elementele care nu corespund selectorului s
  • E F: selectează toate elementele de tipul F care se găsesc în elementele de tipul E.
  • E > F: selectează toate elementele de tipul F care sunt imbricate în elementele de tipul E.
  • E + F: selectează toate elementele de tipul F care se află imediat după elementele de tipul E
  • E ~ F: selectează toate elementele de tipul F care sunt surori cu elementele de tipul E

Observații suplimentare

Este de menționat că dintre toate aceste metode, selecția după id este de obicei cea mai rapidă. În toate celelalte condiții, este preferabil să se aleagă metoda getElementById().

De asemenea, pentru optimizarea lucrului cu DOM-ul, pentru a evita reselecția acelorași elemente, este mai bine să le salvați în constante/variabile la prima selecție.

O serie de metode - getElementsByTagName(), getElementsByClassName(), getElementsByName(), querySelectorAll() - returnează o listă de elemente sub forma unui obiect NodeList, care este similar unui array și pe care îl putem parcurge pentru a obține fiecare element individual din acest set.

Cu toate acestea, metoda querySelectorAll() returnează o listă statică NodeList, în timp ce celelalte metode returnează o listă non-statică. Care este diferența? Atunci când se modifică elementele listei non-statice, toate modificările sunt aplicate imediat paginii web. Atunci când se modifică elementele din lista statică, modificările pot să nu fie aplicate imediat.

← Lecția anterioară Lecția următoare →