Në këtë manual, ne do të mbulojmë bazat e punës me ngjarje, atribute dhe getElementById në JavaScript.

Në mësimet e mëparshme, ne studiuam tiparet themelore të gjuhës JavaScript. Duke filluar me këtë mësim, ne do të merremi me atë për të cilin është menduar vetë JavaScript - ne do të ndryshojmë elementet Html faqet dhe përgjigjen ndaj veprimeve të përdoruesit. Skenaret tona do të bëhen më argëtuese dhe të dobishme.

Ne do të fillojmë duke mësuar kodin tonë për të reaguar mbi veprimet e përdoruesit faqe Për shembull, përdoruesi klikon diku me miun, dhe kodi ynë në përgjigje do të duhet të përpunojë këtë klikim dhe të shfaqë disa informacione në ekran.

Veprimet e përdoruesit që mund të gjurmojmë përmes JavaScript quhen ngjarjet... Ngjarjet mund të jenë si më poshtë: qaj me miun në elementin e faqes, duke synuar me miun në elementin e faqes ose anasjelltas - kujdes kursori i miut jashtë artikullit dhe kështu me radhë. Përveç kësaj, ka ngjarje që nuk varen nga veprimet e përdoruesit, për shembull, ngjarja që një faqe HTML është e ngarkuar në shfletues.

Në JavaScript ekziston disa mënyra punë me ngjarje. Ne do të fillojmë me atë më të thjeshtë.

Bazat e punës me ngjarjet

Mënyra më e lehtë për të vendosur reagimin e një elementi në një ngjarje specifike është specifikimi i tij duke përdorur një atribut për një etiketë specifike. Për shembull, një ngjarje klikimi i mausit atributi i ndeshjeve ne klikim, ngjarje pezull miu - atribut onmouseoverdhe ngjarja "elementi i largimit të kursorit" - atribut onmouseout.

Vlera e atributit me ngjarjen është Kodi JavaScript... Në shembullin vijues duke klikuar në buton funksioni do të ekzekutohet vigjilent:

Dhe tani ne klikim funksioni do të ekzekutohet në element func:

funksioni func () (vigjilent ("!");)

Mund të bëhet jo një funksion, dhe disa:

funksioni func1 () (alarm ("1");) funksion func2 () (alarm ("2");)

Ju lutemi vini re se nëse brenda një atributi keni nevojë për citate të dyfishta (për shembull, për një varg) dhe citatet e jashtme të atributit janë gjithashtu të dyfishta - onclick \u003d "alarm ("! ")" - një kod i tillë nuk do të funksionojë.

Ka disa mënyra për t'u marrë me këtë: ju mund të ndryshoni vlerësimet e jashtme në vlerësime të vetme onclick \u003d "alarm ("! ")", ju gjithashtu mund t'i shpëtoni citateve të brendshme me një vijë të kundërt onclick \u003d "alarm (\\"! \\ ")" ose thjesht transferoni kodin JavaScript nga një atribut në një funksion dhe lini vetëm emrin e funksionit në atribut onclick \u003d "func ()".

E njëjta gjë do të ndodhë nëse ju të jashtme përdorni thonjëza të vetme për atributin dhe përdorni thonjëza të vetme për vargun: onclick \u003d "alarm ("! ")" - këtu gjithçka zgjidhet gjithashtu në mënyra të ngjashme.

Tabela e atributeve për ngjarjet

Duke punuar me getElementById

Tani do të mësojmë se si të marrim elemente Html faqe dhe të kryejë të ndryshme manipulim (mund të ndryshojmë, për shembull, tekstin dhe ngjyrën e tyre dhe shumë gjëra të tjera të dobishme).

Supozoni se kemi një etiketë në faqe me atributin id në kuptim provë... Le të shkruajmë një lidhje me këtë etiketë në një ndryshore elem... Për ta bërë këtë, ne duhet të përdorim metodën merrniElementByIde cila e merr elementin nga vetja id.

Ky regjistrim do të ndodhë ne klikim te butoni tek i cili vendosim atributin ne klikim... Duke klikuar në këtë buton, funksioni do të aktivizohet functë cilat do të gjeni më Html element i faqes me id të barabartë provë dhe do të shkruaj lidhje me të në një ndryshore elem:

