Mbinu ya JavaScript document.querySelector() hurejesha kipengele cha kwanza kwenye hati (kipengee cha Kipengele) kinacholingana na kiteuzi kilichobainishwa, au kikundi cha viteuzi. Ikiwa hakuna zinazolingana zinazopatikana, null itarejeshwa.
Tafadhali kumbuka kuwa hairuhusiwi kutumia vipengele vya uwongo vya CSS kama thamani ya kiteuzi kutafuta vipengee; katika hali hii, thamani ya kurejesha itakuwa null kila wakati.
Ikiwa unahitaji orodha ya vipengele vyote vinavyolingana na kiteuzi au viteuzi maalum, basi tumia mbinu ya querySelectorAll() kufanya hivi.
Njia ya .querySelector() pia imefafanuliwa kwenye kitu cha Element, kwa sababu hii inaweza kuitwa kwa kipengele chochote, si tu kitu cha hati. Kipengele ambacho kinaitwa kitatumika kama kipengele cha utafutaji.
Kivinjari kinatumia syntax ya JavaScript: document .querySelector( wateuzi) wateuzi- Viteuzi vya Viteuzi vya Vipimo vya Kamba Viteuzi vya Vigezo vya API ya Kiwango cha 1| wateuzi | Hoja lazima ilingane na mfuatano wa kiteuzi halali ulio na kiteuzi kimoja au zaidi. Wakati wa kubainisha viteuzi vingi, lazima utenganishe maadili na koma. Katika kesi hii, kipengele cha kwanza kilichopatikana kutoka kwa wateule waliopewa kitachaguliwa. Ikiwa kwa sababu fulani unatumia herufi katika majina ya kiteuzi ambayo si sehemu ya syntax ya kawaida CSS, basi wakati wa kutafuta herufi kama hizo lazima ziepukwe kwa kutumia herufi ya nyuma ( "\" ) Kwa sababu backslash pia ni tabia maalum ( kutoroka) V JavaScript, basi wakati wa kuingiza kamba halisi lazima iepukwe mara mbili. Kigezo kinachohitajika. |
Katika mfano huu, kwa kutumia sifa ya tukio la onclick, wakati kifungo (kipengee cha HTML) kinapobofya, tunaita myFunc() kazi, ambayo, kwa kutumia JavaScript Mbinu ya hati .querySelector() huchagua vipengele vifuatavyo:
- Kwanza kipengele na darasa la kuzuia katika hati na kuweka nyeusi rangi ya mandharinyuma ya kipengele kilichopatikana.
- Kwanza kipengee kutoka kwa viteuzi vilivyotolewa (kipengele chenye darasa la kwanza, kipengee kilicho na kizuizi cha darasa) na weka rangi ya maandishi ya kitu kilichopatikana kuwa nyekundu. Katika kesi hii, itachaguliwa kwanza kipengele kilichopatikana kutoka kwa wateule waliopewa.
- Kipengele ambacho ni pili mtoto kipengele cha mzazi wake na kuweka kipengele kupatikana kijani rangi ya maandishi.
- Kipengele ambacho ni cha mwisho cha vipengele vya kipengele cha mzazi na kimewekwa kwenye kipengele kilichopatikana bluu rangi ya maandishi.
Matokeo ya mfano wetu.
Kama unavyojua, wakati wa kutengeneza programu kubwa ya JS inayotumia maktaba maarufu ya jQuery, inakuja wakati ambapo shida ya utendaji inakuwa kubwa. Juhudi zote hutupwa kwenye kukumbatia kwa wasifu, kila changamoto inachunguzwa kwa uangalifu, kila sehemu ya utekelezaji iliyosheheni inanuswa kutoka pande zote na kusahihishwa. Lakini shida haitoki kwa mwelekeo ambao 90% ya watengenezaji wanatarajia. Wateuzi - Kuna mengi katika neno hili.
Hebu tujue jinsi uchawi huu unavyofanya kazi na kwa nini kutafuta vipengele vya DOM kunaweza kusababisha kushuka kwa utendaji wa programu.
Acha nikupe mfano rahisi:
Wateuzi wawili walioonyeshwa sio tofauti na watarudisha seti sawa ya vipengee. Walakini, kiteuzi cha kwanza kitarudisha matokeo ya querySelectorAll(), na cha pili kitarudisha matokeo ya uchujaji wa kawaida kwa vipengee.
$("#fomu_yangu ingizo")
$("#my_form input") Uchanganuzi na utafutaji wa kiteuzi Kama querySelectorAll() itashindikana, Sizzle itajaribu kutumia vitendakazi vya kawaida vya kivinjari getElementById(), getElementsByName(), getElementsByTagName() na getElementByClass(). Katika hali nyingi wao ni wa kutosha, lakini (sic!) katika IE< 9 getElementByClassName() поломана и использование селектора по классу приведёт к полному перебору элементов в этом браузере.
Kwa ujumla, Sizzle huchanganua kiteuzi kutoka kulia kwenda kushoto. Ili kuelezea kipengele hiki, hapa kuna mifano michache:
$(".divs.my_class")
Itapata kwanza vipengee vya .my_class na kisha kuchuja vile tu ambavyo vina .divs kwa wazazi wao. Kama tunavyoona, hii ni operesheni ya gharama kubwa, na utumiaji wa muktadha hausuluhishi shida (tutazungumza juu ya muktadha hapa chini).
Kama nilivyosema - katika hali nyingi Sizzle itachanganua kichaguzi kutoka kulia kwenda kushoto, lakini sio wakati wa kutumia kitu kilicho na kitambulisho:
$("#divs .darasa_langu")
Katika hali hii, kiteuzi kitatenda jinsi inavyotarajiwa na kipengele cha #divs kitachukuliwa mara moja kwa matumizi kama muktadha. Muktadha Kigezo cha pili kinachopitishwa pamoja na kiteuzi kwa $() chaguo la kukokotoa linaitwa muktadha. Imeundwa ili kupunguza utafutaji wa vipengele. Walakini, wakati wa kuchanganua, muktadha umefungwa mwanzoni mwa kiteuzi, ambacho haitoi faida yoyote. Mchanganyiko unaoshinda wa kutumia muktadha ni kiteuzi halali cha querySelectorAll(), kwani chaguo hili la kukokotoa linaweza kutumika si kwa niaba ya hati tu, bali pia kwa kipengele. Kisha kiteuzi kilicho na muktadha kinabadilishwa kwa njia ya mfano kuwa ujenzi ufuatao:
$(".divs", document.getElementById("wrapper");
document.getElementById("wrapper").querySelectorAll(".divs"); // ikiwezekana, tumia querySelectorAll()
Katika mfano huu, ikiwa haiwezekani kutumia querySelectorAll(), Sizzle itachuja vipengele kwa kutumia iteration rahisi.
Ujumbe mmoja zaidi kuhusu muktadha (hatuzungumzii wateuzi) - ikiwa utapitisha kitu cha jQuery kama kigezo cha pili kwa kichaguzi cha kazi ya.live(), tukio litanaswa kwenye hati(!), na ikiwa ni kitu cha DOM, basi tukio litaongezeka hadi kipengele hiki . Ninajaribu kutokumbuka hila kama hizo, lakini tumia .delegate() .
$(".mzizi > .mtoto")
Kama tunavyojua, kuchanganua kiteuzi na kutafuta kutaanza na vipengee vyote.child kwenye ukurasa (mradi querySelectorAll() haipatikani). Operesheni hii ni ghali kabisa na tunaweza kubadilisha kiteuzi kama hii:
$(".mtoto", $(".mizizi")); // kutumia muktadha hautafanya utafutaji kuwa rahisi
$(".mizizi").tafuta(".mtoto"); // kwa nini tunahitaji kurudia kupitia vipengele vyote ndani ya .root?
$(".mizizi").watoto(".mtoto"); // chaguo sahihi zaidi
Walakini, ikiwa kuna hitaji la kutumia vichungi kwa sifa yoyote (:inayoonekana, :eq, nk.) na kichaguzi kinaonekana kama hii:
$(".baadhi_picha:zinazoonekana")
basi chujio kitatumika mwisho - i.e. Tunapotoka tena kutoka kwa sheria ya "kulia kwenda kushoto".
- Ikiwezekana, tumia viteuzi sahihi vinavyolingana na querySelectorAll()
- Badilisha utii ndani ya viteuzi kwa hoja ndogo (.watoto(...), n.k.)
- Bainisha muktadha wa kiteuzi
- Chuja seti ndogo ya vitu vilivyotengenezwa tayari iwezekanavyo
Kulingana na darasa la bwana
JavaScript, kama CSS, ina utendaji unaokuruhusu kufikia vipengele vya HTML ili kubadilisha maudhui ya ukurasa. Katika CSS, hii inafanikiwa kwa kuandika viteuzi. Kuna njia kadhaa za kupanga utendakazi huu katika JavaScript, na hapa kuna moja wapo:
Var primaryHeadings = document.getElementsByTagName("h1");
Msimbo huu hutoa vichwa vyote vya h1 na, kwa kusema, huviweka katika tofauti ya Vichwa vya msingi. Ikiwa kuna vichwa kadhaa kwenye ukurasa, basi wote watawekwa kwenye safu.
Var ou812 = document.getElementById("eddie");
Nambari hii huchagua kipengee chenye id = "eddie".
Var gitaa = document.getElementsByClassName("shoka");
Tunaweza pia kuchagua vipengele kwa jina la madarasa yao.
Wacha tuongeze SizzleMifumo mbalimbali ya JavaScript hutoa chaguo zao za kuunda viteuzi. Moja ya mafanikio zaidi ilikuwa Sizzle, ambayo baadaye ikawa jQuery. Tofauti na kizazi chake, Sizzle angeweza tu kufanya kazi na kuendesha DOM. Ikiwa hauitaji utendakazi mwingine wote wa jQuery, bado unaweza kupakua Sizzle kama maktaba tofauti leo.
Pamoja na maendeleo ya maktaba hizi, uandishi wa wateule umepunguzwa sana na kubadilishwa:
$("#dave").css()
Nambari hii inatoa kipengee cha html kilicho na id=”dave” na hukuruhusu kufanya kazi na mitindo yake ya css.
Sizzle sio maktaba pekee ya JavaScript ya kudhibiti msimbo wa HTML. Pia kuna chaguzi nyingine, kwa mfano rangy. Walakini, kwa maoni yangu, yote yaliyo hapo juu yamepitwa na wakati kabla ya kile kinachokungojea zaidi katika nakala hii.
Kiwango kinachofuata cha JavaScriptWatengenezaji wengi walianza kutumia jQuery mara nyingi sana hata hawakugundua mabadiliko makubwa katika JavaScript yenyewe.
"API ya Kiteuzi cha JavaScript" ni sehemu rasmi ya vipimo vya HTML5 na inaweza pia kutumika wakati wa kuandika kurasa za XHTML. Syntax mpya ni rahisi sana:
Document.querySelector("#eddie")
Msimbo huu ni sawa kabisa na document.getElementById("eddie"). Si ya kuvutia? Vipi kuhusu hili:
Document.querySelector("#eddie h1 + p")
Utendaji mpya hukuruhusu kudhibiti DOM kwa kutumia misemo changamano ya CSS.
Njia ya querySelector hupata tu kipengele cha kwanza kinachokutana nacho. Ili kupata yote unahitaji kutumia querySelectorAll:
Var hiFrets = document.querySelectorAll("table#frets tr:nth-child(3)")
Nambari hii hurejesha kila safu ya tatu kutoka kwa jedwali kwa id="frets".
Pointi chache muhimu sanaKuna mapungufu kadhaa ambayo unapaswa kufahamu ikiwa unatumia querySelector / All njia:
Sio vivinjari vyote vinavyotumia utendakazi mpya. Ikiwa ni muhimu kwako kwamba msimbo unafanya kazi kwenye IE6-7, basi ni bora kutumia maktaba ambazo zinaweza kuendesha DOM: Sizzle au jQuery.
Wateuzi lazima waandikwe kwa uangalifu sana, vinginevyo vivinjari havitaelewa, na njia zilizo hapo juu zitarudi bure. Kwa ujumla, kuwa mwangalifu sana, haswa unapotumia viteuzi vya CSS3.
Tofauti na getElementsByTagName, mbinu ya querySelectorAll hurejesha orodha tuli ya vipengele vilivyorejeshwa jinsi yanavyoonekana kwenye ukurasa kwa sasa. Hii ina maana kwamba unapofanya mabadiliko yoyote yanayobadilika kwenye msimbo (kuongeza, kuondoa vipengele kupitia JavaScript), utahitaji kutumia mbinu ya querySelectorAll tena.
Jaribu utendakazi mpya ili kuondoa hitaji la kupakua aina mbalimbali za maktaba.
Jukumu ambalo mara nyingi huwakabili watengenezaji wa JavaScript wapya ni kuchagua kipengee kwenye ukurasa wa wavuti kwa sifa yake ya kitambulisho.
Wacha tuseme tuna nambari kwenye ukurasa.
Zuia maudhui.
Unawezaje kuchagua kipengee na id="elem" na kufanya msururu wa vitendo nacho?
Kuna chaguzi kadhaa za kutatua tatizo. Hebu tuyaangalie sasa.
Chaguo 1: Tumia mbinu ya Javascript getElementById.
Kuna njia ya kufikia kipengee kwa kitambulisho chake kwa kutumia msimbo wa javascript "safi", bila kutumia maktaba zozote za watu wengine. Njia hii ni kutumia njia ya ggetElementById(“element_id”). Kwa hivyo, tunapata kipengee tunachohitaji kwa kitambulisho chake.
Wacha tuone jinsi hii inavyofanya kazi na mfano rahisi.
Zuia maudhui. alert(document.getElementById("elem").innerHTML);
Tafadhali kumbuka kuwa mistari hii ya msimbo (hati) iko chini ya kipengele chenyewe. Hili ni sharti la utendakazi wa hati hii, kwa sababu... Nambari ya Javascript inatekelezwa kadiri ukurasa unavyopakia. Ikiwa tutaweka msimbo hapo juu, tutafikia kipengele kwenye ukurasa ambao bado haujapakia, i.e. bado haitakuwa kwenye msimbo wakati hati inatekelezwa. Kuna njia za kuepuka hili, lakini ni zaidi ya upeo wa makala hii.
Matokeo yake, ikiwa kila kitu kitafanya kazi kwa usahihi, tutapata dirisha la pop-up. Dirisha hili litaonyesha maandishi yaliyo ndani ya div block.
Hebu sasa tuone jinsi tunavyoweza kutatua tatizo hili kwa njia nyingine.
Chaguo 2. Kutumia maktaba ya JQuery.
Chaguo la pili la kuchagua kipengee kwa kitambulisho chake ni kutumia maktaba ya JQuery. Katika mazoezi, katika maandishi ya kisasa, njia hii hutumiwa mara nyingi. Ni rahisi zaidi na rahisi kukumbuka.
Ili kurejelea kipengee kwa kitambulisho chake, unahitaji kutumia ujenzi ufuatao:
$("#elem")
Hapa elem ni jina lililomo katika sifa ya kitambulisho.
Kwa sababu Tutatumia maktaba ya Javascript ya wahusika wengine iitwayo JQuery, kisha maktaba hii lazima kwanza iingizwe.
Imeongezwa katika sehemu hiyo, moja wapo ya njia hii inaweza kufanywa ni kuongeza safu ifuatayo ya nambari:
Ili maktaba iweze kupakiwa lazima kuwe na muunganisho wa Mtandao.
Zuia maudhui. tahadhari($("#elem").html());
Hati yenyewe, kama ilivyo katika mfano uliopita, inapaswa kuwa chini ya nambari ya kitu ambacho unataka kuingiliana nacho.
Kwa hivyo, tumejadili njia mbili za jinsi unavyoweza kuchagua kipengee kwenye ukurasa wa wavuti kwa sifa yake ya kitambulisho na kuingiliana nacho. Chagua njia inayofaa kwako na uifanye kwa vitendo.
Ndani ya hati inayolingana na kiteuzi kilichobainishwa, au kikundi cha wateuzi. Ikiwa hakuna zinazolingana zinazopatikana, null itarejeshwa.
Kumbuka: Ulinganishaji unafanywa kwa upitishaji wa agizo la mapema la kina-kwanza wa nodi za hati kuanzia na kipengee cha kwanza kwenye mwalo wa hati na kurudia kupitia nodi zinazofuatana kwa mpangilio wa idadi ya nodi za watoto.
Kipengele cha sintaksia = document.querySelector(wachaguzi); Viteuzi vya vigezo A DOMstring iliyo na kiteuzi kimoja au zaidi ili kulingana. Mfuatano huu lazima uwe mfuatano halali wa kuchagua CSS; ikiwa sivyo, ubaguzi wa SYNTAX_ERR umetupwa. Angalia Kupata vipengele vya DOM kwa kutumia viteuzi kwa zaidi kuhusu viteuzi na jinsi ya kuvidhibiti.Kumbuka: Herufi ambazo si sehemu ya sintaksia ya kawaida ya CSS lazima ziepukwe kwa kutumia herufi ya nyuma. Kwa kuwa JavaScript pia hutumia backslash escaping, kuwa mwangalifu hasa unapoandika maandishi ya mfuatano kwa kutumia herufi hizi. Tazama kwa habari zaidi.
Thamani ya kurejesha Vighairi SYNTAX_ERR Sintaksia ya viteuzi vilivyobainishwa ni batili. Vidokezo vya matumiziIwapo kiteuzi kilichobainishwa kinalingana na kitambulisho ambacho kimetumika kimakosa zaidi ya mara moja kwenye hati, kipengele cha kwanza kilicho na kitambulisho hicho kinarejeshwa.
Kutoroka wahusika maalumIli kulinganisha na kitambulisho au viteuzi ambavyo havifuati sintaksia ya kawaida ya CSS (kwa kutumia koloni au nafasi isivyofaa, kwa mfano), lazima uepuke mhusika kwa kurudi nyuma (" \ "). Kwa vile backslash pia ni herufi ya kutoroka katika JavaScript, ikiwa unaingiza kamba halisi, lazima uepuke. mara mbili(mara moja kwa kamba ya JavaScript, na wakati mwingine kwa querySelector()):
console.log("#foo\bar"); // "#fooar" (\b ni herufi ya kudhibiti nafasi ya nyuma) document.querySelector("#foo\bar"); // Hailingani na kitu chochote console.log("#foo\\bar"); // "#foo\bar" console.log("#foo\\\\bar"); // "#foo\\bar" document.querySelector("#foo\\\\bar"); // Linganisha div document.querySelector ya kwanza("#foo:bar"); // Hailingani na kitu chochote document.querySelector("#foo\\:bar"); // Linganisha div ya pili
Mifano Kupata kipengele cha kwanza kinacholingana na darasaKatika mfano huu, kipengele cha kwanza kwenye hati na darasa " myclass" kinarejeshwa:
Var el = document.querySelector(".myclass");
Chaguo ngumu zaidiViteuzi pia vinaweza kuwa na nguvu sana, kama inavyoonyeshwa katika mfano ufuatao. Hapa, kipengee cha kwanza kilicho na jina "kuingia" () kilicho ndani ya darasa ambacho ni "jopo kuu la mtumiaji" () kwenye hati kinarejeshwa:
Var el = document.querySelector("div.user-panel.main input");
Vipimo| DOM Ufafanuzi wa "document.querySelector()" katika vipimo hivyo. |
Kiwango cha Kuishi |
Jedwali la uoanifu kwenye ukurasa huu limetolewa kutoka kwa data iliyopangwa. Iwapo ungependa kuchangia data, tafadhali angalia https://github.com/mdn/browser-compat-data na ututumie ombi la kuvuta.
Sasisha data ya uoanifu kwenye GitHub
| Simu ya Kompyuta ya mezani | |||||||||||
| Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet | |||||||||||
| Usaidizi kamili wa Chrome 1 | Msaada kamili wa Edge 12 | Msaada kamili wa Firefox 3.5 | Msaada kamili wa IE 8 | Msaada kamili wa Opera 10 | Msaada kamili wa Safari 3.2 | WebView Android Msaada kamili Ndiyo | Usaidizi kamili wa Chrome Android Ndiyo | Firefox Android Msaada kamili Ndiyo | Msaada kamili wa Opera Android 10.1 | Msaada kamili wa Safari iOS 3.2 | Samsung Internet Android ? |
