Në mënyrë që skenari të funksionojë me ndonjë element të faqes, së pari duhet të gjendet ky element. Ka disa mënyra për ta bërë këtë në JavaScript. Elementi i gjetur zakonisht i caktohet një ndryshore, dhe më vonë, përmes kësaj ndryshore, srkipt i referohet elementit dhe kryen disa veprime me të.

Kërko sipas id

Nëse atributi id është vendosur për një element në kodin e faqes, atëherë elementi mund të gjendet nga id. Kjo është mënyra më e lehtë. Elementi kërkohet duke përdorur metodën getElementById () të objektit global të dokumentit.

dokument.getElementById (id)

Parametrat:

id - id i elementit për të gjetur. id është një varg, prandaj duhet të citohet.

Le të krijojmë një faqe, t'i shtojmë një element dhe t'i caktojmë një ID, dhe ta gjejmë këtë element në skenar:

Kodi HTML:

JavaScript:

Ne ia caktuam elementin e gjetur bllokut të ndryshores dhe e shtypëm variablin në tastierë. Hapni konsolën tuaj të shfletuesit, duhet të ketë një artikull të shënuar.

Meqenëse kërkimi me id është mënyra më e lehtë dhe më e përshtatshme, ajo shpesh përdoret. Nëse keni nevojë të punoni me ndonjë element në skenar, atëherë atributi id është vendosur për këtë element në kodin e faqes, edhe nëse nuk është vendosur më herët. Dhe ata e gjejnë elementin me id.

Kërkoni sipas klasës

Metoda getElementByClassName () ju lejon të gjeni të gjithë elementët që i përkasin një klase specifike.

document.getElementByClassName (klasa)

Parametrat:

klasa - klasa e elementeve për të gjetur

Metoda kthen një pseudo-grup që përmban elementet e gjetura. Quhet një koleksion pseudo sepse shumë nga metodat e grupit nuk funksionojnë për të. Por prona kryesore mbetet - ju mund t'i referoheni çdo elementi të grupit. Edhe nëse gjendet vetëm një element, ai është përsëri në grup.

Le të shtojmë elemente në faqe dhe t'u japim atyre një klasë. Ne do të vendosim disa nga elementet brenda bllokut që kemi krijuar më parë. Le të krijojmë pjesën tjetër jashtë bllokut. Kuptimi i kësaj do të jetë i qartë pak më vonë. Faqja tani do të duket kështu:

Kodi HTML:

JavaScript:

Tani gjenden vetëm ato elemente që ndodhen në bllok.

Kërko me etiketë

Metoda getElementByTagName () gjen të gjithë elementët me një etiketë specifike. Kthen gjithashtu një pseudo-grup me elementët e gjetur.

document.getElementByTagName (etiketa)

Parametrat:

tag - etiketa e elementeve për të gjetur

Le të gjejmë të gjitha etiketat p që janë në faqe:

Kjo metodë mund të zbatohet gjithashtu jo për të gjithë dokumentin, por për një element specifik. Gjeni të gjitha etiketat p në bllok.

Kërkoni sipas përzgjedhësit

Ka metoda querySelector () dhe querySelectorAll () që gjejnë elemente që përputhen me një përzgjedhës specifik. Kjo do të thotë, do të gjenden elemente në të cilat do të ishte aplikuar stili nëse do të ishte specifikuar për një përzgjedhës të tillë. Në të njëjtën kohë, prania e një përzgjedhësi të tillë në stilin e faqes nuk është aspak e nevojshme. Këto metoda nuk kanë asnjë lidhje me CSS. Metoda querySelectorAll () gjen të gjithë elementët që përputhen me zgjedhësin. Dhe metoda querySelector () gjen një element që është i pari në kodin e faqes. Këto metoda mund të zëvendësojnë të gjitha metodat e kërkimit të elementeve të diskutuara më parë, sepse ekziston një selektor nga id, një selektor nga etiketë dhe shumë të tjerë.