Tani në ndryshore elem kemi një lidhje me një element me një atribut id në kuptim provë... Vetë ndryshorja elem eshte nje objekt.

Ky objekt dhe etiketimi HTML i faqes janë të lidhur me njëri-tjetrin - ne mund të ndryshojmë cilësitë e objektit elem dhe në të njëjtën kohë do të shohim ndryshimet në faqen HTML që do të ndodhin me elementin që morëm.

Le të shohim se si ndodh kjo në praktikë.

Bazat e punës me atributet HTML përmes JavaScript

Tani do të lexojmë dhe modifikojmë atributet e etiketave. Le të na jepet përsëri të dhëna me id të barabartë me provën dhe butoni, duke klikuar mbi të cilin do të nisë funksioni func:

Brenda funksionit func ne do të marrim kontributin tonë nga id i tij dhe shkruaj një lidhje në të në një ndryshore elem:

funksioni func () (var elem \u003d document.getElementById ("provë");)

Le të shfaqim tani përmbajtjen e atributeve të inputeve tona. Për të hyrë, për shembull, në atributin e vlerës, shkruani sa vijon: elem.vlera, ku elem është ndryshorja në të cilën kemi shkruar një lidhje me elementin tonë duke përdorur getElementById, dhe vlera është atributi i etiketës për të cilën jemi të interesuar.

Ne mund të nxjerrim përmbajtjen e atributit përmes alarmit në këtë mënyrë - vigjilent (elem. vlera) - ose shkruajeni atë në ndonjë ndryshore. Le ta bejme kete:

