Ultimele tutoriale de dezvoltare web
 

JavaScript HTML DOM Elemente

❮ Anterior Urmatorul capitol ❯

Această pagină vă învață cum să găsiți și elemente de acces HTML într-o pagină HTML.

Găsirea elementelor HTML

De multe ori, cu JavaScript, care doriți să manipuleze elemente HTML.

Pentru a face acest lucru, va trebui să găsească mai întâi elementele. Există câteva modalități de a face acest lucru:

  • Găsirea elementelor HTML cu id
  • Găsirea elementelor HTML după nume tag-ul
  • Găsirea elementelor HTML prin class nume
  • Găsirea elementelor HTML prin CSS selectoare
  • Găsirea elementelor HTML prin colecții de obiecte HTML

Găsirea HTML Element de Id

Cel mai simplu mod de a găsi un element HTML în DOM, este prin utilizarea elementului id .

Acest exemplu găsește elementul cu id="intro" :

Exemplu

var myElement = document.getElementById("intro");
Încearcă - l singur »

Dacă elementul este găsit, metoda va returna elementul ca un obiect (în myElement ).

În cazul în care elementul nu este găsit, myElement va conține nul.

Găsirea elementelor HTML prin Tag Nume

Acest exemplu găsește toate <p> elemente:

Exemplu

var x = document.getElementsByTagName("p");
Încearcă - l singur »

Acest exemplu găsește elementul cu id="main" , și apoi găsește toate <p> elemente din interiorul "main" :

Exemplu

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
Încearcă - l singur »

Găsirea elementelor HTML prin Class Nume

Dacă doriți să găsiți toate elementele HTML cu aceeași class de nume, utilizați getElementsByClassName() .

Acest exemplu returnează o listă a tuturor elementelor cu class="intro" .

Exemplu

var x = document.getElementsByClassName("intro");
Încearcă - l singur »

Elemente de constatare nume de clasă nu funcționează în Internet Explorer 8 și versiunile anterioare.

Găsirea elementelor HTML prin CSS Căutători

Dacă doriți să găsiți toate elementele HTML care se potrivește cu un selector CSS specificat ( id , class names, types, attributes, values of attributes, etc) de querySelectorAll() ( id , class names, types, attributes, values of attributes, etc) , utilizați querySelectorAll() metoda.

Acest exemplu returnează o listă a tuturor <p> elemente cu class="intro" .

Exemplu

var x = document.querySelectorAll("p.intro");
Încearcă - l singur »

querySelectorAll() metoda nu funcționează în Internet Explorer 8 și versiunile anterioare.

Găsirea elementelor HTML pe colecții de obiecte HTML

Acest exemplu găsește elementul de formular cu id="frm1" , în colecția forme și afișează toate valorile elementelor:

Exemplu

var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
Încearcă - l singur »

Următoarele obiecte HTML (and object collections) de (and object collections) sunt , de asemenea , accesibile:

Testați-te cu exerciții!

Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 »


❮ Anterior Urmatorul capitol ❯