dokument.pyetjeSelektor (përzgjedhës)

document.querySelectorAll (përzgjedhësi)

Përzgjedhësit shkruhen saktësisht në të njëjtën mënyrë si në CSS, vetëm mos harroni të vendosni citate.

Le të shtojmë një listë në faqe dhe ta gjejmë atë nga përzgjedhësi. Ne po kërkojmë vetëm një element dhe e dimë me siguri se do të jetë i pari, sepse ka vetëm një në faqe. Prandaj, në këtë rast, është më e përshtatshme të përdoret metoda querySelector (). Por kur përdorni këtë metodë, duhet të merrni parasysh që të njëjtat elementë mund të shtohen në faqe në të ardhmen. Sidoqoftë, kjo vlen për shumicën e metodave.

Kodi HTML:

Këto metoda gjithashtu mund të kërkojnë elemente jo në të gjithë dokumentin, por brenda një elementi specifik.

Në shembull, ne përdorëm vetëm selektorë me etiketë. Mundohuni të gjeni elementët e faqes duke përdorur përzgjedhës të tjerë.

Elementet fqinje

Për elementin e gjetur, mund të gjesh fqinjë. Secili element është një objekt, dhe elementet fqinje mund të merren përmes vetive të këtij objekti. Prona e mëparshmeElementSibling përmban elementin e mëparshëm, dhe prona tjetërElementSibling përmban elementin tjetër.

element.paraprakeElementitBibling

elementi.lementi tjetërBibling

Le të gjejmë elementin që vijon bllokun:

Elementet e fëmijës

Prona e fëmijëve përmban një grup fëmijësh.

element.fëmijët

Le të gjejmë fëmijët e bllokut.

Modeli i objektit të dokumentit - DOM nuk është asgjë më shumë se një strukturë peme e përbërë nga etiketat që ekzistojnë në Html dokument

Ne i kemi të gjitha këto elemente Htmltë vendosura pranë njëri-tjetrit që duam të marrim, dhe pastaj të lexojmë të dhënat në to ose të ndryshojmë. Ka shumë mënyra për të gjetur këto etiketa pasi ato janë rregulluar në një strukturë peme. Në këtë artikull, ju do të mësoni se si të përdorni dy funksione të integruara JavaScript, të tilla si pyetësiZgjedhësi dhe pyetësiZgjedhësiTë gjitha për kërkim html etiketat.

Metoda e pyetësitSelektor

Për të kuptuar thelbin e funksionimit të metodave pyetësiZgjedhësi dhe pyetësiZgjedhësiTë gjitha shikoni HTML në vijim:

Në këtë shembull, ne kemi një div me id kryesore dhe katër elemente të mbivendosur div dhe img, secila prej të cilave ka një vlerë klasore pic-kontejner dhe profileImage përkatësisht. Në seksionet e ardhshme, ne do të zbatojmë funksionet pyetësiZgjedhësi dhe pyetësiZgjedhësiTë gjitha Në këtë Kod HTML dhe shikoni se çfarë do të ndodhë.

pyetësiZgjedhësi

Funksioni pyetësiZgjedhësi punon si kjo:

Elementi Var \u003d document.querySelector ("< CSS selector >");

Funksioni i pyetësit merr nje argument dhe ky argument eshte Përzgjedhësi i CSS për elementin që dëshironi të gjeni. Çfarë kthehet funksioni i zgjedhësit, është elementi i parë që gjen, edhe nëse ka elementë të tjerë që mund të jenë të ngjashëm me këtë përzgjedhës.

Duke shikuar Html nga shembulli ynë i mëparshëm, nëse duam të qasemi divid i te cilit eshte kryesore, ju duhet të shkruani sa vijon:

Elementi Var \u003d document.querySelector ("# kryesore");

Për aq sa kryesore është një identifikues, sintaksa përzgjedhëse për ta marrë do të ishte # kryesore ... Po kështu, zgjedhësi i klasës pic-kontejner :

