obiecte dom Lucrul cu modelul DOM

prin innerHTML:

Instrumentul principal de lucru și schimbări dinamice pe pagină este DOM ( Obiect document Model) - un model de obiect utilizat pentru documente XML/HTML. Conform modelului DOM, un document este o ierarhie. Fiecare etichetă HTML formează un element nod separat, fiecare bucată de text formează un element de text etc. Pur și simplu, DOM-ul este o reprezentare a unui document ca un arbore de etichete. Acest arbore este format dintr-o structură imbricată de etichete plus fragmente de text ale paginii, fiecare dintre acestea formând un nod separat. Cel mai simplu DOM Să construim, mai întâi, Arborele DOM pentru următorul document. Titlu: Document excelent Eticheta cea mai exterioară este , așa că copacul începe să crească de acolo. Există două noduri în interior: și - devin noduri copii ale . Formular de etichete nodurile elementului(nodul elementului). Textul prezentat noduri de text(nodul text). Ambele sunt noduri egale în arborele DOM. Exemplu mai complicat Să ne uităm acum la o pagină mai vitală: Despre elan Adevărul despre elan. Elanul este un animal viclean .. Și insidios Elementul rădăcină al ierarhiei este html. Are doi descendenți. Primul este capul, al doilea este corpul. Și așa mai departe, fiecare etichetă imbricată este un copil al etichetei de mai sus: În această figură, albastrul indică elemente de nod, negrul indică elemente de text. Arborele este format din elemente de nod albastru - etichete HTML. Și așa arată un arbore dacă îl înfățișați direct pe o pagină HTML: Apropo, arborele din această figură nu ia în considerare textul format din doar caractere cu spații albe. De exemplu, un astfel de nod text ar trebui să vină imediat după . Un DOM care nu conține astfel de noduri „goale” este numit "normalizat". Să ne uităm la un document puțin mai complex. Datele documentului Cu grijă Informaţii Fabricat in Rusia Eticheta de sus este html, are capul și corpul copiilor și așa mai departe. Rezultă un arbore de etichete: Atribute În acest exemplu, nodurile au următoarele atribute: style , class , id . În general, atributele sunt considerate și noduri în DOM al căror părinte este elementul DOM pe care sunt specificate. Cu toate acestea, în programarea web, de obicei nu se adâncesc în această junglă și consideră atributele ca fiind pur și simplu proprietăți ale unui nod DOM, care, după cum vom vedea mai târziu, pot fi setate și modificate la cererea programatorului. De fapt, acesta este un secret, dar DOCTYPE este, de asemenea, un nod DOM și este situat în arborele DOM din stânga HTML (acest fapt este ascuns în imagine). P.S. Este o glumă despre secret, desigur, dar nu toată lumea știe cu adevărat despre el. Este greu de gândit unde ar putea fi utile astfel de cunoștințe... Normalizare în diferite browsere Când se analizează HTML Internet Explorer creează imediat normalizat DOM în care nodurile nu sunt create din text gol. Firefox are o părere diferită, creează un element DOM din fiecare fragment de text. Prin urmare, în Firefox arborele acestui document arată astfel: În figură, pentru concizie, nodurile de text sunt pur și simplu indicate printr-un hash. corpul are 7 copii în loc de 3. Opera are și cu ce să se laude. Ea poate adăuga un element gol suplimentar „doar de la ea însăși”. Pentru a vedea acest lucru, deschideți documentul. Returnează numărul de noduri copii ale document.body , inclusiv nodurile text. Primesc 3 pentru IE, 7 pentru Firefox și 8 (!?) pentru Opera. În practică, această incompatibilitate nu creează mari probleme, dar trebuie să fii conștient de ea. De exemplu, diferența se poate manifesta în cazul enumerarii nodurilor de arbore. Posibilitățile pe care le oferă DOM-ul De ce, cu excepția frumoase desene, aveți nevoie de un DOM ierarhic? Foarte simplu: Fiecare element DOM este un obiect și oferă proprietăți pentru manipularea conținutului său, pentru accesarea părinților și copiilor. Obiectul document este utilizat pentru manipularea DOM. Folosind document , puteți obține elementul arborelui dorit și puteți modifica conținutul acestuia. De exemplu, acest cod primește primul element cu eticheta ol, elimină secvențial două elemente din listă și apoi le adaugă în ordine inversă: Var ol = document.getElementsByTagName("ol") var hiter = ol.removeChild(ol.firstChild) var kovaren = ol.removeChild(ol.firstChild) ol.appendChild(kovaren) ol.appendChild(hiter) Pentru un exemplu despre cum funcționează un astfel de script, faceți clic pe textul de pe pagina de elan În tutorialele și scripturile vechi, puteți vedea modificarea codului HTML al unei pagini direct apelând document.write . În scripturile moderne, această metodă nu este aproape niciodată utilizată, cazurile de utilizare corectă pot fi numărate pe o mână. Evita document.write.. Cu excepția cazului în care știi cu adevărat ce faci (de ce citești atunci un tutorial - ești deja un guru) Să aruncăm o privire mai atentă asupra metodelor de acces și proprietăților elementelor DOM. Accesarea elementelor Toate accesările și modificările DOM provin din obiectul document. Să începem cu vârful copacului. document.documentElement Eticheta de sus. În cazul unei pagini HTML corecte, aceasta va fi . document.corp Etichetă, dacă este prezentă în document (trebuie să fie). Următorul exemplu, când faceți clic pe un buton, se va afișa reprezentarea textului obiectele document.documentElement și document.body. Șirul în sine depinde de browser, deși obiectele sunt aceleași peste tot. funcția go() ( alert(document.documentElement) alert(document.body) ) Tipuri de elemente DOM Fiecare element din DOM are un tip. Numărul său este stocat în atributul elem.nodeType În total, există 12 tipuri de elemente în DOM. De obicei este folosit doar unul: Node.ELEMENT_NODE, al cărui număr este 1. Elementele de acest tip corespund etichetelor HTML. Uneori este util și tipul Node.TEXT_NODE, care este egal cu 3. Acestea sunt elemente de text. Alte tipuri în programare javascript nu sunt folosite. Următorul exemplu, când se face clic pe un buton, va tipări tipurile de document.documentElement și apoi tipul ultimului copil al nodului document.body. Acesta este un nod text. funcția go() ( alert(document.documentElement.nodeType) alert(document.body.lastChild.nodeType) ) Text Exemplu De exemplu, așa ar arăta documentul din exemplul de mai sus într-un browser dacă fiecare element vizibil ar fi înconjurat de un cadru cu un număr nodeType în colțul din dreapta sus. ...Date Cu grijă Informaţii Fabricat in Rusia Aici sunt afișate doar elementele din interiorul corpului, deoarece sunt singurele afișate pe pagină. Pentru elementele de tip 1 (etichete), eticheta corespunzătoare este indicată între paranteze, pt elemente de text(tip 3) - doar un număr. Elemente copil Toate elementele copil, inclusiv cele text, sunt în matricea childNodes. Următorul exemplu trece în buclă prin toți copiii din document.body . Pentru(var i=0; i CORP stil Această proprietate controlează stilul. Acest lucru este similar cu setarea unui stil în CSS. De exemplu, puteți seta element.style.width: Cod sursă pentru acest buton: Mânca regula generalaînlocuiri - dacă atributul CSS are cratime, atunci pentru a seta stilul trebuie să le înlocuiți cu litere mari. De exemplu, pentru a seta proprietatea z-index la 1000, trebuie să setați: Element.style.zIndex = 1000 innerHTML La un moment dat, această proprietate a fost acceptată doar în IE. Acum toate browserele moderne îl acceptă. Conține tot codul HTML din interiorul nodului și poate fi schimbat. Proprietatea innerHTML este folosită în principal pentru schimbare dinamică conținutul paginii, de exemplu: Document.getElementById("footer").innerHTML = "La revedere!" Poate că innerHTML este una dintre cele mai frecvent utilizate proprietăți ale elementelor DOM. className Această proprietate specifică clasa elementului. Este complet similar cu atributul html „clasă”. Elem.className = "noua clasa" onclick, onkeypress, onfocus... Și alte proprietăți care încep cu „on...” stochează funcții de gestionare pentru evenimentele corespunzătoare. De exemplu, puteți atribui un handler de evenimente onclick. Pentru mai multe informații despre aceste proprietăți și handlere de evenimente, consultați Subiectul este chiar complex. Dar, după cum se spune, diavolul nu este atât de groaznic pe cât este pictat. Aici primesc cea mai dură nucă: această super sarcină de a o „vopsi” cât mai digerabilă, dar nu în întregime primitivă. Până acum, toate materialele pe care le-am citit tind să fie fie abstruse, fie primitive. Ce este DOM Abrevierea DOM înseamnă Model obiect document(model de obiect document). DOM este o interfață de programare pentru accesarea conținutului documentelor HTML, XHTML și XML, adică reprezentând etichete și atribute HTML, XHTML și XML, precum și stilurile CSS ca obiecte de programare. Atât JavaScript, cât și alte limbaje de programare web funcționează cu acest model. Puțină istorie Există 4 niveluri DOM (0, 1, 2 și 3). Nivelul 0 (1996) a inclus modele DOM care existau înainte de Nivelul 1. Acestea sunt în principal colecții: document.images, document.forms, document.layers și document.all. Aceste modele nu sunt în mod oficial specificații DOM publicate de W3C. Mai degrabă, ele reprezintă informații despre ceea ce a existat înainte de începerea procesului de standardizare. Nivelul 1 (1997) a inclus și elementul de bază funcţionalitate privind procesarea documentelor XML: numeroase moduri de a lucra cu noduri individuale, de a lucra cu instrucțiuni de procesare XML etc. În plus, nivelul 1 DOM conține o serie de interfețe speciale care pot gestiona elemente HTML individuale. De exemplu, puteți lucra cu tabele HTML, formulare, liste de selecție etc. DOM Level 2 (2002) a adăugat câteva funcții noi. În timp ce nivelul 1 DOM nu avea suport pentru spațiile de nume, interfețele DOM Nivelul 2 conțin metode de gestionare a spațiilor de nume asociate cu cerințele pentru compunerea și procesarea documentelor XML. În plus, nivelul 2 DOM acceptă evenimente. Nivelul 2 este nivelul actual al specificației DOM, dar W3C recomandă unele secțiuni ale specificației de nivel 3. DOM Level 3 este un proiect de specificație de lucru care extinde funcționalitatea DOM Level 2. Una dintre cele mai caracteristici importante Această versiune a specificației este capacitatea de a lucra cu numeroase extensii DOM. Ce înseamnă „interfață software”? Interfața cuvântului englezesc poate fi tradus ca „zonă de contact”. Un computer, aproximativ vorbind, înțelege doar două lucruri: un bit gol și un bit umplut. Limbajul pe care îl „vorbește” un computer poate fi gândit ca un șir nesfârșit de zerouri și unu, dând un număr infinit de combinații diferite. Orice codul programului- aceasta este o interpretare inteligibilă pentru programator a acestor „zerouri și unele” cu care lucrează computerul. Astfel, orice limbaj de programare este o interfață om-mașină. Browserele funcționează la fel ca și altele aplicatii informatice. Ei interpretează în „zerouri și unu” coduri HTML, XML, CSS, JavaScript, PHP, Perl etc. Pentru a face față acestui multilingvism, este nevoie de o platformă comună. Această platformă este DOM - o specificație care nu depinde de un anumit limbaj de programare sau de marcare. Este o interfață care poate fi utilizată în multe limbaje de programare populare asociate cu crearea de pagini web și capabilă să înțeleagă și să interpreteze obiecte DOM. DOM și browsere DOM și JavaScript În JavaScript, partea de sus a scării ierarhice a obiectelor DOM, un fel de „conductor” al acestei interfețe, este obiectul document, iar obiectele DOM devin proprietățile sale, proprietățile proprietăților sale etc. Ele sunt numite și noduri DOM. noduri DOM Există 12 tipuri de noduri în DOM nivelul 2. Fiecărui tip de nod DOM i se atribuie o constantă cu nume unic. Majoritatea nodurilor sunt proiectate să funcționeze cu XML. În ansamblul HTML - JavaScript pe care îl facem, pot fi folosite doar 5 tipuri. Dar chiar și acest „vârf al aisbergului” este un „copac foarte răspândit” care nu poate fi acoperit în una sau două lecții. Setul complet de constante de tip de nod definite în specificația W3C DOM (nodurile disponibile pentru HTML - JavaScript sunt evidențiate cu albastru): Nume constant Sens Descriere Node.ELEMENT_NODE Element Node (returnează elementul rădăcină al documentului, pentru documentele HTML acesta este elementul HTML) Node.ATTRIBUTE_NODE Nod de atribut (returnează un atribut al unui element de document XML sau HTML) Nod text (#text) Node.CDATA_SECTION_NODE Nod secțiune CDATA (XML: o sintaxă alternativă pentru afișarea datelor de caractere) Node.ENTITY_REFERENCE_NODE Node.ENTITY_NODE Nod de partiție Node.PROCESSING_INSTRUCTION_NODE Nod directiv XML Node.COMMENT_NODE Nod de comentariu Node.DOCUMENT_NODE Nodul document (baza pentru accesarea conținutului documentului și crearea componentelor acestuia) Node.DOCUMENT_TYPE_NODE Nodul tip document (returnează tipul a acestui document, adică valoarea etichetei DOCTYPE) Node.DOCUMENT_FRAGMENT_NODE Nod fragment de document (extragerea unei părți din arborele documentului, crearea unui nou fragment de document, inserarea unui fragment ca copil al unui nod etc.) Node.NOTATION_NODE Nod de notație* * Notațiile sunt nume care identifică formatul secțiunilor neparsate, formatul elementelor care au un atribut de notație sau programul de aplicație căruia îi este adresată directiva. (Nu este clar? Nici eu nu sunt prea sigur încă.) Structura documentului în DOM < title>Toate obiectele document sunt noduri DOM. Să ne uităm la un document de bază: Antet DOM Textul paragrafului Iată o diagramă a arborelui său DOM: Fiecare nod poate avea noduri copil (săgețile conduc la ele în diagramă). Obiectul document - baza arborelui document - este, de asemenea, un nod, dar nu are un nod părinte și are o serie de proprietăți și metode pe care alte noduri nu le au. Are un nod copil: element. Un element are două noduri copil: și , pentru care toate elementele conținute în ele devin copii. Atenţie! Antet DOM . „Element” și „etichetă” nu sunt sinonime. O etichetă este un semn de marcare: - acestea sunt două etichete diferite. Și un element este un obiect marcat cu aceste etichete: Elemente și Conține text în interior. Acestea sunt nodurile lor de text copil. Elementul are și un atribut: align="center" . Nodurile de atribut sunt și noduri copii ale elementelor care le conțin. Când lucrați cu nodurile arborelui DOM, sunt utilizate proprietățile și metodele acestora. Unele proprietăți ale nodurilor Mică introducere Repet încă o dată: atunci când accesăm elemente de pagină în scripturi, avem de-a face nu numai cu limbajul Javascript, ci și cu interfața DOM încorporată în acesta. Uneori trebuie să fii conștient de acest lucru, uneori poți uita „că vorbim în proză”. Am folosit deja unele proprietăți și metode din modelul de obiecte DOM în acest fel. Prin urmare, din când în când voi oferi link-uri către lecțiile anterioare. De aceea nu vom începe, așa cum este de obicei, cu „proprietățile principale”: nodeName și nodeValue. tagName Returnează un șir care conține numele etichetei elementului. Toate valorile tagName conțin numai caractere majuscule. Sintaxă element.tagName Exemplu Testarea proprietății tagName document.write(document.getElementById( „testTagName”).tagName) Rezultat Testarea proprietății tagName innerHTML Am întâlnit deja această proprietate (vezi Lecția 10). Și acum înțelegem de unde vine: „de acasă”. Oferă acces la conținutul elementului. Specifică nu numai conținutul textului, ci și toate etichetele HTML situate în interiorul elementului. Această proprietate nu este doar pentru citire, ci și pentru modificarea conținutului. Nota În IE, innerHTML este doar în citire pentru un număr de elemente: toate elementele de tabel, cu excepția	și , precum și și . De exemplu, am creat un tabel gol fără un element	și vrem să-l inserăm programatic în

IE va afișa „ eroare necunoscută execuție” și alte browsere vor efectua inserarea.

În același timp, dacă interogăm conținutul existent al unui element , de exemplu, prin alert(document.getElementById("id").innerHTML) , atunci aceasta va funcționa în IE.

Sintaxă

element.innerHTML = "text atribuit"

Exemplu

Testarea proprietății innerHTML Paragraf de inserat // Această funcție citește textul și îl inserează în paragraful dat. funcția testRead() ( document.getElementById( "ţintă").innerHTML = document.getElementById( „testInnerHTML”).innerHTML } // Această funcție modifică textul paragrafului dat. funcția testChange() ( document.getElementById( "ţintă").innerHTML = „Recolorarea și schimbarea textului” } // Această funcție readuce proprietatea în poziția inițială. funcția testReset() ( document.getElementById( "ţintă").innerHTML = „Paragraf de inserat” }

Testarea proprietății innerHTML

Paragraf de inserat

Document Object Model, sau „DOM”, este o interfață de programare pentru accesarea elementelor paginilor web. În esență, este o pagină API care vă permite să citiți și să manipulați conținutul, structura și stilurile unei pagini. Să ne dăm seama cum funcționează și cum funcționează.

Cum este construită o pagină web?

Procesul de conversie a documentului HTML original într-o pagină redabilă, stilată și interactivă se numește „Cale de redare critică”. Deși acest proces poate fi împărțit în mai mulți pași, așa cum am descris în Înțelegerea căii critice de redare, acești pași pot fi grupați aproximativ în doi pași. În primul, browserul analizează documentul pentru a determina ce va fi afișat în cele din urmă pe pagină, iar în al doilea, browserul realizează randarea.

Rezultatul primei etape este ceea ce se numește „arborele de randare”. Un arbore de randare este o reprezentare a elementelor HTML care vor fi redate pe o pagină și a stilurilor asociate acestora. Pentru a construi acest arbore, browserul are nevoie de două lucruri:

CSSOM, reprezentând stiluri asociate elementelor

DOM, reprezentarea elementului

În ce constă DOM-ul?

DOM este o reprezentare obiect a documentului HTML original. Are unele diferențe, așa cum vom vedea mai jos, dar în esență este o încercare de a converti structura și conținutul unui document HTML într-un model obiect care poate fi utilizat de diverse programe.

Structura obiectelor DOM este reprezentată de ceea ce se numește „arborele de noduri”. Se numește așa deoarece poate fi gândit ca un copac cu un părinte care se ramifică în mai multe ramuri copil, fiecare dintre ele putând avea frunze. În acest caz, „elementul” părinte este elementul rădăcină, „ramurile” secundare sunt elementele imbricate, iar „frunzele” sunt conținutul din elemente.

Să luăm ca exemplu acest document HTML:

Prima mea pagină web Salut, lume!

Ce mai faci?

Acest document poate fi reprezentat ca următorul arbore de noduri:

• html
  • cap
    • titlu
      • Prima mea pagină web
  • corp
    • h1
      • Salut Lume!
    • p
      • Ce mai faci?

Ce nu este DOM-ul

În exemplul de mai sus, se pare că DOM-ul este o mapare 1:1 a documentului HTML original. Cu toate acestea, așa cum am spus mai devreme, există diferențe. Pentru a înțelege pe deplin ce este DOM, trebuie să ne uităm la ce nu este.

DOM nu este o copie a codului HTML original

Deși DOM-ul este creat dintr-un document HTML, nu este întotdeauna exact același. Există două cazuri în care DOM-ul poate diferi de HTML-ul sursă.

1. Când HTML conține erori de marcare

DOM-ul este interfața pentru accesarea elementelor reale (adică deja redate) ale unui document HTML. În timpul procesului de creare a DOM, browserul însuși poate corecta unele erori din codul HTML.

Luați în considerare acest document HTML ca exemplu:

Salut Lume!

Documentului îi lipsesc elementele și , ceea ce este o cerință pentru HTML. Dar dacă ne uităm la arborele DOM rezultat, putem vedea că acest lucru a fost remediat:

• html
  • cap
  • corp
    • Salut Lume!
  2. Când DOM-ul este modificat de codul Javascript

  Pe lângă faptul că este interfața pentru vizualizarea conținutului unui document HTML, DOM-ul însuși poate fi și modificat.

  Putem, de exemplu, să creăm noduri suplimentare pentru DOM folosind Javascript.

  Var newParagraph = document.createElement("p"); var paragraphContent = document.createTextNode("Sunt nou!"); newParagraph.appendChild(paragraphContent); document.body.appendChild(newParagraph);

  Acest cod va schimba DOM-ul, dar modificările nu vor apărea în document HTML.

  DOM-ul nu este ceea ce vezi în browser (adică arborele de randare)

  În fereastra de vizualizare a browserului vedeți arborele de randare, care, așa cum am spus, este o combinație de DOM și CSSOM. Ceea ce este diferit la DOM și arborele de randare este că acesta din urmă constă numai din ceea ce va fi redat în cele din urmă pe ecran.

  Deoarece arborele de randare se referă doar la ceea ce este redat, exclude elementele care sunt ascunse vizual. De exemplu, elemente care au stiluri cu afișare: none .

  Salut Lume!

  Ce mai faci?

  DOM-ul va include elementul

  • html
    • cap
    • corp
      • h1
        • Salut Lume!
      • p
        • Ce mai faci?

  Cu toate acestea, arborele de randare și, prin urmare, ceea ce este vizibil în fereastra de vizualizare, nu va fi inclus în acest element.

  • html
    • corp
      • h1
        • Salut Lume!
  DOM-ul nu este ceea ce este afișat în DevTools

  Această diferență este puțin mai mică, deoarece DevTools Element Inspector oferă cea mai apropiată aproximare a DOM-ului pe care îl avem în browser. Cu toate acestea, inspectorul DevTools conține Informații suplimentare, care nu se află în DOM.

  Cel mai bun exemplu în acest sens sunt pseudo-elementele CSS. Pseudoelementele create folosind selectoarele ::before și ::after fac parte din CSSOM și din arborele de randare, dar nu fac parte din punct de vedere tehnic din DOM. Acest lucru se datorează faptului că DOM-ul este creat numai din documentul HTML original, fără a include stilurile aplicate elementului.

  Chiar dacă pseudo-elementele nu fac parte din DOM, ele sunt prezente în inspectorul nostru de elemente devtools.

  
  Relua

  DOM este interfața pentru documentul HTML. Este folosit de browsere ca prim pas în a determina ce să randeze în fereastra de vizualizare și de codul Javascript pentru a schimba conținutul, structura sau stilul unei pagini.

În acest tutorial ne vom uita la elementele de bază ale lucrului cu evenimente, atribute și getElementById în JavaScript.

În lecțiile anterioare, am studiat capacitățile de bază ale limbajului JavaScript. Începând cu această lecție, vom face ceea ce este destinat de fapt JavaScript - ne vom schimba elemente HTML pagini și răspunde la acțiunile utilizatorului. Scripturile noastre vor deveni mai spectaculoase și mai utile.

Vom începe prin a ne învăța codul să răspundă la acțiunile utilizatorilor site-ului.

Acțiunile utilizatorului pe care le putem urmări prin JavaScript se numesc evenimente. Evenimentele pot fi după cum urmează: strigăt mouse-ul pe un element de pagină, îndrumare mouse-ul la un element de pagină sau invers - îngrijire cursorul mouse-ului dintr-un element și așa mai departe. În plus, există evenimente care nu depind de acțiunile utilizatorului, de exemplu, evenimentul când o pagină HTML este încărcată în browser.

Există mai multe moduri de a lucra cu evenimente în JavaScript.

Vom începe cu cele mai simple dintre ele.

Elementele de bază ale evenimentului Cea mai ușoară modalitate de a seta răspunsul unui element la un anumit eveniment este să îl specificați folosind un atribut pentru o anumită etichetă. De exemplu, un eveniment"clic de mouse" corespunde atributului onclick, eveniment"paseaza mouse-ul" - atributul onmouseover și evenimentul„elementul frunze cursor”

- atributul onmouseout. Valoarea atributului cu evenimentul este codul JavaScript. În exemplul următor făcând clic pe un buton cu mouse-ul

funcția de alertă va fi executată: Și acum prin clic

funcția func va fi executată pe elementul:

functia func() (alerta("!"); )

Puteți îndeplini nu doar o funcție, ci mai multe:

funcția func1() ( alert("1"); ) funcția func2() ( alert("2"); ) Vă rugăm să rețineți că, dacă aveți nevoie de ghilimele duble în interiorul unui atribut (de exemplu, pentru un șir), iar ghilimelele exterioare ale atributului sunt, de asemenea, ghilimele duble - onclick="alerta ("!")"

- acest cod nu va funcționa. Vă rugăm să rețineți că, dacă aveți nevoie de ghilimele duble în interiorul unui atribut (de exemplu, pentru un șir), iar ghilimelele exterioare ale atributului sunt, de asemenea, ghilimele duble - Există mai multe modalități de a combate acest lucru: puteți schimba ghilimelele exterioare în ghilimele simple , puteți scăpa și de ghilimele interioare cu o bară oblică inversă onclick="alerta(\"!\)" sau pur și simplu mutați codul JavaScript din atribut în funcție și lăsați doar numele funcției în atribut.

onclick="func()" Vă rugăm să rețineți că, dacă aveți nevoie de ghilimele duble în interiorul unui atribut (de exemplu, pentru un șir), iar ghilimelele exterioare ale atributului sunt, de asemenea, ghilimele duble - Același lucru se va întâmpla dacă puneți ghilimelele exterioare ale atributului între ghilimele simple și, de asemenea, folosiți ghilimele simple pentru șir:

- și aici totul se rezolvă în moduri similare.

Tabel de atribute pentru evenimente Lucrul cu getElementById

Acum vom învăța cum să primim elemente de pagină HTML și să efectuăm diverse manipulări cu acestea (vom putea schimba, de exemplu, textul și culoarea acestora și multe alte lucruri utile).

Să presupunem că avem o etichetă pe pagină cu atributul id setat pentru a testa . Să scriem linkul către această etichetă în variabila elem. Pentru a face acest lucru, trebuie să folosim metoda getElementById, care primește elementul după id-ul său.

Acum în variabila elem avem o legătură către un element cu atributul id în valoarea testului. Elementul variabil în sine este obiect.

Acest obiect şi Etichetă HTML paginile sunt conectate între ele - putem modifica orice proprietăți ale obiectului elem și în același timp vom vedea modificările pe pagina HTML care se vor întâmpla cu elementul primit.

Să vedem cum se întâmplă acest lucru în practică.

Bazele lucrului cu Atributele HTML prin JavaScript

Acum vom citi și vom schimba atributele etichetei.

Să avem din nou o intrare cu un id egal cu test și un buton, după ce facem clic pe care funcția va fi lansată: În cadrul funcției func vom primi intrarea noastră prin id-ul lui

și scrieți un link către el în variabila elem:

funcția func() ( var elem = document.getElementById("test"); )

Să afișăm acum conținutul atributelor noastre de intrare.

Pentru a accesa, de exemplu, atributul value, ar trebui să scrieți următoarele: elem.value , unde elem este variabila în care am scris un link către elementul nostru folosind getElementById, iar value este atributul etichetei care ne interesează.

Putem afișa conținutul atributului prin alertă în acest fel - alert(elem.value) - sau îl putem scrie într-o variabilă. Să facem asta:

funcția func() (var elem = document.getElementById("test"); alert(elem.value); //va afișa "!")

Putem citi valorile altor atribute în același mod, de exemplu, elem.id - citim valoarea atributului id și elem.type - valoarea atributului tip.

Vezi exemplu:"; //присвоим новое значение атрибуту value } !}

funcția func() ( var elem = document.getElementById("test"); alert(elem.value); //va afișa "!" alert(elem.id); //va afișa alertă "test" (elem.type) ); //va afișa „text” )

Nu numai că puteți citi valorile atributelor, ci și le puteți modifica.

Pentru a modifica, de exemplu, valoarea atributului value, trebuie doar să-l atribui constructului elem.value:

funcția func() ( var elem = document.getElementById("test"); elem.value = "www

Codul HTML va arăta astfel (atributul value va deveni www):"; }!}

Cu toate acestea, în majoritatea cazurilor, introducerea unei variabile este mai convenabilă. Comparați două exemple - acum am introdus variabila elem și pot citi orice număr de atribute, în timp ce getElementById este numit doar o dată:

Vezi exemplu:"; elem.type = "submit"; }!}

Acum nu introduc o nouă variabilă și așa că trebuie să apelez getElementById de două ori:

Codul HTML va arăta astfel (atributul value va deveni www):"; document.getElementById("test").type = "submit"; }!}

După părerea mea, acest cod a devenit mai complicat, deși este nevoie de o linie mai puțin. În plus, dacă vreau să schimb valoarea id din test în, de exemplu, www, va trebui să o fac în multe locuri, ceea ce nu este foarte convenabil.

către browser. Găsirea elementelor pe o pagină, ceea ce face metoda getElementById, este o operație destul de lentă ( și, în general, orice lucru cu elemente de pagină este o operație lentă- amintiți-vă asta).

În cazul nostru, dacă folosim getElementById de fiecare dată, atunci browserul va procesa de fiecare dată Pagina HTMLși căutați un element cu un anumit id de mai multe ori (nu contează că id-urile sunt aceleași - browserul va efectua toate acțiunile de mai multe ori), efectuând operațiuni inutile care pot încetini browserul.

Dacă folosim variabila elem, nu are loc nicio căutare în pagină (elementul a fost deja găsit și linkul către acesta se află în variabila elem).

Excepții: clasă și pentru atribute

Ați învățat deja cum să lucrați cu atribute prin JavaScript și acum este timpul să vă spun că nu totul este atât de simplu - există o excepție atunci când lucrați cu atribute - acesta este atributul de clasă.

Acest cuvânt este special în JavaScript și, prin urmare, nu putem scrie pur și simplu elem.clasa pentru a citi valoarea atributului de clasă. In schimb ar trebui sa scrii elem.className.

Următorul exemplu afișează valoarea atributului de clasă:

funcția func() (var elem = document.getElementById("test"); alert(elem.className); )

Apropo, există și alte atribute care sunt numite diferit de proprietăți.

De exemplu, atributul for() are o proprietate numită htmlFor.

Lucrând cu asta

Acum vom lucra cu un obiect special, care indică elementul curent (elementul în care a avut loc evenimentul).

Mai mult, indică ca și cum acest element ar fi fost deja obținut prin metoda getElementById.

Să vedem cum să lucrăm cu aceasta și care este confortul acestei abordări.

Să avem sarcina de a face clic pe o intrare pentru a afișa conținutul valorii acesteia.

Deocamdată poți lua doar această decizie: funcția func() ( var elem = document.getElementById ("test"); alert(elem.value); ), dar acum să ne imaginăm că avem multe intrări și când facem clic pe fiecare trebuie să-i afișăm valoarea.

În acest caz, vom ajunge la ceva de genul acesta:

funcția func1() ( var elem = document.getElementById("test1"); alert(elem.value); ) funcția func2() ( var elem = document.getElementById("test2"); alert(elem.value); ) funcția func3() ( var elem = document.getElementById("test3"); alert(elem.value); )

Acum dezavantajul abordării noastre este clar vizibil - pentru fiecare intrare trebuie să ne creăm propria funcție de procesare a clicurilor, iar aceste funcții fac aproape același lucru.

Dacă avem 10 intrări, va trebui să facem 10 funcții, ceea ce nu este convenabil.

Să ne simplificăm sarcina: vom trece id-ul elementului curent ca parametru funcției.

Și în loc de un număr mare de funcții, totul va fi redus la o singură funcție:

funcția func(id) (var elem = document.getElementById(id); alert(elem.value); )

Cu toate acestea, această soluție are încă un dezavantaj - fiecare element va trebui să introducă un ID diferit, ceea ce este, de asemenea, oarecum incomod.

Deci, să ne uităm în sfârșit la opțiunea de a rezolva problema folosind acest .

Să facem astfel încât fiecare intrare să-și afișeze conținutul atunci când se face clic. Pentru a face acest lucru, trecem acest obiect ca parametru funcției, astfel: func(this) . Acest lucru este transmis ca parametru de funcție și ajunge în variabila elem.

Acest element se comportă ca și cum ar fi fost obținut astfel:

var elem = document.getElementById(...)

, dar nu trebuie să îl primiți în acest fel, totul este deja gata acolo și îl puteți folosi.

De exemplu, elem.value indică valoarea intrării noastre și așa mai departe. Deci, iată cea mai simplă soluție la problema noastră: funcția func(elem) ( alert(elem.value); ) Bazele CSS Lucrul cu JavaScript

Proprietăți CSS

apare prin modificarea valorii atributului de stil pentru element. De exemplu, pentru a schimba culoarea, trebuie să construiți următorul lanț -.

 

---

elem.stil.culoare
- și atribuiți-i valoarea de culoare dorită: funcția func() ( var elem = document.getElementById ("test"); elem.style.color = "roșu"; ) De asemenea, nu puteți introduce variabila elem, ci construiți un lanț foarte lung Citire: