Atunci când construiește o pagină, browserul ia informații despre elementele din atributele lor. Dar, în plus, toate elementele paginii sunt obiecte cu proprietățile lor, care sunt, de asemenea, luate în considerare la afișarea elementelor. Interfața DOM vă permite să lucrați cu atributele elementelor și proprietățile acestora. Este necesar să înțelegem diferența dintre ele, să știm ce și unde să folosim.
Atribute ale elementelor
În documentele HTML, etichetele pot avea anumite atribute cu valori date. Atributele pot afecta afișarea unui element pe o pagină sau modificarea scopului. Prin urmare, pentru a manipula elementele paginii ar trebui să li se ofere posibilitatea de a lucra cu atributele etichetelor HTML.
Interfața DOM reprezintă un set de metode pentru lucrul cu atributele elementului.
hasAttribute (atribut) Verifică prezența unui atribut. getAttribute (atribut) Returnează un șir cu o valoare de atribut. setAttribute (atribut, value) Creează un atribut sau atribuie o nouă valoare acestuia. removeAttribute (atribut) Șterge atributul.
Aceste metode lucrează în mod specific cu atributele HTML așa cum sunt ele în document. De fapt, schimbă codul paginii. Prin urmare, pentru ei este corect:
- Valorile atributelor sunt întotdeauna șiruri.
- Numele atributului poate fi specificat în orice caz, deoarece HTML nu necesită un registru de caractere în cod.
Elemente de proprietate
Spre deosebire de atribute:
- Valoarea proprietății poate fi de orice tip.
- Numele proprietatilor sunt case-sensitive.
Conectarea proprietăților la atribute
În interfața DOM, conceptele atributelor HTML și proprietățile elementului DOM sunt strâns legate. Atunci când creați un model de pagină, pentru fiecare element sunt create proprietăți cu același nume cu atribute și se atribuie aceleași valori. Cu toate acestea, acest lucru nu este valabil pentru toate atributele, ceea ce duce la o anumită confuzie, dar, mai des, este util.
Când se afișează într-o fereastră de browser, parametrii elementului depind de proprietățile sale. Controlul suplimentar al elementelor de pe pagină se realizează prin schimbarea acestor proprietăți. Prin urmare, în general, este necesar să se lucreze cu proprietățile elementelor, nu cu artibulențele. Atributele sunt de obicei utilizate pentru a stoca informații.
De exemplu, un câmp de introducere a textului are atributul de valoare. Atunci când construiți un document, este creat un element cu proprietatea valorii. care are valoarea specificată în codul HTML al paginii. Textul de afișat în câmp este preluat din proprietatea valorii. Dacă utilizatorul introduce textul în câmp, proprietatea ia automat o nouă valoare curentă. Cu toate acestea, codul paginii nu se modifică, astfel încât valoarea inițială a atributului rămâne disponibilă.
Exemplul arată că schimbarea proprietății valorii nu afectează valoarea atributului valoare. Astfel, prin compararea valorilor atributului și a proprietăților, puteți înțelege dacă textul din câmp a fost modificat.
Pentru elemente, proprietățile sunt create nu numai din atributele specificate în cod, ci în general din toate atributele disponibile pentru acest element, chiar dacă nu se află în cod. Atribuiile globale și atributele evenimentului sunt incluse. Aceste proprietăți își iau valorile implicite.
Când construiți un document, atributele aceluiași nume și proprietăți nu au întotdeauna același înțeles.
Cel mai frecvent exemplu este atributul href.
Pentru atributul Boolean (hidden.autofocus.checked.less), aceeași proprietate booleană este creată, adică cu valoarea true sau false. Dar în codul HTML aceste atribute nu pot avea în general valori.
Dacă în codul HTML este specificat un atribut non-standard pentru un anumit element, atunci aceeași proprietate nu va fi creată.
Și acest lucru este logic dacă atributul nu este descris în standard. astfel încât nu poate afecta parametrii elementului.
Probleme cu această caracteristică nu apar, de obicei, deoarece atributele non-standard nu sunt aproape utilizate (cu acestea pagina nu trece validarea).
Sistemul de date-
Pentru transferul de informații în HTML, atributele cu datele prefixelor - sunt introduse. Cu aceste atribute, trebuie să lucrați prin proprietatea setului de date. Acesta conține o listă cu toate atributele de date ale elementului.
Atributul de clasă
Această proprietate este utilă dacă ați atribuit o singură clasă unui element. Dar dacă există mai multe dintre ele, atunci este mai dificil să lucrați cu această proprietate. Pentru astfel de cazuri, DOM a introdus încă o proprietate pentru lucrul cu clase - classList.
Proprietatea classList conține o listă (pseudomain) din clasele de elemente. Pentru a lucra cu această matrice, puteți utiliza o buclă sau metode încorporate:
classList.add (clasă) Adaugă o clasă. classList.remove (clasă) Elimină o clasă. classList.contains (class) Verifică dacă există o clasă. classList.toggle (clasă) Adaugă o clasă dacă aceasta nu există sau o șterge dacă există deja.
Atributul de stil
Proprietatea de stil conține un obiect de colecție cu toate proprietățile elementului CSS. În acest caz, numai acele proprietăți specificate de atributul de stil au valori. Valorile celorlalte proprietăți sunt linii goale.
Utilizarea acestei proprietăți este foarte convenabilă, deoarece proprietățile CSS ale elementului specificat cu aceasta sunt aproape cea mai mare prioritate (precum și atributul de stil).
Un alt avantaj este că cu fiecare proprietate CSS puteți lucra separat. Proprietatea de stil reprezintă un obiect în care fiecare proprietate are un stil specific CSS.
În plus, proprietatea de stil poate fi atribuită stilurilor ca șir, așa cum se face cu atributul de stil. Pentru a face acest lucru, utilizați proprietatea stil.cssText care poate fi scrisă. Cu toate acestea, rețineți că atribuirea unei valori noi proprietății style.cssText suprascrie complet valoarea atributului stil.
Proprietatea de stil este foarte utilă atunci când trebuie să modificați proprietatea CSS a unui element. Dar nu este potrivit pentru obținerea valorilor stilurilor aplicate. Acest lucru se datorează faptului că proprietatea de stil primește valori de stil din atributul de stil. care se utilizează rar (cel mai adesea stilurile CSS sunt scoase într-un fișier separat).
Pentru a obține valorile tuturor proprietăților CSS aplicate elementului, trebuie să utilizați metoda window.getComputedStyle ().
getComputedStyle ()
Metoda getComputedStyle () a obiectului ferestrei returnează același obiect ca și proprietatea de stil. Dar conține valorile tuturor stilurilor aplicate în prezent elementului (ținând cont de stilurile externe și fișierele cu taguri)