querySelector ()

Metoda documentului querySelector() returnează first element din document care se potrivește cu selectorul specificat sau cu grupul de selectoare. Dacă nu se găsesc potriviri, se returnează nul.

Conținut HTML:

<div id="id-example"></div>
<div class="class-example"></div>
<a>element-example</a> 

Conținut JavaScript:

document.querySelector("#id-example"); // Returns the element with id "id-example"
document.querySelector(".class-example"); // Returns the element with class "class-example"
document.querySelector("a"); // Returns the "a" element 

Notă querySelector() returnează primul element de potrivire, pentru a returna toate potrivirile, utilizați în schimb metoda querySelectorAll ().

<div id="example">First</div>
<div id="example">Second</div>
document.querySelector("#example"); // Returns only the element containing 'First'

HTML interioară

innerHTML prop returnează conținutul HTML din interiorul unui element selectat și, de asemenea, vă permite să definiți un nou conținut HTML.

Obțineți conținut element

<div id="demo">
  <p>Demo</p>
</div>
var element = document.getElementById("demo");
console.log(element.innerHTML) //logs <p>Demo</p>

Setați conținutul elementului

<div id="demo"></div>
var element = document.getElementById("demo");
element.innerHTML = "<div>Demo</div>";

HTML acum va fi ca.

<div id="demo">
  <div>Demo</div>
</div>

Considerații de securitate

Valoarea setată la innerHTML ar trebui să provină din surse de încredere, deoarece Javascript va pune orice în interiorul acelui element și va fi rulat ca HTML simplu.

ad-banner

Exemplu:

Setarea unui ”<script>alert();</script>Valoarea ”va face ca funcția Javascript„ alert () ”să fie declanșată:

var element = document.getElementById("demo");

element.innerHTML = "<script>alert();</script>";

Acest tip de atac este numit Cross Site Scripting sau XSS pe scurt.

Acesta este unul dintre cele mai comune moduri de a comite un atac XSS. Dacă vrei să înveți puțin mai mult și să înveți să te aperi împotriva ei, verificați această resursă.

getElementById ()

getElementById() metoda returnează elementul care are atributul id cu valoarea specificată. Este nevoie de un argument, care este un șir de identificare între majuscule și minuscule pentru elementul dorit.

Această metodă este una dintre cele mai frecvente metode în DOM HTML și este utilizată aproape de fiecare dată când doriți să manipulați sau să obțineți informații de la un element din documentul dvs. Iată un exemplu simplu de sintaxă:

Conținut HTML:

<div id="demo"></div>

Conținut JavaScript:

document.getElementById("demo"); // Returns the element with id "demo"

Dacă aveți mai multe elemente cu aceeași valoare de id (rea practică!), getElementById va returna primul element găsit:

<div id="demo">First</div>
<div id="demo">Second</div>
document.getElementById("demo"); // Returns the element with id "demo" containing 'First'

Mai multe informatii:

document.getElementById ()

Soluții alternative:

O alternativă frecvent utilizată la document.getElementById folosește un selector jQuery despre care citiți mai multe aici.

Mai multe informații despre DOM HTML

Cu DOM-ul HTML, JavaScript poate accesa și modifica toate elementele unui document HTML.

Când o pagină web este încărcată, browserul creează un Document Object Model al paginii.

Modelul HTML DOM este construit ca un arbore de obiecte:

Fiecare element din DOM este numit și nod.

<html>
<head>
  <title> My title </title>
</head>
<body>
  <a href="https://www.freecodecamp.org/news/html-dom-methods/#">My Link</a>
  <h1> My header </h1>
</body>
</html>

DOM-ul pentru HTML-ul de mai sus este după cum urmează:

Copac DOM

Cu modelul obiect, JavaScript primește toată puterea de care are nevoie pentru a crea HTML dinamic:

  • JavaScript poate modifica toate elementele HTML din pagină
  • JavaScript poate modifica toate atributele HTML din pagină
  • JavaScript poate modifica toate stilurile CSS din pagină
  • JavaScript poate elimina elementele și atributele HTML existente
  • JavaScript poate adăuga elemente și atribute HTML noi
  • JavaScript poate reacționa la toate evenimentele HTML existente în pagină
  • JavaScript poate crea noi evenimente HTML în pagină