Golovna

Sozlanmoqda

DOM standarti elementni qidirish uchun bir qator xususiyatlarni beradi.

Ushbu usullar getElementById, getElementsByTagName va getElementsByName. Javascript kutubxonalarini o'rganish uchun yanada kuchli usullardan foydalanish mumkin. Id bo'yicha qidirish

Samy

qo'lda yo'l

DOMdagi elementni bilish - uni identifikatorga tayinlamang.

Buning uchun wiki-ni bosing document.getElementById(id) mavjud

Misol uchun, quyidagi kod id="dataKeeper" bilan div "e" da matn rangini qora rangga o'zgartiradi:

Document.getElementById("dataKeeper").style.color = "ko'k"

Tegni qidiring

Keyingi usul oxirgi teg bilan barcha elementlarni olib tashlash va o'rtadagilarni topishdir.

Buning uchun document.getElementsByTagName(teg) dan foydalaning.

Von bunday tegni tashkil etuvchi elementlar massivini aylantiradi.

Masalan, li tegi ostida siz boshqa elementni tanlashingiz mumkin (massivdagi raqamlash noldan boshlanadi):

Document.getElementsByTagName("LI") Xo'sh, getElementsByTagName faqat hujjat uchun emas, balki teg (matn emas) o'z ichiga olgan har qanday element uchun ham chaqirilishi mumkin..

Bunday holda, ushbu element ostida joylashgan ob'ektlar aniqlanadi.

Masalan, keyingi bosish birinchi div tegining o'rtasida joylashgan LI elementlari ro'yxatini oladi:

Document.getElementsByTagName("DIV").getElementsByTagName("LI")

Barcha prokladkalarni olib tashlang

Element tugunining barcha bolalar roʻyxatini qaytarish uchun elem.getElementsByTagName("*") tugmasini bosing.

ularni chetlab o'tish uchun

Masalan, ushbu DOMda:

Bu kod:

Var div = document.getElementById("d1") var elems = div.getElementsByTagName("*") for(var i=0; i)

Siz ketma-ketlikni ko'rishingiz mumkin: ol1, li1, li2.

Ism bo'yicha qidirish: getElementsByName

document.getElementsByName(name) usuli nomlari (nom atributi) bundan eski boʻlgan barcha elementlarni qaytaradi. U faqat ushbu elementlar bilan ishlaydi, spetsifikatsiya nom atributini aniq o'tkazadi: shakl, kiritish, a, tanlash, matn maydoni va boshqalar, kamdan-kam hollarda. Usulning nomi getElementById , xuddi boshqa usullardagi kabi harf: getElement U faqat ushbu elementlar bilan ishlaydi, spetsifikatsiya nom atributini aniq o'tkazadi: shakl, kiritish, a, tanlash, matn maydoni va boshqalar, kamdan-kam hollarda. ByName.

Bu erda qoida oddiy: bitta element - Element, ko'p - Element U faqat ushbu elementlar bilan ishlaydi, spetsifikatsiya nom atributini aniq o'tkazadi: shakl, kiritish, a, tanlash, matn maydoni va boshqalar, kamdan-kam hollarda.. U faqat ushbu elementlar bilan ishlaydi, spetsifikatsiya nom atributini aniq o'tkazadi: shakl, kiritish, a, tanlash, matn maydoni va boshqalar, kamdan-kam hollarda. Barcha usullar *Element

* Tugunlar ro'yxatini aylantiring. Bir necha kun oldin men kompaniyada Front-end Dev bo'sh ish o'rni uchun sinov ishini yakunladim..

Albatta, reja ko'p nuqtalardan kelib chiqqan.

Tobto.

maydonga matn kiritgandan so'ng oddiy hazil (brauzerda Ctrl+F ga o'xshash).

Muammoning o'ziga xosligi shundaki, har qanday JS ramkalari yoki kutubxonalaridan foydalanish himoyalangan.

Shunday qilib, men pul topdim.
Bir yil ichida men ikkita yomon skriptni bildim, ular bir xil tarzda ishlagan, garchi ular boshqacha yozilgan bo'lsa ham. Tayyor yechimni izlash Eng yaxshi kodli kodni tanlab, uni eski kodingizga kiriting.

Agar siz bunga qiziqsangiz, brav kodini kiriting. Men darhol skriptni so'radim. Oziq-ovqat ta'minoti yomonroq, deb o'yladim, lekin ma'lum bo'lishicha, bu ssenariy muallifi timsolida emas, unda juda kamchilik bor edi. Tayyor yechimni izlash Skript teg o‘rnida hamma narsani qidirdi... va siz aytganingizdek, teg yoki uning atributlarini taxmin qilish uchun ishlatilishi mumkin bo‘lgan har qanday belgilar kombinatsiyasini qidirishda butun HTML sahifasi ishdan chiqdi. Nima uchun skript noto'g'ri ishladi? Bu oddiy. Men darhol skriptni so'radim. Skript shu tarzda ishlaydi.

Bundan buyon biz butun tegni o'zgartirishga yozamiz

tanasi

... olingan bilimlar ...

Va keyin biz joriy tegni almashtiramiz

yangi rad etishlar uchun. Tartib yangilanadi, uslub o'zgaradi va ekrandagi natijalar ta'kidlanadi.
Siz allaqachon qo'shiq ovozida muammo nima ekanligini tushungansiz, lekin men buni hisobotda tushuntiraman.- skusuvannya poshuku uchun (ko'rishni qabul qilish);
Uchinchi- o'yin-kulgi uchun (topilgan natijalarni ko'rish uchun).

JavaScript js.js faylida yozilgan.

Birinchidan, nima qilish kerak: keling, qidiruv tugmasi bosilganda va tugmachani bosganida funksiya chaqiruvlarini yozamiz. Bu kabi ko'ring: (Bu erda va u erda nima kerakligi haqida bir oz tushuntirib beraman.).

Matnli maydonga ruxsat beriladi id = "topish uchun matn"

- shuning uchun id js-dagi elementga o'tkaziladi
- Tugmalarni bosish quyidagi xususiyatlarga ega: type="button" onclick="javascript: FindOnPage("topish uchun matn", noto'g'ri);

false qaytaring;" Turi: tugma

- Bosilganda FindOnPage funksiyasi("matn-topish", noto'g'ri);
- u matn maydonining identifikatoridan o'tadi, yolg'on

Qidiruv tugmasi quyidagi atributlarga ega: type="button" onclick="javascript: FindOnPage("topish uchun matn", rost); false qaytaring;" type="button" onclick="javascript: FindOnPage("topish uchun matn", noto'g'ri); Turi: yuborish (tugma emas, chunki bu yerda siz maydonga kirganingizdan keyin Enter dan foydalanishingiz mumkin, lekin tugmani ham ishlatishingiz mumkin) yolg'on.

Bosilganda FindOnPage funksiyasi("matnni topish", rost);

u matn maydonining identifikatoridan o'tadi,<". Т.е. будет проходить поиск только текстовых объектов, в то время, как теги и атрибуты будут оставаться нетронутыми.

/>(.*?)rost

Siz ohangdor tarzda yana 1 ta atributni belgiladingiz:

rost/noto‘g‘ri . Yogo keling vyznachennya uchun vikorystuvati qilaylik, yaku ular tugmani o'zi bosdi (skasuvati poshuk yoki start poshuk).
Agar u adminda bo'rttirma bo'lsa, u uzatiladi . ma'no biz nima sodir bo'layotganiga bog'liq emas.

Bu asl sahifani va uslublarni qayta o'rnatish qobiliyatini darhol saqlab qolish uchun kerak.
Var input, search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML;// Butun tanani saqlang (hafta oxiri) type="button" onclick="javascript: FindOnPage("topish uchun matn", rost); OK, endi siz bizdan qo'ng'iroq qiladigan funksiya yaratishingiz mumkin

DOM
.

Ishda ikkita funktsiyamiz borligini tasavvur qilish oson, ularning terisi bosilgan tugma bilan yaqindan ishlaydi.

<3&&status==true) { alert("Для поиска вы должны ввести три или более символов"); function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //обнуляем стили } if(input.length>Adje mi yoki poshuk bajariladi yoki yogo bekor qilinadi.
I ushbu atribut tomonidan boshqariladi

Qanday eslaysiz?

Bundan tashqari, agar siz yana qidirsangiz, ortiqcha uslublar nolga qaytarilishini tushunishingiz kerak. Shu tarzda biz avansni rad etamiz: Var input,search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML;// butun tanani saqlash (Pochatkovy) FindOnPage(nom, status) ( if(status) ( FindOnPageBack(); FindOnPageGo(); ) //daqiqani tozalash va aftidan topilgan if(!status) ( FindOnPageBack(); ) / /Ma'lum ko'rinish) Tayyor yechimni izlash OK, mantiqning bir qismi amalga oshirildi, keling, davom etaylik.

Chiqarilgan so'zni iloji boricha ko'proq belgilarga aylantirish kerak.<3&&status==true) { alert("Для поиска вы должны ввести три или более символов"); function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //обнуляем стили } if(input.length>Bizga 1 ta harf/belgi topish vaqti keldi.Xo'sh, bu bosqichda bizda allaqachon asosiy o'zgarishlar va qadriyatlar mavjud. Endi siz kerakli uchastkalarga ko'rinadigan kul bilan uslub kodini berishingiz kerak..

Tobto. locale_HTML = document.body.innerHTML; Tanlangan matnni oddiy formatga aylantirish (mohiyatida oddiy formatni tanlashda matn oddiy format yordamida tahlil qilinadi).

Chiqarilgan so'zni iloji boricha ko'proq belgilarga aylantirish kerak.<3&&status==true) { alert("Для поиска вы должны ввести три или более символов"); function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //обнуляем стили } if(input.length>Bizga 1 ta harf/belgi topish vaqti keldi.Shu maqsadda, kiritilgan matndan muntazam ifoda hosil qiling (yaratilgan) va keyin ko'rinishni soliqqa o'tkazgan holda usulni bosing. Bu erda bizga bir usul yordam beradi baho()

Matnni almashtirib, natijani uslublar bilan ko'rsatganimizdan so'ng, bizga aniqlik kerak

o'chirish bilan almashtiring.
Robimo.

"+kirish+"
"); // kerakli elementlar topildi, uslub o'rnatildi va yangi massivda saqlanadi) (var i = 0; i) uchun

Umuman olganda, hamma narsa tayyor va skript allaqachon ishlamoqda.

Bo'yash uchun yana bir nechta tafsilotlar mavjud.

1) Siz kiritishingiz kerak bo'lgan matnni buzdik.

Keling, ushbu kodni kiritamiz:

Keling, ushbu kodni kiritamiz:

Oxirgi qator:

Kirish = document.getElementById(name).value;

// html maydonlaridan qiymatlarni o'chirish 2) Biz xatolarni tekshiramiz (agar xato topilmasa, bu haqda sizga xabar beramiz). Ushbu kod o'zgarishlardan so'ng FindOnPageGo() funksiyasiga kiritiladi. Hozir shunday. Albatta, siz topilgan birinchi natijaga aylantirishni qo'shishingiz mumkin, jonli Ajax qidiruvi va siz uni cheksiz bezashingiz mumkin.

Saytda oddiy qidiruvni amalga oshirish oson.

Ushbu maqolaning maqsadi yangi kelganlarga yordam berish edi, chunki sharob menikiga o'xshamaydi.

Oddiy tayyor yechim kabi narsa yo'q.

PS: to'g'ri ishlashi uchun html hujjatidagi matnni asl matn teglar orasida joylashgan joylarda o'tkazishni tanlash kerak.

Vazifa oddiy, siz shunchaki sinf sinfi = "elem" bo'lgan elementni tanlashingiz va Javascript yordamida u bilan biror narsa qilishingiz kerak.

Keling, siz olishingiz mumkin bo'lgan variantlar sonini ko'rib chiqaylik.

Variant 1. Javascript getElementsByClassName usulini tezlashtiring.

Agar odatiy qo'shimcha kutubxonalardan foydalanish shart bo'lmasa, elementga getElementsByClassName("sinf_nomi") usuli yordamida kirishingiz mumkin.

Masalan, chiqish kodining yuz foizi keyingi kod qatoriga qo'shilishi mumkin.

Natijada, agar hamma narsa to'g'ri ishlayotgan bo'lsa, biz div blokining o'rtasida joylashgan matn ko'rsatiladigan loyqa oynani olib tashlaymiz.

E'tibor bering, getElementsByClassName usulini chaqirish natijasi elementlar massivi bo'ladi, chunki

sahifada bir xil sinfga ega elementlar dekal bo'lishi mumkin.

Shuning uchun, document.getElementsByClassName("elem") konstruktsiyasi oxirida massivning null elementi () qaytarilishini ko'rsatishingiz kerak.

Javascript raqamlari bir emas, noldan boshlanadi.

getElementsByClassName usulidan foydalanish bilan bog'liq muammo shundaki, bu usul brauzerlarning eski versiyalarida qo'llab-quvvatlanmaydi.< elem.length; i++) { var classes = elem[i].className; if (myclass.test(classes)) { retnode.push(elem[i]); } } return retnode; } };

Aytib o'tish mumkin bo'lgan ba'zi qiyin narsalar mavjud va bu qiyin kod.

Masalan, oddiy iboralarni tezda ishlatishingiz mumkin:

If(document.getElementsByClassName == undefined) ( document.getElementsByClassName = function(cl) ( var retnode = ; var myclass = new RegExp("\b"+cl+"\b"); var elem = this.getElementsByTagName( "* "), uchun (var i = 0; i

Ammo, rostini aytsam, men uchun tomonni chiroyli kod bilan yopish unchalik yoqimli emas, shuning uchun men ko'pincha muammoning boshqa versiyasidan aziyat chekaman.

Variant 2. JQuery kutubxonasidan foydalaning. JQuery kutubxonasi sinf atributi uchun elementlarni tanlash muammosini ancha osonlashtiradi.

Dizaynni tezlashtirish kerak:

$(".elem")