funksioni func () (var elem \u003d document.getElementById ("provë"); vigjilent (elem.value); // shtyp "!")

Ne mund të lexojmë vlerat e atributeve të tjera në të njëjtën mënyrë, për shembull, si kjo - elem.id - ne llogarisim vlerën e atributit id, dhe kështu - elem.lloj - vlera e tiparit tip. Shihni shembullin:

funksioni func () (var elem \u003d dokument.getElementById ("provë"); vigjilent (elem.value); // shtyp "!" alarm (elem.id); // shtyp "alarm" test (elem.type); // shtyp "tekstin")

Ju jo vetëm që mund të lexoni vlerat e atributeve, por gjithashtu ndryshimi ata Për shembull, për të ndryshuar vlerën e një atributi vlera, ju vetëm duhet ta caktoni atë në ndërtim elem.vlera:

funksioni func () (var elem \u003d document.getElementById ("provë"); elem.value \u003d "(! LANG: www"; //присвоим новое значение атрибуту value } !}

Kodi HTML do të duket kështu (vlera e atributit të vlerës do të bëhet www):

Epo, tani pjesa më e vështirë - mundeni mos hyr e ndryshueshme elemdhe të ndërtojë zinxhir nga pikat si kjo:

funksioni func () (alarm (dokument.getElementById ("provë"). vlera); // shfaq "!")

Në të njëjtën mënyrë (në një zinxhir) ju gjithashtu mund të prodhoni rishkrimin e atributeve:

funksioni func () (document.getElementById ("provë"). vlera \u003d "(! LANG: www"; }!}

Sidoqoftë, në shumicën e rasteve, futja e një ndryshoreje i përshtatshëm... Krahasoni dy shembuj - tani kam prezantuar një ndryshore elem dhe unë mund të lexoj çdo numër atributesh, ndërsa merrniElementById i thirrur vetem nje here:

funksioni func () (var elem \u003d document.getElementById ("provë"); elem.value \u003d "(! LANG: www"; elem.type = "submit"; }!}

Tani nuk po prezantoj një variabël të ri dhe për këtë arsye duhet të telefonoj merrniElementById dy herë:

funksioni func () (document.getElementById ("provë"). vlera \u003d "(! LANG: www"; document.getElementById("test").type = "submit"; }!}

Sipas mendimit tim, ky kod u bë më i vështirë, megjithëse merr një rresht më pak. Gjithashtu, nëse dua të ndryshoj vlerën id nga testi në www, për shembull, duhet ta bëj në shumë vende, gjë që nuk është shumë e përshtatshme.

në shfletuesin. Gjetja e elementeve në faqen që bën metoda merrniElementByIdështë e bukur i ngadaltë operacion ( dhe në përgjithësi, çdo punë me elementët e faqes është një veprim i ngadaltë - mbaje mend këte).

Në rastin tonë, nëse përdorim çdo herë merrniElementById, atëherë shfletuesi do të përpunojë faqen HTML çdo herë dhe do të kërkojë një element me id-në e dhënë disa herë (nuk ka rëndësi që id janë të njëjtë - shfletuesi do të bëjë të gjitha veprimet disa herë), duke kryer operacione të padobishme që mund të ngadalësojnë shfletuesin.

Nëse përdorim ndryshoren elem - asnjë kërkim nuk ndodh në faqe (elementi është gjetur tashmë dhe lidhja për të qëndron te ndryshorja elem).

Përjashtimet: klasa dhe për atributet

Ju tashmë keni mësuar se si të punoni me atributet përmes JavaScript dhe tani është koha t'ju them këtë jo aq e thjeshtë - ekziston një përjashtim kur punoni me atributet - kjo është një atribut klasa.

Kjo fjalë është të veçantë në JavaScript dhe për këtë arsye nuk mund të shkruajmë thjesht elem.klasëpër të lexuar vlerën e atributit klasa... Në vend të kësaj, ju duhet të shkruani elem.klasaEmri.

Shembulli i mëposhtëm tregon vlerën e një atributi klasa:

funksioni func () (var elem \u003d document.getElementById ("provë"); vigjilent (elem.className);)

Nga rruga, ka atribute të tjera që emërtohen ndryshe nga prona. Për shembull, atributi për () përputhet me pronën me emrin htmlPër.

Duke punuar me këtë

Tani ne do të punojmë me ju me një objekt të veçantë kjo, i cili tregon elementin aktual (elementi në të cilin ka ndodhur ngjarja). Për më tepër, tregon sikur ky element është marrë tashmë nga metoda merrniElementById.

Le të shohim se si të punojmë me të kjo dhe cila është komoditeti i kësaj qasjeje.

Supozoni se kemi një detyrë për të shfaqur përmbajtjen e vlerës së saj duke klikuar në një hyrje.

Deri më tani, ju mund të merrni vetëm një vendim të tillë:

funksioni func () (var elem \u003d document.getElementById ("provë"); vigjilent (elem.value);)

Në parim, kjo zgjidhje është e mirë, por le të imagjinojmë tani që kemi shumë hyrje dhe duke klikuar në secilën duhet të shfaqim vlerën e saj.

Në këtë rast, ne do të marrim diçka si kjo:

funksioni func1 () (var elem \u003d document.getElementById ("test1"); vigjilent (elem.value);) funksion func2 () (var elem \u003d document.getElementById ("test2"); vigjilent (elem.value);) funksioni func3 () (var elem \u003d document.getElementById ("test3"); vigjilent (elem.value);)

Tani pengesa e qasjes sonë është qartë e dukshme - për secilin hyrje duhet të krijojmë funksionin tonë të trajtimit të klikimit, dhe këto funksione bëjnë pothuajse të njëjtën gjë.

Nëse kemi 10 hyrje, atëherë duhet të bëjmë 10 funksione, nuk është e përshtatshme.

Le të thjeshtojmë detyrën tonë: ne do të kalojmë id-in e elementit aktual si një parametër në funksion. Dhe në vend të një numri të madh të funksioneve, gjithçka do të reduktohet në një funksion:

funksioni func (id) (var elem \u003d document.getElementById (id); vigjilent (elem.value);)

Sidoqoftë, kjo zgjidhje ka ende një pengesë - secili element duhet të futë id të ndryshëm, i cili është gjithashtu disi i papërshtatshëm.

Pra, le të shohim përfundimisht mundësinë e zgjidhjes së problemit përmes kjo.

Le ta bëjmë që çdo hyrje të shfaqë përmbajtjen e saj me klikim. Për ta bërë këtë, kaloni objektin si një parametër të funksionit kjo, si kjo: func (kjo).

Ky ynë kalohet si një parametër në funksion dhe futet në një ndryshore elem... Ky elem sillet sikur të jetë marrë në këtë mënyrë: var elem \u003d dokument.getElementById (...), por ju nuk keni nevojë ta merrni atë në këtë mënyrë, gjithçka është tashmë e gatshme dhe mund ta përdorni. Për shembull, elem.vlera tregon vlerën e inputit tonë, etj.

Pra, këtu është zgjidhja më e thjeshtë për problemin tonë:

funksioni func (elem) (vigjilent (elem. vlera);)

Bazat e CSS

NË JavaScript punojnë me Vetitë e CSS ndodh duke ndryshuar vlerën e atributit të stilit për elementin. Për shembull, për të ndryshuar ngjyrë ju duhet të ndërtoni zinxhirin e mëposhtëm - elem.stil.ngjyre - dhe caktojeni vlerën e dëshiruar të ngjyrës:

funksioni func () (var elem \u003d document.getElementById ("provë"); elem.style.color \u003d "e kuqe";)

Mund të heqësh edhe ndryshoren elemdhe të ndërtojë zinxhir shumë i gjatë.

e brendshmeHTML
teksti var \u003d element.innerHTML;
element.innerHTML \u003d "";
Caktimi i një HTMLH të ri të brendshëm do të zëvendësojë kodin, edhe nëse vlera e re i bashkangjitet vlerës aktuale (+ \u003d). Skriptet e shtuara në këtë mënyrë nuk ekzekutohen.

e jashtmeHTML
Përmban të gjithë elementin, nuk mund të ndryshohet. Teknikisht, shkrimi në këtë pronë krijon një element të ri që zëvendëson atë të vjetër. Referencat për elementin e vjetër në variabla nuk ndryshohen.

të dhëna
textNode.data - përmbajtja e nyjeve të tekstit dhe komenteve

teksti Përmbajtja
element.textPërmbajtja - teksti brenda elementit pa etiketa.
Ekziston edhe një pronë e brendshmeText me porosi që ka shumë të përbashkëta me përmbajtjen e tekstit.

Dukshmëria e elementit

i fshehur
element.fshehur \u003d e vërtetë
Atributi i fshehur nuk mbështetet në IE11.

Atributet

Shumica e atributeve standarde në DOM bëhen veti të objektit:
element.id \u003d "id"
Asnjë pronë nuk është krijuar për atribute jo standarde (e papërcaktuar)

Ju mund të krijoni vetitë tuaja DOM:
element.myData \u003d (emri: "John", Mbiemri: "Smith");
dhe metodat:
element.myFunc \u003d funksioni () (njoftoni këtë.Emri i nyjes);
Kjo funksionon sepse nyjet DOM janë objekte të rregullta JavaScript. Veti dhe metoda të tilla jo standarde nuk ndikojnë në shfaqjen e etiketës dhe janë të dukshme vetëm në JavaScript.

Përdorimi i atributeve të etiketave:
element.hasAribute (emri)
element.getAttribute (emri)
element.setAttribute (emri, vlera)
element. hiqni atributin (emri)
elementi.tributet është një grup pseudo-atributesh.

Atributet nuk janë të ndjeshme në shkronja të mëdha (html) dhe vetitë janë të ndjeshme (javaScript).
Vlera e atributit është gjithmonë një varg.

Atributi: a.getAttribute ("href") - tregon saktësisht atë që është në HTML
Prona: a.href - mund të ndryshojë nga vlera e atributit
Më shpesh, një pronë varet nga një atribut, por jo anasjelltas. Ndryshimi i pronës nuk ndikon në atributin.

Puna me klasa

Atributi i klasës ka dy veti:
Emri i klasës - varg
classList - objekt

metodat e objektit classList:
element.classList.contains ("klasa") - kontrolloni nëse objekti përmban klasën e dhënë
element.classList.add ("klasa")
element.classList.remove ("klasa")
element.classList.toggle ("klasa")

classList është një pseudo-grup dhe mund të përsëritet përmes një loop for.

atributet e të dhënave

Atributet e të dhënave të personalizuara janë të disponueshme jo vetëm si atribute, por edhe përmes vetisë së të dhënave
data-about \u003d "disa vlera"
element.dataset.rreth

Rendi i nyjeve

prindi.përmban (fëmijë) - e vërtetë apo e gabuar
kontrollon nëse nyja e fëmijës është e vendosur në prind

nodeA.compareDocumentPosition (nodeB) - Jep informacion në lidhje me përmbajtjen dhe rendin relativ të elementeve. Vlera e kthimit është një maskë bitwise:

Shtimi dhe heqja e nyjeve

var div \u003d document.createElement ("div")
document.createTextNode ("teksti")

prindi.appendChild (element) - elementi shtohet në fund të prindit
prindi.insertBefore (elementi, nextSibling) - elementi shtohet paraSibling next
prindi.inerBefore (elementi, prindi.fëmija i parë) - shtuar në fillim
prindi.inerBefore (element, null) - punon si appendChild
Të gjitha metodat e insertimit kthejnë nyjen e futur.
Kur lëvizni një element, nuk keni nevojë ta hiqni më parë nga vendi i vjetër, metodat e futjes e bëjnë këtë automatikisht.

element.insertAdjacentHTML (ku, html) - fut kodin HTML arbitrar kudo në dokument. Ku specifikon se ku duhet futur html në lidhje me elementin - paraBegin, afterBegin, beforeEnd, afterEnd.
element.insertAdjacentElement (ku, newElement)
element.insertAdjacentText (ku, teksti)
dy metodat e fundit nuk mbështeten në Firefox

nyja. shtoni (... nyjet) - fut nyjet në fund të një nyje,
nyja.prepend (... nyjet) - fut nyjet në fillim të një nyje,
nyja. pas (... nyjeve) - fut nyjet pas nyjes,
nyja. para (... nyjet) - fut nyjet para nyjes,
nyja.vendosimMe (... nyjet) - fut nyjet në vend të nyjes.
këtu nyjet janë nyje ose vargje, në çdo sasi dhe kombinim, të ndara me presje.

fra fragment \u003d document.createDocumentFragment () - imitim i një nyjeje DOM, e cila zhduket kur futet në dokument, duke lënë vetëm fëmijët e saj. Nuk rekomandohet në shfletuesit modernë.

element.cloneNode (e vërtetë) - kopje e thellë e elementit
element.cloneNode (false) - kopjoni pa fëmijë

prindi. heq fëmijën (element)
prindi. zëvendësimi i fëmijëve (elementi i ri, elementi)
element.remove () - heq elementin direkt, pa iu referuar prindit.
Metodat kthejnë nyjen e largët

Duke punuar me DOM

Secili objekt i Dritares ka një pronë dokumentqë i referohet objektit të Dokumentit. Ky objekt i Dokumentit nuk është një objekt më vete. Isshtë pjesa qendrore e një API të gjerë e njohur si Modeli i Objektit të Dokumentit (DOM), i cili përcakton se si të hyni në përmbajtjen e dokumentit.

Pasqyrë e modelit DOM

Modeli i objektit të dokumentit (DOM) është një API themelore që ju mundëson të punoni me përmbajtje HTML dhe XML. Ndërfaqja e programimit të aplikacionit DOM (API) nuk është veçanërisht komplekse, por ka shumë karakteristika arkitektonike për të cilat duhet të keni kujdes.

Para së gjithash, duhet të kuptoni që elementet e ngulitura të dokumenteve HTML ose XML përfaqësohen si një pemë e objekteve DOM. Pamja pemë e një dokumenti HTML përmban nyje që përfaqësojnë elemente ose etiketime të tilla si dhe

Dhe nyjet që përfaqësojnë linjat e tekstit. Një dokument HTML mund të përmbajë gjithashtu nyje që përfaqësojnë komente HTML. Merrni parasysh dokumentin vijues të thjeshtë HTML:

Ky është një dokument HTML

Shembull e thjeshtë teksti.

Përfaqësimi DOM i këtij dokumenti tregohet në diagramin vijues:

Për ata që nuk janë ende të njohur me strukturat e pemëve në programimin kompjuterik, është e dobishme të dinë se terminologjia për përshkrimin e tyre është huazuar nga pemët familjare. Nyja e vendosur direkt mbi këtë nyje quhet prindi në lidhje me këtë nyje. Nyjet e vendosura një nivel poshtë një nyje tjetër janë filial në lidhje me këtë nyje. Thirren nyjet që janë në të njëjtin nivel dhe kanë të njëjtin prind infermieria... Nyjet që janë cilido numër i niveleve poshtë një nyje tjetër janë pasardhësit e saj. Prindërit, gjyshërit dhe çdo nyje tjetër mbi këtë nyje janë paraardhësit e saj.

Çdo drejtkëndësh në këtë diagram është një nyje dokumenti që përfaqësohet nga një objekt Nyja... Vini re se figura tregon tre lloje të ndryshme të nyjeve. Rrënja e pemës është nyja Document, e cila përfaqëson të gjithë dokumentin. Nyjet që përfaqësojnë elementet HTML janë nyjet e elementeve, dhe nyjet që përfaqësojnë tekstin janë nyjet e tekstit. Dokumenti, Elementi dhe Teksti janë nënklasa të Nyjes. Dokumenti dhe Elementi janë dy klasat më të rëndësishme në DOM.

Lloji i Nyjes dhe nëntipet e tij formojnë hierarkinë e tipit të përshkruar në diagramin më poshtë. Vini re ndryshimet zyrtare midis llojeve të përgjithshme të Dokumentit dhe Elementit, dhe llojeve të dokumentit HTMLD dhe HTMLElement. Lloji i dokumentit përfaqëson një dokument HTML dhe XML, dhe klasa Element përfaqëson një element të atij dokumenti. Nënklasat HTMLDocument dhe HTMLElement përfaqësojnë posaçërisht një dokument HTML dhe elementet e tij:

Duhet gjithashtu të theksohet në këtë diagram që ka shumë nëntipe të klasës HTMLElement që përfaqësojnë lloje specifike të elementeve HTML. Secila prej këtyre përcakton vetitë JavaScript që pasqyrojnë atributet HTML të një elementi të veçantë ose një grupi elementesh. Disa nga këto klasa specifike përcaktojnë veti ose metoda shtesë që nuk pasqyrojnë sintaksën e gjuhës HTML të shënjimit.

Përzgjedhja e elementeve të dokumentit

Shumica e programeve të klientëve JavaScript punojnë në një mënyrë ose në një tjetër për të manipuluar elementet e dokumentit. Në kohën e ekzekutimit, këto programe mund të përdorin ndryshoren globale të dokumentit që i referohet objektit Document. Sidoqoftë, për të kryer ndonjë manipulim të elementeve në dokument, programi duhet disi të rimarrë, ose të zgjedhë, objektet e Elementit që u referohen atyre elementeve në dokument. DOM përcakton disa mënyra për të zgjedhur elementët. Mund të zgjidhni një element ose elemente të një dokumenti:

nga vlera e atributit id;

nga vlera e atributit të emrit;

me emrin e etiketës;

me emrin e klasës ose klasave CSS;

rastësisht me një përzgjedhës specifik të CSS.

Të gjitha këto teknika të përzgjedhjes përshkruhen në nënseksionet vijuese.

Përzgjedhja e elementeve sipas vlerës së atributit id

Të gjithë elementët HTML kanë atribute id. Vlera e kësaj atribute duhet të jetë unike brenda dokumentit - asnjë element në të njëjtin dokument nuk duhet të ketë të njëjtën vlerë të atributit id. Ju mund të zgjidhni një element me vlerën unike të atributit id duke përdorur metodën getElementById () Dokumenti objekt:

Var seksioni1 \u003d document.getElementById ("seksioni1");

Kjo është mënyra më e thjeshtë dhe më e zakonshme për të zgjedhur artikujt. Nëse një skenar ka nevojë të jetë në gjendje të manipulojë një grup specifik të elementeve të dokumentit, caktoni vlera atributeve id të këtyre elementeve dhe përdorni aftësinë për t'i kërkuar ato nga këto vlera.

Në versionet e Internet Explorer para IE8, metoda getElementById () kërkon për vlerat e atributit id në mënyrë të pandjeshme dhe gjithashtu kthen elemente që përputhen me vlerën e atributit të emrit.

Përzgjedhja e elementeve sipas vlerës së atributit të emrit

Atributi i emrit HTML fillimisht ishte menduar për emërtimin e elementeve të formës dhe vlera e kësaj atribute u përdor kur të dhënat e formës u dërguan në server. Ashtu si atributi id, atributi emër i cakton një emër një elementi. Sidoqoftë, ndryshe nga id, vlera e atributit të emrit nuk duhet të jetë unike: disa elementë mund të kenë të njëjtin emër në të njëjtën kohë, gjë që është mjaft e zakonshme kur përdorni butonat e radios dhe kutitë e zgjedhjes në forma. Gjithashtu, ndryshe nga id, atributi i emrit lejohet vetëm në disa elemente HTML, duke përfshirë format, elementet e formës dhe elementet.