Proprietățile și metodele încorporate ale obiectului document vă permit să găsiți orice element pe pagină și să efectuați acțiunile necesare cu acesta. De exemplu, fiecare element are o proprietate de stil. care vă permite să modificați stilurile CSS ale elementului.
Elemente de nivel superior
Puteți accesa direct elemente de nivel superior utilizând proprietățile obiectului document:
- document.documentElement - pentru a accesa un element .
- document.head - pentru a accesa elementul .
- document.body - pentru a accesa elementul .
Nu puteți accesa un element de pagină înainte de a apărea în browser.
Structura DOM a documentului este creată pe măsură ce pagina este afișată pe ecran. Dacă elementul nu este deja afișat în browser, atunci acesta nu este în arborele DOM. În consecință, acest element nu poate fi accesat. Când se execută următorul script, nu se întâmplă nimic:
Acest lucru se datorează faptului că în momentul executării elementului script
nu există.Rularea scriptului ar trebui să înceapă numai după afișarea elementului care trebuie modificat.
Găsirea elementelor
Pentru a accesa orice element al paginii din interfața DOM, sunt introduse metode de căutare speciale. Căutarea poate fi efectuată pe diferiți parametri ai elementelor, deci cu ele puteți găsi orice element.
getElementById ()
Obiectul document are o metodă built-in getElementById (). Se caută elementul cu identificatorul său unic de identificare.
document.getElementById (identifier) identifier Un șir care conține un identificator unic.
Lorem ipsum dolor.
Deleniti sta veniam.
Lorem ipsum dolor.
Deleniti sta veniam.
Operarea cu variabile globale poate duce la erori în program. Cu cât este mai corectă utilizarea document.getElementById ().
Această metodă funcționează foarte repede, deoarece browserul însuși creează linkuri către elementele cu atributul id.
Pentru ca căutarea id să funcționeze corect, identificatorul trebuie să fie într-adevăr unic. Un document nu poate avea mai multe elemente cu același id.
getElementsByName ()
Obiectul document are metoda getElementsByName () încorporată. Căutarea este efectuată pe toate elementele paginii cu atributul de nume dat. Metoda returnează o listă cu toate elementele a căror atribut nume satisface interogarea.
document.getElementsByName (nume) nume Un șir care conține numele elementului (atributul name).
Lorem ipsum dolor.
Deleniti sta veniam.
Lista de rezultate se actualizează automat când se modifică conținutul paginii.
getElementsByTagName ()
Pentru orice element de pagină, metoda getElementsByTagName () este disponibilă. Această metodă caută eticheta. Când îl apelați, căutarea este efectuată în interiorul acestui element. Metoda returnează o listă a tuturor elementelor care satisfac interogarea.
Element. Eticheta getElementsByTagName (tag) Un șir care conține numele etichetei.
În interogarea de căutare, cazul literelor nu contează. Dacă trimiteți un asterisc * în cerere. atunci metoda va returna toți descendenții acestui element.
Lorem ipsum dolor.
Deleniti sta veniam.
Lista de rezultate se actualizează automat când se modifică conținutul paginii.
getElementsByClassName ()
Pentru orice element de pagină, metoda getElementsByClassName () este disponibilă. Această metodă caută atributul de clasă globală. Când îl apelați, căutarea este efectuată în interiorul acestui element. Metoda returnează o listă a tuturor elementelor cu clasa specificată.
Element. class class getElementsByClassName (clasă) Un șir care conține numele clasei.
Lorem ipsum dolor.
Deleniti sta veniam.
Lista de rezultate se actualizează automat când se modifică conținutul paginii.
querySelectorAll ()
Pentru orice element de pagină, metoda querySelectorAll () este disponibilă. Metoda returnează o listă a tuturor elementelor care satisfac selectorul CSS specificat. Când îl apelați, căutarea este efectuată în interiorul acestui element.
Element. querySelectorAll (selector) selector Un șir care conține un selector CSS.
Lorem ipsum dolor.
Deleniti sta veniam.
Această metodă este cea mai obișnuită, deoarece poate înlocui oricare dintre metodele de mai sus.
Această metodă are o performanță ridicată, însă lista de rezultate nu este actualizată atunci când se modifică conținutul paginii.
querySelector ()
Pentru orice element de pagină, metoda querySelector () este disponibilă. Metoda returnează primul element care satisface selectorul CSS specificat. Când îl apelați, căutarea este efectuată în interiorul acestui element.
Element. query selector (selector) Un șir care conține un selector CSS.
Principalul avantaj al acestei metode în ceea ce privește querySelectorAll () este că se oprește la primul meci găsit. Acest lucru vă permite să creșteți productivitatea. De exemplu, dacă știți cu bună știință că rezultatul va consta dintr-un singur element, atunci este mai bine să utilizați această metodă.
Lorem ipsum dolor.
Deleniti sta veniam.
Pentru orice element de pagină, metoda cea mai apropiată () este disponibilă. Ca și querySelector (). metoda returnează primul element care satisface selectorul CSS specificat. Dar căutarea nu este efectuată în interiorul acestui element, ci vice versa în ierarhia DOM. În acest caz, elementul însuși, pe care se numește metoda, participă de asemenea la verificare.
Element. Cel mai apropiat selector (selector) Un șir care conține un selector CSS.
Principiul metodei este după cum urmează:
- Mai întâi, elementul pe care se invocă metoda este verificat.
- Apoi, elementul părinte al acestui element este verificat. Apoi, părintele părintelui și așa mai departe.
- Metoda se oprește la primul element găsit și îl returnează.
Articole similare
Trimiteți-le prietenilor: