Ushbu darsda biz hujjat davomida tugunni qidirish yoki tugunlarni qidirish uchun mo'ljallangan hujjat ob'ekti usullarini ko'rib chiqamiz. Shuningdek, tuman ob'ektlari (tugun) usullari kabi, ammo ular allaqachon filiallari orasida.

Daraxtdagi tugunni yoki tugunlarni yig'ish uchun mo'ljallangan usullar

Oldingi darsda biz daraxt atrofida harakatlanishimiz va kerakli tugunlarni topa oladigan xususiyatlarni ko'rib chiqdik. Ammo, kasblari bilan tugunlarni qidirish juda qiyin va samarali emas. Shuning uchun, daraxtda tugunlarni topish uchun, veb-dasturchilar odatda hujjat yoki tugun ob'ektining (tugunning) usullaridan foydalanadilar.

GetelementBidid ()

GetelementbID usuli (elementsid) belgilangan identifikator (id \u003d "elementsid") ob'ektiga ega bo'lgan hujjatda elementni qaytaradi (tugun) ob'ekti. Agar belgilangan identifikator bo'lsa, ushbu usul nol qiymatini qaytaradi.

Standartga muvofiq, siz bir nechta elementni bir xil idektni o'lchash qiymati, i.e. Identifikator qiymati bitta hujjat ichida noyob bo'lishi kerak. Ammo, agar siz hujjatda ko'rsatilgan identifikatorli bir nechta buyumlaringiz bo'lsa, geteletbriid () usuli birinchi element topilgan birinchi elementni qaytaradi.

hujjatlar.gettelementbyid (elementsid)

Ushbu usul bitta kerakli parametrga ega (elementsid), bu siz olishni istagan element identifikatorining atribut qiymatini o'z ichiga olgan satr.

Masalan, ID \u003d "NATEARTICIE" tugmachasining matnini o'zgartiring.

Maqola nomi

• 1 ball
• 2 ball
• 3 ball

Usul getelementsbassnamname ()

GetelesbyClassnamnamname (Clasmname) usuli, ko'rsatilgan sinf nomi (klass \u003d "klassname" (klass / klassname »), nodelistik ob'ekti shaklida (klass \u003d" klasssiz nomi "(klassname). tus to'plamlari). Boshqacha qilib aytganda, ushbu usul kalitistik ob'ektni qaytaradi, bu parameter usulida ko'rsatilgan sinfning nomi bo'lgan elementlar to'plamini (tugunlar to'plamidir.

Kamaytirishlar sonini olish uchun siz kamerachist uzunlikdagi mulkdan foydalanishingiz kerak. To'plamdagi barcha tugunlarni o'tkazish uchun siz quyidagi tsikldan foydalanishingiz mumkin:

Var ElementlarList \u003d Hujjatlar.gettelementsnamnamnamname ("Ro'yxat"); uchun (i i \u003d 0; i

hujjatlar.gettreementclassnamnamname (klasm);
Tugun (tugun) .GelementbyClasname (malafty nomi);

Ushbu usul bitta talab qilinadigan parametrga ega (klasm \u200b\u200b/ sinf), bu siz xohlagan elementlar sinfining nomini o'z ichiga olgan satr. Agar siz bir nechta belgilangan sinflar bilan elementlarni olishni istasangiz, ular bo'sh joydan foydalanib, ushbu usul parametriga bo'lish kerak. Masalan, klass sinflari va sinfiga ega bo'lgan tugunlar to'plamini oling:

Hujjatlar.gljelementsbyclassname ("Clasld Clas2");

Masalan, ro'yxat sinfiga ega bo'lgan elementlar fonining rangi o'zgartiring:

Maqola nomi

• 1 ball
• 2 ball
• 3 ball

• 1 ball
• 2 ball

Masalan, ro'yxat sinfiga ega bo'lgan elementlar to'plamini (tugunlar) olish. Ushbu to'plamda 2 ta tugunni olish uchun, i.e. Indeks bo'lgan tugun 1. Keyin olingan tugunning orqa fon rangini o'zgartiring.

// ro'yxatga ega elementlar to'plamini qo'shish va elementlarList \u003d hujjatli Classy ("Ro'yxat"); // to'plamda 2 ta tugun oling varaqam \u003d elementlar ro'yxatiga kiring; // Ikkinchi ro'yxatning orqa fon rangini o'zgartiring.stylentcalcolor \u003d "qizil" element;

Usul getelementbilyam ()

Geteles -Tagnam (Tagneman) usuli topilgan barcha narsalarni hujjatda (hujjat uchun) yoki bola tugunlari (tugunlar to'plami) shaklida qaytaradi (tugunlar to'plami). To'plamda ma'lum bir tugunni olish indeks tomonidan amalga oshiriladi. To'plamdagi elementlarni (tugunlar) sanash 0 dan boshlanadi.

hujjatlar.glesbytagnam (Tagnal);
Tugun (tugun) .Gelementbilytyam (Tagname);

Ushbu usulda bitta majburiy parametr mavjud, bu katta harflar bilan ko'rsatilgan yorliqning nomini o'z ichiga olgan satr mavjud. Agar siz Strrel ("*") bo'lgan satrni parametr sifatida ko'rsatgan bo'lsangiz, unda biz hujjatdagi barcha narsalarni (hujjat ob'yektlari uchun) yoki tugunning barcha bolalar elementlari uchun olamiz (tugunning barcha elementlari uchun).

To'plamda topilgan tugunlar sonini olish uchun siz kamerachist uzunlikdagi mulkdan foydalanishingiz kerak. To'plamdagi barcha tugunlarni o'tkazish uchun siz quyidagi tsikldan foydalanishingiz mumkin:

Var ElementlarList \u003d Hujjatlar.getelementgytagname ("LI"); uchun (i i \u003d 0; i

Masalan, LI elementlarining fonining rangini o'zgartiring:

Maqola nomi

• 1 ball
• 2 ball
• 3 ball

Masalan, ul elementlar to'plamini oling. Keyinchalik, ushbu to'plamda 1 ta tugun oling, i.e. Indeks 0. Shundan so'ng, ushbu tugun uchun Li filiallari to'plamini olish uchun. Va yakunida ushbu to'plamdagi har bir elementning shriftining o'lchamini o'zgartiring.

// elementlar to'plamini olish ul VAR Elementsul \u003d Hujjatlar.getelementsutytytytyname ("ul"); // Ushbu to'plamda 1 ta tugun oling va element \u003d elementlar; // bolalar elementlari to'plamini oling Li Elementul Var Elementli \u003d Elementul.gelitsli \u003d Elementul.gelitsli \u003d Elementul.gelitsbytytytytyname ("LI"); // uchun barcha narsalarni bo'shating (i \u003d 0; i

Usul giyohvandlari ()

DetelementsyName (Ism) barcha topilgan elementlarni obunagarchilik (bosh tugunlar to'plami) bo'lgan hujjatda barcha topilgan elementlarni qaytaradi.

To'plamga daraxtda topilgan tartibda elementlar (tugunlar) qo'shiladi. To'plamda ma'lum bir tugunni olish indeks tomonidan amalga oshiriladi. To'plamdagi elementlarni (tugunlar) sanash 0 dan boshlanadi.

Var ElementlarList \u003d Hujjatlar.gettelementsynamnami ("Telefon"); uchun (i i \u003d 0; i

Izoh: HTML5-da, nom atributi eskirgan deb tan olinadi va u ko'p elementlarning guvohnomasiga almashtirildi.

hujjatlar.glesbyname (Ism)

Ushbu usulda bitta majburiy parametr mavjud (ism), bu atribut qiymatini o'z ichiga olgan satr.

Masalan, telefon qiymati bilan atribut (ism \u003d telefon ») ning fon rangini o'zgartiring (ism \u003d telefon»):

Telefon: Boshqa telefon:

SavdoSelets () usuli

So'rovseletselets () usuli hujjatdagi birinchi elementni (hujjat uchun) yoki bolalar tugunlari (tugunli) orasida (tugun uchun) qaytaradi, bu ushbu usul parametr sifatida ko'rsatilgan. Agar biror narsa CSS tizimlariga mos kelmasa, bu usul nolni qaytaradi.

hujjatlar
Noder.querselet (CSSSSSESSSESETOR)

Ushbu usulda bitta majburiy parametr mavjud (CSSSSSSSSETORE), bu CSS selektorini o'z ichiga olgan satr, unga muvofiq element tanlanadi.

Masalan, #Main P selektoriga mos keladigan birinchi topilgan elementning rangini o'zgartiring:

Masalan, hujjatdagi div elementlari to'plamini olish uchun. Keyinchalik, ushbu to'plamda 1 ta tugun oling, i.e. Indeks 0. indeks 0. Ushbu tugun uchun H1 + P-ga mos keladigan birinchi element H1 + P ga mos keladigan birinchi element o'z yordamchi tugunlaridan topiladi. Shundan so'ng, ushbu elementning shriftining o'lchamini o'zgartiring.

// div var elementlar to'plamini oling \u003d Hujjatlar.gljelementgrifing elementlari ("Div"); // Ushbu to'plamda 1 ta tugun oling var elementdiv \u003d elementdiv; // H1 Node // dan keyin joylashgan tugunni qidirib toping, u eleme // qidiruv tuguningiz kiradi. // elementning shrift elementp.stleize \u003d "30px" elementlarini o'zgartiring;

SO'RTIRADIMATETAL ()

So'rovsel () usuli bu topilgan barcha narsalarni hujjatda (hujjat uchun) yoki bola tugunlari (tugunlar to'plami) sifatida qabul qiladi (tugunlar to'plami) sifatida ushbu usul parametri sifatida ko'rsatilgan. . To'plamdagi tugunlarga murojaat qilish indeks tomonidan amalga oshiriladi. To'plamdagi elementlarni (tugunlar) sanash 0 dan boshlanadi.

Ishlatilgan tugunlar sonini olish uchun, kam boshlichilikning uzunligini ishlatish kerak. To'plamdagi barcha tugunlarni o'tkazish uchun siz quyidagi tsikldan foydalanishingiz mumkin:

Var ElementlarList \u003d Hujjatlar.quendSeletcall ("# Asosiy p"); uchun (i i \u003d 0; i

hujjatlar.Querseliterall (CSSSSSESSETOR);
Tugun (tugun) .QuilySeliterall (CSSSSSESSESSECTOR);

Ushbu usulda bitta majburiy parametr mavjud (CSSSSSSSSSETORTOR), bu CSS selektorini o'z ichiga olgan satr, shu elementlar tanlangan. Ushbu usul parametrida bir nechta saralash vositalarini ko'rsatish uchun ularni vergulga bo'lish kerak.

Masalan, #Main P selektoriga mos keladigan elementlar matnining rangini o'zgartiring:

Masalan, yon panel qiymati bilan shaxsiy guvohnomaga ega bo'lgan bola tugunini oling. Oldingi bosqichda olingan node fon elementlarining rangi o'zgaradi:

// ID \u003d "Yon panel" variantlari bor-aertebar \u003d "Yon paneli" ning yon paneli \u003d "Yon panel"); // Selektorga mos keladigan tugunlar to'plamini oling Var ElementlarListP \u003d Yashriqbarsselitseliter ("P"); // uchun barcha narsalarni bo'shating (i \u003d 0; i

Vazifa

Quyidagi vazifalar uchun GeTelementByid (), GetElementsByClassName (), getElementsByTagName (), getElementsByTagName (), QuerySelector (), QuerySelectorall () yordamida JavaScript yozish kod:

1. Asosiy blokda joylashgan barcha elementlarni oling;
2. Div idishida joylashgan chet ellik blokni oling;
3. Tana idishda joylashgan aassala blokini oling.

Har bir vazifa iloji boricha turli xil usullarni amalga oshirishdir.

Ma'lumki, eng ommabop JQuery kutubxonasi, ish bilan bog'liq muammolar keskin bo'lganda keladi. Barcha kuchlar profilerning ambrrusurasiga tashlanmoqda, har bir vazifa qotib qolgan, har bir funktsional yuklangan har bir tomondan ko'tarilgan va mo'ljallangan. Ammo bu muammo boshqa tomondan, ishlab chiqaruvchilarning 90 foizi uni kutmoqda. Testchilar - Bu so'zning qancha qismi.
Keling, aniqlaylik - bu sehr qanday ishlaydi va nima uchun dom elementlarini izlash dastur unumdorligi pasayishiga olib kelishi mumkin.

Selektorni qanchalik farq qiladi

Kutubxonada buyumlarni qidirish uchun, fitn dvigatelida bir qator xususiyatlarga ega. Biz ularga qaraymiz.

sO'RTIRADIMATETAL ()

Yangi brauzerlarda, a'lo quchcheletsel () va SavdoSelet () funktsiyasi () brauzerning imkoniyatlaridan foydalanganda elementlarni qidirishni biladi (xususan CSS-ni hisobga olgan holda ishlatiladi). Ushbu xususiyat barcha brauzerlarda ishlamaydi, faqat ichkarida FF 3.1+, IE8 +. (faqat standart IE8 rejimida), Opera 9.5+(?) va Safari 3.1+. Shunday qilib, har doim bu funktsiyaning mavjudligini belgilaydi va u orqali bajarishni istagan har qanday qidiruvni amalga oshiradi. Biroq, bu erda kutilmagan hodisalarsiz emas - savolsiz emas - "So'rovseletsall" (), bizning selektsionerimiz haqiqiy bo'lishi kerak.
Men oddiy misolni beraman:
Ikkita premium dasturlari deyarli farq qilmaydi va bir xil elementlarni qaytarishmaydi. Biroq, birinchi selektor "So'rovseletsel" () operatsiya natijalarini qaytaradi va ikkinchisi elementlar bo'yicha normal filtrlash natijasidir.
$ ("# My_FORT Kirish")
$ ("# My_FORT Kirish")

Selektor tahlili va qidirish

Agar siz "Seryersseletsall" () dan foydalana olmasangiz, fitna getelementbyid () brauzerlari () brauzerlari (), getelinsbyname () va getelementbyclasx () ni ishlatishga harakat qiladi. Ko'pgina hollarda, ular etarli, ammo (SIC!) IEda< 9 getElementByClassName() поломана и использование селектора по классу приведёт к полному перебору элементов в этом браузере.
Umumiy holatda selektorni o'ng chap tomondan aylantiradi. Ushbu xususiyatni tasvirlash uchun men bir nechta misol keltiraman:
$ ("Divs .My_class")
Birinchidan, elementlar topiladi .My_class, keyin faqatgina ota-onalarda filtrlanadi. Ko'rinib turibdiki, bu juda zarur xarajatlardan foydalanish va kontekstdan foydalanish muammoni hal qilmaydi (biz quyida keltirilgan kontekst haqida biz gaplashamiz).
Aytganimdek - aksariyat hollarda, tematik ravishda o'zgaruvchan narsani o'ng chap tomondan ajratadi, ammo identifikatorli elementdan foydalanmagan bo'lsa:
$ ("# Divs .My_Class")
Bunday holda, selektor kutilganidek o'zini tuta oladi va darhol kontekst shaklida foydalanish uchun #divs elementlarini qabul qiladi.

Kontekst

Selektor bilan birgalikda $ () funktsiyaga o'tkaziladigan ikkinchi parametr () kontekst deb ataladi. U topish elementlarining diapazonini toraytirish uchun mo'ljallangan. Biroq, kontekstni selektorning boshiga tahlil qilib, g'alaba qozonish uchun g'alaba hech bermaydi. G'olibning kontekstidan foydalanish kombinatsiyasi - SO'RKESSSESSSSESSCESCETAL () uchun haqiqiy selektor, chunki ushbu funktsiya nafaqat hujjat nomidan, balki buyumdan ham qo'llanilishi mumkin. Keyin kontekst bilan selektor shakllangan quyidagi dizaynni o'zgartirdi:
$ (". Divlar", hujjatli hujjat ("o'rash"));
Hujjatlar.gettelementbyid ("o'rash"). Quierseletall ("Divlar"); // Agar so'rovnomadan foydalanish imkoniga ega bo'lsangiz ()

Ushbu misolda, agar "SIZESSSELTETAL" () dan foydalanish imkoni bo'lmasa, mushtni oddiy büsti bilan filtrlaydi.
Kontekst haqida yana bir izoh (tannritorlar haqida emas) - agar funktsiya uchun selektorning ikkinchi parametr bo'lsa, bu jQuery (!), Agar dom ob'ekti pop-up bo'lsa faqat ushbu mahsulot uchun. Bunday nozikliklar men yodlashga harakat qilmayman, lekin men .Delect ().

Filtrlar va ierarxiya elementlari

Ichki elementlarni qidirish uchun siz quyidagi tanqischidan foydalanishingiz mumkin:
$ ("Ildiz\u003e. -NDild")
Biz bilganimizdek - mastikerning parchalanishi va qidiruv sahifada barcha elementlarda boshlanadi (so'rovlar nametlektus () mavjud emas. Bunday operatsiya juda qimmatga tushadi va biz selektorni quyidagicha o'zgartirishimiz mumkin:
$ (". Bolasi", $ ("." Ildiz "); // kontekstdan foydalanish qidiruvni osonlashtirmaydi
$ ("." Ildiz "). Topish (". Bola "); // Nega biz ichidagi barcha elementlarni bükzatsiyamiz kerak?
$ ("Ildiz"). Bolalar (". Bola"); // eng to'g'ri variant

Biroq, har qanday atribut uchun filtrlardan foydalanish zarurati (: ko'rinadigan, tsw va boshqalar) va selektor quyidagicha ko'rinadi:
$ (". Ba'zi_images: ko'rinadigan")
Filtr oxirgi marta qo'llaniladi - i.e. Biz yana "o'ngga" qoidadan voz kechamiz.

Natijalar

• Iloji bo'lsa, So'rovseletsall uchun mos bo'lgan o'ng tanlovchilardan foydalaning
• Subquaverlar (. O'quvchi (...) va boshqalar) tarkibiga bo'ysunish joylarini almashtirish
• Selektor kontekstini belgilang
• Kichikroq tugagan element to'plamiga qadar filtr

Yangi yilda tezkor tanlovchilar! Hammasi kelmoqda!

Master-klass asosida

Ob'ekt model hujjati - Dom - Bu mavjud bo'lgan teglardan iborat bo'lgan daraxtning tuzog'idan boshqa narsa emas Html Hujjat.

Bizda bu elementlar bor HtmlBiz olishni istagan bir-birimiz yonida joylashgan va keyin ulardagi ma'lumotlarni o'qishni yoki o'zgartirishni ham o'qiymiz. Ushbu teglarni daraxt tuzilmasida joylashganidek topishning ko'plab usullari mavjud. Ushbu maqolada siz ikkita o'rnatilgan funktsiyalardan qanday foydalanishni o'rganasiz. JavaScript.kabi so'rovnoma. va sO'RTIRISHSELTECTAL. Qidirish uchun hTML. teglar.

Quekselektori usuli

Usul usullarining mohiyatini tushunish so'rovnoma. va sO'RTIRISHSELTECTAL. Keyingi HTML-ga qarang:

Ushbu misolda bizda bitta div identifikator bilan asosiy. va unga kiritilgan to'rt element div va img, ularning har biri sinfning qiymatiga ega pik-konteyner va xaridor. mos ravishda. Keyingi bir nechta bo'limlarda biz funktsiyalarni qo'llaymiz. so'rovnoma. va sO'RTIRISHSELTECTAL. Bunda HTML kod Va nima bo'lishini ko'rib chiqaylik.

so'rovnoma.

Funktsiya so'rovnoma. Quyidagicha ishlaydi:

Var element \u003d hujjati.quenselet ("< CSS selector >");

QuekseletCet xususiyati tortishuvni amalga oshiradi va bu dalil CSS selektor Topishni xohlagan narsa uchun. Qaytish quekseletCet xususiyati, Bu shunga o'xshash birinchi element, hatto ushbu selektorga o'xshash boshqa elementlar bo'lsa ham.

Ga qarash Html Oldingi misoldan, agar biz kirishni xohlasak divkimning identifikatori asosiy.Siz quyidagilarni yozishingiz kerak:

Var element \u003d hujjati.quendSeletsetor ("# Asosiy");

Kabi indrofar asosiy. Tanlovni olish uchun identifikator, selektor sintaksisi bo'ladi #Molin. . Shunga o'xshab, sinfning o'zgartmasi pik-konteyner :

Var element \u003d hujjat. Hujjatlar.quendSelettor (". Pik-konteyner");

Birinchi blok qaytariladi div kimning qiymati pik-konteyner . Boshqa elementlar div Sinf pik-konteyner Shunchaki e'tiborsiz.

Ushbu funktsiya uchun tanlovchilar sintaksisi aniqlanmagan, shuning uchun siz Stylects varag'ida tanlangan sintaksisdan foydalanishingiz mumkin!

Bu hammasi va keyingi maqolada men quyidagi funktsiya haqida gapirib beraman sO'RTIRISHSELTECTAL..

JavaScript, CSS singari, sahifaning tarkibini o'zgartirish uchun HTML-xabarlarga kirish imkonini beradigan funktsiya mavjud. CSS-da, u tanlovchilarni yozish orqali erishiladi. JavaScript-da ushbu funktsiyani tashkil qilishning bir necha usullari mavjud va bu erda ulardan biri:

Varaqamiheads \u003d Hujjatlar.getelementgytagname ("H1");

Ushbu kod barcha H1 sarlavhasini ekstrakti olib keladi va deyarli gapiradi, ularni boshlang'ich o'zgaruvchiga joylashtiradi. Agar sahifada bir nechta sarlavha mavjud bo'lsa, unda hamma narsa qatorda joylashtiriladi.

Var Ou812 \u003d Hujjatlar.gettelementbyid ("Eddi");

Ushbu kod identifikatorli elementni tanlaydi \u003d "Eddi".

Var Gitars \u003d Hujjatlar.gljelementsbyclasnamnamname ("o'qlar");

Shuningdek, biz sinflar nomidan elementlarni tanlashimiz mumkin.

Bir oz vikzatni qo'shing

Turli xil Javascript Freymscrims o'z tanlovchilarning imkoniyatlarini taqdim etadi. Yuqorida eng muvaffaqiyatli bo'lganlardan biri, keyinchalik jQueryga aylandi. Uning avlodidan farqli o'laroq, kaltak faqatgina dom va ularni boshqarishi mumkin edi. Agar siz jQuery funktsiyasining qolgan funktsiyasiga muhtoj bo'lmasang, bugungi kunda siz ekranni alohida kutubxona sifatida yuklab olishingiz mumkin.

Ushbu kutubxonalar rivojlanishi bilan, yozgan tanlovchilar sezilarli darajada kamaydi va o'zgartirildi:

$ ("# Deyve"). CSS ()

Ushbu kod HTML elementini identifikatsiyadan o'tkazadi \u003d "Deyv" va sizning CSS uslublari bilan ishlashingizga imkon beradi.

SIZZE HTML-kodni manipulyatsiya qilish uchun yagona JavaScript kutubxonasi emas. Shuningdek, boshqa variantlar, masalan, tumanlar ham mavjud. Ammo, menimcha, yuqorida aytilganlarning barchasi sizni ushbu maqolada kutganidan oldin eskirgan.

Yangi darajadagi javascript

Ko'plab ishlab chiqaruvchilar ko'pincha JavaScript-ning tub o'zgarishini sezmagan jQuererdan foydalanishni boshladilar.

"JavaScript Selektor API" - HTML5 spetsifikatsiyasining rasmiy qismi, uni ishlatish va XHTML sahifalarini yozish mumkin. Yangi sintaksis juda oddiy:

Hujjatlar.Querselet ("# Eddie")

Ushbu kod mutlaqo tengli hujjatdir.glementByid ("Eddi"). Ta'sirchan emasmi? Bu haqida nima deyish mumkin:

Hujjatlar.Querselet ("# Eddi H1 + P")

Yangi funktsiya sizga kompleks CSS iboralaridan foydalanib, Domni boshqarishga imkon beradi.

So'rovselektori usuli faqat birinchi elementni oladi. Savol-foydalanishdan foydalanishingiz kerak bo'lgan barcha narsalarni olish uchun:

Var Hifrets \u003d Hujjatlar.uvansseliterall ("jadval # frets tr: n-darajali bola")

Ushbu kod ID \u003d "Frets" bilan jadvaldan har uchinchi qatorni oladi.

Bir nechta juda muhim fikrlar

SavdoSelettor / barcha usulni ishlatsangiz, siz bilishingiz kerak bo'lgan bir nechta cheklovlar mavjud:

Hamma brauzerlar ham yangi xususiyatlarni qo'llab-quvvatlamaydi. Agar IE6-7-da ishlash siz uchun juda muhim bo'lsa, Domni boshqarishi mumkin bo'lgan kutubxonalardan foydalanish yaxshidir: kaltak yoki jQuery.

Sinovlar juda ehtiyotkorlik bilan tayyorlanishi kerak, aks holda brauzerlar ularni tushunmaydi va yuqorida ko'rsatilgan usullar nolni qaytaradi. Umuman olganda, diqqat bilan, ayniqsa CSS3 Sechors-dan foydalanganda.

Getelins -tytagnamdan farqli o'laroq, savollar bilan ajratilgan elementlarning statistik ro'yxatini hozirgi paytda ko'rsatilgan shaklda qaytaradi. Bu shuni anglatadiki, kodga biron bir dinamik o'zgarishlar kiritishda (JavaScript orqali elementlarni qo'shish, o'chirish, o'chirish), so'rovnomadan foydalanish kerak bo'ladi.

Turli turdagi kutubxonalarni yuklab olish kerak bo'lgan ehtiyojdan xalos bo'lish uchun yangi funktsiyalarni sinab ko'ring.

So'nggi yangilangan: 1.11.2015

JavaScript-da "Dom" da ishlash uchun ishlash uchun, hujjat ob'ekti global derazaning global ob'ektiga belgilangan. Hujjat ob'ekti sahifa elementlarini boshqarish uchun bir qator xususiyatlar va usullar yaratadi.

Elementlarni qidirish

Sahifadagi narsalarni qidirishda quyidagi usullar qo'llaniladi:

getelementbidid (qiymat): ID atribut qiymatiga teng bo'lgan elementni tanlaydi

getelesbytagname (qiymat): yorliq qiymatga teng bo'lgan barcha elementlarni tanlaydi

getelementsbyClassnamname (qiymat): qiymat sinfiga ega bo'lgan barcha elementlarni tanlaydi

"Serysselet" (qiymati): CSS qiymatini o'zgartirish qiymatiga mos keladigan birinchi elementni tanlaydi

"Qo'riqchi" (qiymati): CSS selektor qiymatiga mos keladigan barcha narsalarni tanlaydi

Masalan, ID orqali elementni toping:

Qo'ng'iroqlar hujjati yordamida biz ("sarlavhalar") biz qaysi id \u003d "sarlavha" ni topamiz. Va Innostektiv mulkdan foydalanib, topilgan elementning matnini olishingiz mumkin.

Muayyan yorliq bo'yicha qidirish:

Hujjatdan foydalanish ("p"), biz xatboshilarning barcha elementlarini topamiz. Ushbu qo'ng'iroq aniqlangan buyumlarni qaytaradi. Shuning uchun, qatorning alohida elementlarini olish uchun siz ularda tsiklda yugurishingiz kerak.

Agar biz faqat birinchi elementni olishimiz kerak bo'lsa, siz ob'ektlarning topilgan to'plamlarining birinchi elementiga o'tishingiz mumkin:

Var Pelement \u003d Hujjatlar.glgetytagname ("p"); Hujjatlar.write ("Sekst" paragrafi: "+ Pelement.innernext);

Sinfdagi elementni olish:

CSS ni tanlash:

Hujjatlar.Querselector ifoda (". Annotatsiya P") selektor.annotatsiya qilinayotgan elementni topadi. Agar sahifani selektorga mos keladigan bir nechta elementlarga ega bo'lsa, birinchi usulni tanlaydi. Natijada, brauzer chiqadi:

Anotatsiya maqolasi Selektorning birinchi xatboshi matni: mavhum maqola

Selektordagi barcha elementlarni olish uchun siz topilgan buyumlar qatorini qaytaradigan hujjatni yoqtirishingiz mumkin.

Brauzer chiqish:

Anotoratsiya moddasidagi maqola birinchi xatboshisi Matnni o'zgartirish STEAT yaratish