Elementi Var \u003d document.querySelector (". Pik-kontejner");

Blloku i parë kthehet div vlera e klasës së të cilit është pic-kontejner ... Elementet e mbetura div me vlerë klasore pic-kontejner thjesht injorohen.

Sintaksa zgjedhëse për këtë funksion nuk është krijuar posaçërisht, kështu që mund të përdorni sintaksën e saktë që do të përdorni për përzgjedhësit në një fletë stilesh!

Kjo është e gjitha, dhe në artikullin tjetër do t'ju tregoj për funksionin vijues pyetësiZgjedhësiTë gjitha.

JavaScript, si CSS, ka funksionalitet që ju lejon t'u referoheni elementeve HTML për të transformuar përmbajtjen e faqes. Në CSS, kjo arrihet duke shkruar përzgjedhës. Ka disa mënyra për të organizuar këtë funksionalitet në JavaScript, dhe këtu është njëra prej tyre:

Var basicHeadings \u003d document.getElementByTagName ("h1");

Ky kod nxjerr të gjitha kokat e h1 dhe, duke folur afërsisht, i vendos ato në ndryshoren primareHeadings. Nëse ka disa koka në faqe, të gjitha ato do të vendosen në një grup.

Var ou812 \u003d document.getElementById ("eddie");

Ky kod zgjedh elementin me id \u003d "eddie".

Kitarat e ndryshme \u003d dokument.getElementByClassName ("boshtet");

Ne gjithashtu mund të zgjedhim elemente sipas emrave të klasave të tyre.

Shtoni ca cëcëritës

Korniza të ndryshme JavaScript sigurojnë aftësitë e tyre përbërëse të përzgjedhësit. Një nga më të suksesshmit ishte Sizzle, e cila më vonë u shndërrua në jQuery. Ndryshe nga pasardhësi i saj, Sizzle mund të punonte dhe manipulonte vetëm DOM. Nëse nuk ju duhen të gjitha pjesa tjetër e funksionalitetit të jQuery, përsëri mund ta shkarkoni Sizzle si një bibliotekë e pavarur edhe sot.

Me zhvillimin e këtyre bibliotekave, përzgjedhësit e shkrimeve janë zvogëluar dhe transformuar ndjeshëm:

$ ("# dave"). css ()

Ky kod nxjerr elementin html me id \u003d "dave" dhe ju lejon të punoni me stilet e tij css.

Sizzle nuk është biblioteka e vetme JavaScript për manipulimin e kodit HTML. Ekzistojnë edhe mundësi të tjera, si tërbimi. Sidoqoftë, për mendimin tim, të gjitha sa më sipër janë vjetëruar përpara asaj që ju pret më tej në këtë artikull.

Niveli tjetër i JavaScript

Shumë zhvillues filluan të përdorin jQuery aq shpesh sa që ata as nuk i vunë re ndryshimet dramatike në vetë JavaScript.

JavaScript Selector API është pjesa zyrtare e specifikimit HTML5 dhe mund të përdoret për të shkruar faqet XHTML. Sintaksa e re është shumë e thjeshtë:

Document.querySelector ("# eddie")

Ky kod është absolutisht ekuivalent me dokument.getElementById ("eddie"). Jo mbresëlënëse? Po në lidhje me këtë:

Document.querySelector ("# eddie h1 + p")

Funksionaliteti i ri ju lejon të manipuloni DOM duke përdorur shprehje komplekse CSS.

Metoda querySelector tërheq vetëm artikullin e parë që gjen. Për të marrë të gjitha, duhet të përdorni querySelectorAll:

Var hiFrets \u003d document.querySelectorAll ("tabela # frets tr: nth-child (3)")

Ky kod tërheq çdo rresht të tretë nga tabela me id \u003d "frets".

Disa pika shumë të rëndësishme

Ka disa kufizime për të cilat duhet të keni kujdes kur përdorni metodën querySelector / All:

Jo të gjithë shfletuesit mbështesin funksionalitetin e ri. Nëse është e rëndësishme për ju që kodi të funksionojë në IE6-7, atëherë është më mirë të përdorni biblioteka që mund të manipulojnë DOM: Sizzle ose jQuery.

Përzgjedhësit duhet të përbëhen me shumë kujdes, përndryshe shfletuesit nuk do t'i kuptojnë ato, dhe metodat e mësipërme do të kthehen nul. Në përgjithësi, jini shumë të kujdesshëm, veçanërisht kur përdorni zgjedhës të CSS3.

Ndryshe nga getElementsByTagName, metoda querySelectorAll kthen një listë statike të elementeve të rikuperuara siç janë në faqe në një kohë të caktuar. Kjo do të thotë që nëse bëni ndonjë ndryshim dinamik në kod (duke shtuar ose hequr elementë përmes JavaScript), do t'ju duhet të ripërdorni metodën querySelectorAll.

Provoni një funksionalitet të ri për të hequr qafe nevojën për të ngarkuar lloje të ndryshme të bibliotekave.

Në këtë mësim do të shikojmë metodat e objektit të dokumentit, të cilat janë krijuar për të gjetur një nyje ose koleksion të nyjeve në të gjithë një dokument. Dhe gjithashtu metodat e objektit të nyjes (nyjes), të cilat kryejnë veprime të ngjashme, por tashmë midis nyjeve të tyre fëmijë.

Metodat për gjetjen e një nyje ose mbledhjen e nyjeve në një pemë

Në mësimin e mëparshëm, ne shqyrtuam vetitë me të cilat mund të lundrojmë në pemë dhe të gjejmë nyjet që na duhen. Sidoqoftë, gjetja e nyjeve duke përdorur vetitë e tyre është shumë e vështirë dhe joefektive. Prandaj, për të gjetur nyje në një pemë, zhvilluesit e faqeve zakonisht përdorin metoda të dedikuara në objektin ose nyjen e dokumentit.

Metoda GetElementById ()

Metoda getElementById (elementID) kthen elementin në dokument me identifikuesin e specifikuar (id \u003d "elementID") si objekt Nyje. Nëse elementi me identifikuesin e specifikuar nuk ekziston, atëherë kjo metodë kthehet nul.

Sipas standardit, nuk mund të keni disa elementë në një dokument me të njëjtën vlerë të atributit id, d.m.th. vlera e identifikuesit duhet të jetë unike brenda të njëjtit dokument. Sidoqoftë, nëse keni disa elementë me id-në e specifikuar në dokumentin tuaj, atëherë metoda getElementById () do të kthejë elementin e parë të gjetur.

dokument.getElementById (elementID)

Kjo metodë ka një parametër të kërkuar (elementID), i cili është një varg që përmban vlerën e atributit id të elementit që dëshironi të rimarrni.

Për shembull, ndryshoni ngjyrën e tekstit të elementit me id \u003d "nameArticie".

Titulli i artikullit

• 1 pikë
• 2 pikë
• 3 pikë

Metoda GetElementsByClassName ()

Metoda getElementsByClassName (className) kthen të gjithë elementët e gjetur në dokument (për dokument) ose midis nyjeve fëmijë (për nyjen) që kanë emrin e specifikuar të klasës (class \u003d "className") si objekt NodeList (koleksion i nyjeve). Me fjalë të tjera, kjo metodë kthen një objekt NodeList, i cili është një koleksion i elementeve (nyjeve) që kanë emrin e klasës të specifikuar në parametrin e kësaj metode.

Për të marrë numrin e nyjeve të gjetura duhet të përdorni vetinë e gjatësisë së objektit NodeList. Dhe për të përsëritur mbi të gjitha nyjet në koleksion, mund të përdorni lakun e mëposhtëm:

