JavaScript - DOM: metodat për gjetjen e nyjeve. Përzgjedhësit e Javascript dhe Jquery. Përzgjedhja e një elementi nga id Properties dhe atributet e objektit të dokumentit në javaScript

Standardi DOM ofron disa mjete për të gjetur një element. Këto janë getElementById, getElementByTagName dhe getElementByName.

Bibliotekat Javascript ofrojnë metoda më të fuqishme kërkimi.

Kërko sipas id

Mënyra më e përshtatshme për të gjetur një element në DOM është ta merrni atë me id. Për ta bërë këtë, thirrni document.getElementById (id)

Për shembull, kodi i mëposhtëm do të ndryshojë ngjyrën e tekstit në blu në div "e c id \u003d" dataKeeper ":

Document.getElementById ("dataKeeper"). Style.color \u003d "blu"

Kërko me etiketë

Mënyra tjetër është marrja e të gjithë elementëve me një etiketë specifike dhe kërkimi i një prej tyre të dëshiruar. Kjo është ajo për të cilën përdoret dokumenti.getElementByTagName (etiketa). Kthen një varg elementësh që kanë këtë etiketë.

Për shembull, mund të merrni elementin e dytë (numërimi në grup fillon nga zero) me etiketën li:

Document.getElementByTagName ("LI")

Interesante, getElementByTagName mund të thirret jo vetëm për dokumentin, por në përgjithësi për çdo element që ka një etiketë (jo tekst).

Kjo do të gjejë vetëm objekte që janë nën këtë element.

Për shembull, thirrja e mëposhtme merr një listë të elementeve LI që janë brenda etiketës së parë div:

Document.getElementByTagName ("DIV"). GetElementByTagName ("LI")

Merrni të gjithë pasardhësit

Thirrja e elem.getElementByTagName ("*") do të kthejë një listë të të gjithë fëmijëve të nyjës elem duke i anashkaluar ato.

Për shembull, në një DOM si kjo:

Kodoni si ky:

Var div \u003d dokument.getElementById ("d1") var elems \u003d div.getElementByTagName ("*") për (var i \u003d 0; i

Do të shtypë sekuencën: ol1, li1, li2.

Kërkoni sipas emrit: getElementByName

Metoda dokument.getElementByName (emri) kthen të gjithë elementët emri i të cilëve (atributi i emrit) është i barabartë me atë të dhënë.

Ai punon vetëm me ato elemente për të cilat atributi i emrit është dhënë në mënyrë të qartë në specifikim: këto janë forma, hyrja, a, zgjedhja, zona e tekstit dhe një numër i të tjerëve, më të rralla.

Metoda dokument.getElementByName nuk do të funksionojë me elementë të tjerë si divs, p, etj.

metodat e tjera

Ka mënyra të tjera për të kërkuar në DOM: XPath, cssQuery, etj. Në mënyrë tipike, ato implementohen nga bibliotekat javascript për të zgjeruar aftësitë standarde të shfletuesit.

Ekziston edhe një metodë getElementsByClassName për gjetjen e elementeve sipas klasës, por nuk funksionon aspak në IE, kështu që askush nuk e përdor atë në formën e tij të pastër.

Një shtypshkronjë e zakonshme shoqërohet me një letër që mungon s në metodën emri getElementById, ndërsa në metodat e tjera kjo shkronjë është: getElement sNga emri

Rregulli këtu është i thjeshtë: një element është një Element, shumë janë një Element. s ... Të gjitha * Metodat e elementeve s* ktheni një listë të nyjeve.

Në mësimin e fundit, u diskutua metoda getElementByTagName, e cila kthen një koleksion ( grupi) elementet e faqes sipas emrit të etiketës.

Këtu keni një punë pak më praktike me javascript dhe metodën getElementById, e cila kthen një referencë në element, duke u përqëndruar në id e saj unik.

Metoda getElementById, si getElementByTagName, është një metodë e objektit të dokumentit.

Emri i metodës përkthehet fjalë për fjalë: merrni element me id.

Çdo element ( tegu) të dokumentit në internet mund të caktohet identifikuesi i tij personal, falë të cilit elementi bëhet unik dhe ju mund të përdorni atë për të punuar me të.

Kushtoj vëmendjee: nuk ka asnjë në emrin e metodës në fund të fjalës Element ( në krahasim me metodën getElementsByTagName) Kjo është për lehtësi dhe tregon se metoda përdoret për të zgjedhur një artikull.

Pak sqarime për fragmentin e kodit më sipër ...

• imazhi img ( imazhef) ka një pinguin identifikues id;
• duke përdorur metodën getElementById, ky etiketë e veçantë img zgjidhet nga identifikuesi i pinguinit;
• në një ndryshore unike futet lidhja në etiketën e zgjedhur;
• atëherë mund të punoni me etiketën, si me një objekt përmes një ndryshoreje unike, e ngjashme me mënyrën se si keni punuar me objektin Date përmes një ndryshoreje arbitrare.

Pas hyrjes në element ( tegu) faqe në internet me id-identifikues duke përdorur metodën getElementById, ne tashmë jemi duke punuar me të si një objekt, që do të thotë se kemi qasje në atributet e etiketës për sa i përket vetive të Objektit.

Prandaj, vlerat e atributeve janë tashmë vlera të pronave.

Le të vazhdojmë të punojmë me shembullin e mëparshëm ...

"Pinguin i menduar">

Shpjegime për kodin shembull ...

• imazhi img ( imazhef) ka atribute të caktuara: src - adresa e skedarit, gjerësia dhe lartësia - gjerësia dhe lartësia e figurës, alt - teksti alternativ;
• duke hyrë në etiketë duke përdorur metodën getElementById si objekt, ne kemi qasje në atributet e etiketës, si të kundërshtosh vetitë;
• DHE vlerat e atributeve janë tani vlerat e pasurisë;
• në javascript, vetitë e objektit arrihen përmes një pike. Tjetra, ne shfaqim alt - teksti alternativ i etiketës img duke përdorur metodën e alarmit në ekran.

Shpresoj se nuk jeni hutuar në gjithë këtë. Ju duhet të kuptoni në të njëjtën kohë se çfarë po ndodh në nivelin programatik të javascript dhe në nivelin e shënjimit të dokumentit.

Etiketimi img është një objekt unik;

Atributet e gjerësisë dhe alt të etiketës janë veti të Objektit;

Vlerat e atributit "128" dhe "Pinguin i menduar" - këto janë vlera pasurore;

// Kjo është mënyra se si duket nga një perspektivë e javascript:

var unike \u003d (

gjerësia: "128",

alt: "Pinguin i menduar"

}

Kështu funksionon metoda getElementById, e cila kthen një referencë në çdo element ( etiketë) të një faqe në internet nëse ka një ID unike. Tjetra, ne punojmë me këtë element në nivelin javascript. tashmë si me një objekt...

Duhet të theksohet se: si në mësimin e mëparshëm, këtu - kur punoni me metodën getElementById, rreshti i thirrjes së skriptit duhet të vendoset në fund të dokumentit html

JQuery ofron mundësi të tjera për zgjedhjen e elementeve në një dokument në internet.

Përveç faktit që në faqet e internetit ju mund të zgjidhni elemente nga id-ja e tyre, ne gjithashtu mund të zgjedhim elemente nga atributi i klasës.

Detyra është gjithashtu shumë e zakonshme. Kur shkruaj skenaret e mia, e përdor shumë këtë zgjedhës.

Le të supozojmë se kemi kodin vijues në një faqe.

Detyra është e thjeshtë, duhet të zgjidhni një element me class \u003d "elem" dhe të kryeni disa veprime me të duke përdorur Javascript.

Le të shohim disa opsione se si ta bëjmë këtë.

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

Nëse nuk përdorni ndonjë bibliotekë shtesë, mund t'i referoheni elementit duke përdorur metodën getElementsByClassName ("emri i klasës").

Për shembull, duke iu referuar kodit burimor, mund të shtoni linjat e mëposhtme të kodit.

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

Ju lutem vini re se rezultati i ekzekutimit të metodës getElementsByClassName do të jetë një grup elementesh. mund të ketë disa elementë me të njëjtën klasë në faqe.

Kjo është arsyeja pse në fund të ndërtimit të dokumentit.getElementByClassName ("elem"), duhet të specifikoni që të shfaqet elementi zero i grupit (). Numërimi i Javascript fillon me zero, jo një.

Por problemi me përdorimin e metodës getElementsByClassName është se kjo metodë nuk mbështetet në versionet e vjetra të shfletuesve.

Ka disa hile për ta kaluar këtë, por ky është një kod shtesë. Për shembull, mund të përdorni shprehje të rregullta:

Nëse (dokument.getElementByClassName \u003d\u003d i papërcaktuar) (document.getElementByClassName \u003d funksioni (cl) (var retnode \u003d; var myclass \u003d new RegExp ("\\\\ b" + cl + "\\\\ b"); var elem \u003d this.getElementByTagName ( "*"); për (var i \u003d 0; i< elem.length; i++) { var classes = elem[i].className; if (myclass.test(classes)) { retnode.push(elem[i]); } } return retnode; } };

Kjo është një mënyrë për të rregulluar problemin. Por, të jem i sinqertë, nuk është shumë e pranueshme për mua që ta bllokoj faqen me kod të panevojshëm, kështu që më së shpeshti përdor zgjidhjen e dytë të problemit.

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

Përdorimi i bibliotekës Jquery e bën shumë më të lehtë zgjidhjen e problemit të zgjedhjes së elementeve nga atributi i klasës së tyre. Ju duhet të përdorni konstruksionin:

Këtu elem është emri i klasës i caktuar elementit.

Mos harroni se në mënyrë që kjo të funksionojë, së pari duhet të përfshihet biblioteka Jquery. 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.

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