Var elementeList \u003d dokument.getElementByClassName ("lista"); për (var i \u003d 0; i

document.getElementByClassName (emri i klasës);
nyja (nyja) .getElementByClassName (emri i klasës);

Kjo metodë ka një parametër të kërkuar (className), i cili është një varg që përmban emrin e klasës së elementeve që dëshironi të merrni. Nëse dëshironi të merrni elemente që kanë disa klasa të specifikuara, atëherë ato duhet të ndahen në parametrin e kësaj metode duke përdorur një hapësirë. Për shembull, merrni një koleksion të nyjeve që kanë klasa classl dhe class2:

Document.getElementByClassName ("classl class2");

Për shembull, ndryshoni ngjyrën e sfondit të elementeve që kanë një klasë liste:

Titulli i artikullit

• 1 pikë
• 2 pikë
• 3 pikë

• 1 pikë
• 2 pikë

Për shembull, merrni një koleksion të elementeve (nyjeve) që kanë klasën e listës. Tjetra, merrni 2 nyje në këtë koleksion, d.m.th. nyja me indeks 1. Pastaj ndryshoni ngjyrën e sfondit të nyjes që rezulton.

// Merrni një koleksion të elementeve që kanë klasën e listës var elementList \u003d document.getElementByClassName ("lista"); // Merrni nyjen e 2-të në koleksionin var secondList \u003d elementsList; // Ndryshoni ngjyrën e sfondit të elementit secondList.style.backgroundColor \u003d "e kuqe";

Metoda GetElementByTagName ()

Metoda getElementByTagName (emri i etiketës) kthen të gjithë elementët e gjetur në dokument (për dokumentin) ose midis nyjeve fëmijë (për nyjen) që kanë etiketën e specifikuar si objekt NodeList (koleksioni i nyjeve). Marrja e një nyje specifike në një koleksion bëhet me indeks. Numërimi i elementeve (nyjeve) në koleksion fillon nga 0.

document.getElementByTagName (emri i etiketës);
nyja (nyja) .getElementByTagName (emri i etiketës);

Kjo metodë ka një parametër të kërkuar (emri i etiketës), i cili është një varg që përmban emrin e etiketës me shkronja të mëdha. Nëse specifikoni një varg që përmban një yll ("*") si një parametër, atëherë ne marrim të gjitha elementet në dokument (për objektin e dokumentit) ose të gjithë elementët fëmijë të nyjes (për objektin e nyjes).

Për të marrë numrin e nyjeve të gjetura që përmbahen në koleksion, duhet të përdorni vetinë e gjatësisë së objektit NodeList. Dhe për të përsëritur mbi të gjitha nyjet në koleksion, mund të përdorni lakun e mëposhtëm:

Var elementeListë \u003d dokument.getElementByTagName ("LI"); për (var i \u003d 0; i

Për shembull, ndryshoni ngjyrën e sfondit të elementeve LI:

Titulli i artikullit

• 1 pikë
• 2 pikë
• 3 pikë

Për shembull, merrni një koleksion të artikujve UL. Pastaj merrni 1 nyje në këtë koleksion, d.m.th. nyja me indeks 0. Atëherë merrni koleksionin e nyjeve fëmijë LI për këtë nyje. Në fund, ndryshoni madhësinë e shkronjave të secilit artikull në këtë koleksion.

// Merrni koleksionin e elementeve UL var elementULULUL \u003d dokument.getElementByTagName ("UL"); // Merrni 1 nyje në këtë koleksion var elementUL \u003d elementUL; // Merrni koleksionin e Fëmijëve LI të elementit nyja element var varLI \u003d elementUL.getElementByTagName ("LI"); // përsëris mbi të gjitha elementet në koleksion për (var i \u003d 0; i

Metoda GetElementByName ()

Metoda getElementByName (emri) kthen të gjithë elementët e gjetur në dokument që kanë emrin e specifikuar (vlerën e atributit të emrit) si objekt NodeList (koleksion nyjesh).

Sendet (nyjet) i shtohen koleksionit sipas radhës në të cilën ato shfaqen në pemë. Marrja e një nyje specifike në një koleksion bëhet me indeks. Numërimi i elementeve (nyjeve) në koleksion fillon nga 0.

Var elementeListë \u003d dokument.getElementByName ("telefoni"); për (var i \u003d 0; i

Shënim: HTML5 ka zhvlerësuar atributin e emrit dhe e ka zëvendësuar atë me atributin id për shumicën e elementeve.

dokument.getElementByName (emri)

Kjo metodë ka një parametër të kërkuar (emër), i cili është një varg që përmban vlerën e atributit të emrit.

Për shembull, ndryshoni ngjyrën e sfondit të elementeve që kanë një atribut të emrit me vlerën e telefonit (emri \u003d "telefoni"):

Telefoni: Një telefon tjetër:

Metoda QuerySelector ()

Metoda querySelector () kthen elementin e parë të gjetur në dokument (për dokumentin) ose midis nyjeve fëmijë (për nyjen) që përputhet me përzgjedhësin CSS të specifikuar si një parametër në këtë metodë. Nëse asnjë element nuk përputhet me përzgjedhësin e CSS, atëherë kjo metodë kthehet nul.

document.querySelector (cssSelector)
nyja.querySelector (cssSelector)

Kjo metodë ka një parametër të kërkuar (cssSelector), i cili është një varg që përmban një zgjedhës CSS sipas të cilit zgjidhet elementi.

Për shembull, ndryshoni ngjyrën e tekstit të elementit të parë të gjetur që përputhet me zgjedhësin # kryesor p:

Për shembull, merrni një koleksion të elementeve DIV në një dokument. Pastaj merrni 1 nyje në këtë koleksion, d.m.th. nyja me indeks 0. Për këtë nyje, gjeni midis nyjeve të tij fëmijë elementin e parë që përputhet me zgjedhësin e CSS h1 + p. Pastaj ndryshoni madhësinë e shkronjave të këtij elementi.

// Merrni një koleksion të elementeve DIV var elementDIV \u003d document.getElementByTagName ("DIV"); // Merrni 1 nyje në këtë koleksion var elementDIV \u003d elementsDIV; // Merrni nyjen p menjëherë pas nyjës h1 // Kërkoni për nyjën midis nyjeve fëmijë të nyjës, e cila është ruajtur në variablën elementDIV var elementP \u003d elementDIV.querySelector ("h1 + p"); // ndryshoni madhësinë e fontit të elementit elementP.style.fontSize \u003d "30px";

Metoda QuerySelectorAll ()

Metoda querySelectorAll () kthen të gjithë elementët e gjetur në dokument (për dokumentin) ose midis nyjeve fëmijë (për nyjen) që përputhen me përzgjedhësin CSS të specifikuar si një parametër të kësaj metode, si një objekt NodeList (koleksioni i nyjeve). Nyjet në koleksion referohen nga indeksi. Numërimi i elementeve (nyjeve) në koleksion fillon nga 0.

Për të marrë numrin e nyjeve të gjetura, përdorni vetinë e gjatësisë së objektit NodeList. Dhe për të përsëritur mbi të gjitha nyjet në koleksion, mund të përdorni lakun e mëposhtëm:

Var elementeList \u003d document.querySelectorAll ("# kryesore p"); për (var i \u003d 0; i

document.querySelectorAll (cssSelector);
nyja (nyja) .pyetjaSelectorAll (cssSelector);

Kjo metodë ka një parametër të kërkuar (cssSelector), i cili është një varg që përmban një përzgjedhës CSS sipas të cilit zgjidhen elementet. Për të specifikuar disa selektorë në një parametër të kësaj metode, ata duhet të ndahen me presje.

Për shembull, ndryshoni ngjyrën e tekstit të elementeve që përputhen me zgjedhësin # kryesor p:

Për shembull, merrni një nyje fëmije që ka një atribut id të shiritit anësor. Ndryshoni ngjyrën e sfondit të fëmijëve p të nyjes të marrë në hapin e mëparshëm:

// merrni elementin (nyjen) me id \u003d "shiritin anësor" var sidebar \u003d dokument.getElementById ("shiritin anësor"); // merrni koleksionin e nyjeve që përputhen me zgjedhësin "p" var elementListP \u003d sidebar.querySelectorAll ("p"); // përsëris mbi të gjitha elementet në koleksion për (var i \u003d 0; i

Detyrë

Shkruani kodin JavaScript duke përdorur metodat getElementById (), getElementsByClassName (), getElementByTagName (), querySelector (), querySelectorAll () për detyrat e mëposhtme:

1. Merrni të gjithë elementët p të vendosur në bllokun kryesor;
2. Merrni bllokun anash të vendosur në div enë;
3. Merrni bllokun e faqes së poshtme të vendosur në enën e trupit.

Kryeni secilën detyrë në sa më shumë mënyra të ndryshme të jetë e mundur.

Detyra që shpesh përballet me zhvilluesit fillestarë të javascript është zgjedhja e një elementi në një faqe në internet nga atributi i tij id.

Le të supozojmë se kemi një kod në faqe.

Si mund të zgjidhni një element me id \u003d "elem" dhe të kryeni një numër veprimesh me të?

Ekzistojnë disa mundësi për zgjidhjen e problemit. Le t'i shohim tani.

Opsioni 1. Përdorni metodën Javascript getElementById.

Ekziston një mënyrë se si ju mund t'i referoheni një elementi përmes id-së së tij duke përdorur kodin "e pastër" javascript, pa përdorur ndonjë bibliotekë të palëve të treta. Kjo mënyrë është të përdorni metodën ggetElementById ("element_id"). Kështu, ne i referohemi elementit që na nevojitet me id e tij.

Le të shohim se si funksionon kjo me një shembull të thjeshtë.

Vini re se këto rreshta kodi (skenar) janë poshtë vetë elementit. Ky është një parakusht për funksionimin e këtij skenari, sepse Kodi Javascript ekzekutohet ndërsa faqja ngarkohet. Nëse vendosim kodin sipër, atëherë do t’i referohemi një elementi në faqe që nuk është ngarkuar ende, d.m.th. nuk do të jetë ende në kod në kohën e ekzekutimit të skenarit. Ka mënyra për ta shmangur këtë, por kjo është përtej qëllimit të këtij neni.

Si rezultat, nëse gjithçka funksionon si duhet, ne do të marrim një dritare pop-up. Kjo dritare do të shfaqë tekstin që është brenda bllokut div.

Le të shohim tani se si mund ta zgjidhni këtë problem në një mënyrë tjetër.

Opsioni 2. Përdorimi i bibliotekës Jquery.

Opsioni i dytë për zgjedhjen e një elementi nga id i tij është përdorimi i bibliotekës Jquery. Në praktikë, në skriptet moderne, kjo metodë përdoret më shpesh. Muchshtë shumë më i përshtatshëm dhe më i lehtë për tu mbajtur mend.

Për t'iu referuar një elementi sipas ID-së së tij, duhet të përdorni konstruksionin:

$ ("# elem")

Këtu elem është emri që përmbahet në atributin id.

Sepse ne do të përdorim një bibliotekë të palëve të treta Javascript të quajtur Jquery, atëherë kjo bibliotekë duhet së pari të lidhet.

Isshtë shtuar në seksion , një mënyrë për ta bërë këtë është të shtoni rreshtin vijues të kodit:

Duhet të ketë një lidhje interneti që biblioteka të ngarkohet.

Vetë skenari, si në shembullin e mëparshëm, duhet të jetë i vendosur poshtë kodit të elementit me të cilin dëshironi të bashkëveproni.

Kështu, ne kemi diskutuar dy mënyra sesi mund të zgjidhni një element në një faqe në internet nga atributi i tij id dhe të ndërveproni me të. Zgjidhni metodën që ju përshtatet dhe përdorni atë në praktikë.