Zaidi ya hayo, kitu cha HTMLDocument kinafafanua sifa mbili, ambayo kila moja inarejelea sio mkusanyiko, lakini kipengele kimoja. Sifa ya document.body inawakilisha kipengele cha hati ya HTML, na kipengele cha document.head kinawakilisha . Sifa hizi hufafanuliwa kila wakati kwenye hati: hata ikiwa hati ya chanzo haina na vipengee, kivinjari kitaunda kwa ukamilifu. Kipengele cha hati cha kitu cha Hati kinarejelea kipengele cha msingi cha hati. Katika hati za HTML daima inawakilisha .

Thamani ya sifa ya darasa la HTML ni orodha ya vitambulishi sifuri au zaidi, ikitenganishwa na nafasi. Inakuruhusu kufafanua seti za vipengele vya hati vinavyohusiana: vipengele vyovyote vilivyo na kitambulisho sawa katika sifa ya darasa ni sehemu ya seti sawa. Darasa la neno limehifadhiwa katika JavaScript, kwa hivyo JavaScript ya upande wa mteja hutumia sifa ya className kuhifadhi thamani ya sifa ya darasa la HTML.

Kwa kawaida sifa ya darasa hutumiwa pamoja na laha za mtindo wa CSS ili kutumia mtindo wa kawaida wa uwasilishaji kwa washiriki wote wa seti. Hata hivyo, kwa kuongeza, kiwango cha HTML5 kinafafanua mbinu ya getElementsByClassName(), ambayo inakuwezesha kuchagua vipengele vingi vya hati kulingana na vitambulisho katika sifa za darasa lao.

Kama vile njia ya getElementsByTagName() , njia ya getElementsByClassName() inaweza kuitwa kwenye hati za HTML na vipengele vya HTML, na kurejesha kitu cha moja kwa moja cha NodeList kilicho na vizazi vyote vya hati au kipengele kinacholingana na vigezo vya utafutaji.

Njia ya getElementsByClassName() inachukua hoja ya mfuatano mmoja, lakini mfuatano wenyewe unaweza kuwa na vitambulishi vingi, vikitenganishwa na nafasi. Vipengele vyote ambavyo sifa zake za darasa zina vitambulishi vyote vilivyobainishwa vitazingatiwa kuwa vinalingana. Mpangilio wa vitambulisho haijalishi. Kumbuka kuwa katika sifa ya darasa na hoja ya njia ya getElementsByClassName(), vitambulishi vya darasa vinatenganishwa na nafasi badala ya koma.

Ifuatayo ni baadhi ya mifano ya kutumia getElementsByClassName() mbinu:

// Tafuta vipengele vyote vilivyo na darasa la "onyo" var warning = document.getElementsByClassName("onyo"); // Tafuta vizazi vyote vya kipengele kilicho na vitambulisho "logi" // na madarasa "kosa" na "fatal" var log = document.getElementById("logi"); var fatal = log.getElementsByClassName("kosa mbaya");

Laha za Mtindo wa CSS zina miundo yenye nguvu sana ya kisintaksia inayojulikana kama viteuzi vinavyokuruhusu kuelezea vipengele au seti za vipengele katika hati. Pamoja na kusawazisha viteuzi vya CSS3, kiwango kingine cha W3C kinachojulikana kama API ya Viteuzi hufafanua mbinu za JavaScript za kurejesha vipengele vinavyolingana na kiteuzi mahususi.

Ufunguo wa API hii ni njia ya querySelectorAll() ya kitu cha Hati. Inachukua hoja ya mfuatano mmoja na kiteuzi cha CSS na kurudisha kitu cha NodeList kinachowakilisha vipengele vyote vya hati vinavyolingana na kiteuzi.

Kwa kuongezea njia ya querySelectorAll(), kitu cha hati pia kinafafanua njia ya querySelector() , ambayo ni sawa na njia ya querySelectorAll() isipokuwa inarudisha tu kipengele cha kwanza (kwa mpangilio wa hati) kinacholingana, au kubatilisha ikiwa hakuna. vipengele vinavyolingana.

Njia hizi mbili pia zinafafanuliwa na darasa la Vipengele. Zinapoitwa kwenye kipengele, hati nzima hutafutwa kwa ajili ya inayolingana na kiteuzi kilichotolewa, na kisha matokeo huchujwa ili kujumuisha tu vizazi vya kipengele kilichotumiwa. Mbinu hii inaweza kuonekana kuwa isiyofaa kwa sababu ina maana kwamba mfuatano wa kiteuzi unaweza kujumuisha mababu ya kipengele kinacholinganishwa.

Baada ya kuchagua kipengele cha hati, wakati mwingine ni muhimu kupata sehemu zinazohusiana na muundo wa hati (mzazi, ndugu, mtoto). Kitu cha Hati kinaweza kuzingatiwa kama mti wa vitu vya Node. Aina ya Node inafafanua mali ambayo hukuruhusu kuzunguka mti kama huo. Kuna kiolesura kingine cha programu kwa urambazaji wa hati, kama vile mti wa kitu cha Element.

Kitu cha Hati, vipengee vyake vya Kipengele, na vitu vya Maandishi vinavyowakilisha vipande vya maandishi kwenye hati vyote ni vitu vya Node. Darasa la Node linafafanua sifa zifuatazo muhimu:

Nodi kuu ya nodi hii, au null kwa nodi ambazo hazina mzazi, kama vile Hati.

Kitu kinachoweza kusomeka kama safu (NodeList) ambacho hutoa uwakilishi wa nodi za watoto.

Nodi za mtoto wa kwanza na wa mwisho, au null ikiwa nodi iliyotolewa haina nodi za watoto.

Nodi za kaka zinazofuata na zilizopita. Nodi za ndugu ni nodi mbili ambazo zina mzazi mmoja. Utaratibu ambao wanaonekana unafanana na utaratibu katika waraka. Sifa hizi huunganisha nodi kwenye orodha iliyounganishwa mara mbili.

Aina ya nodi hii. Nodi za aina ya Hati zina thamani ya 9 katika mali hii. Nodi za aina Kipengele - thamani 1. Nodi za maandishi za aina Nakala - thamani 3. Nodi za aina Maoni - thamani 8 na nodi za aina DocumentFragment - thamani 11.

Maudhui ya maandishi ya nodi za Maandishi na Maoni.

Jina la lebo ya Kipengele kilicho na herufi zote zilizobadilishwa kuwa herufi kubwa.

Kwa kutumia mali hizi za darasa la Node, unaweza kurejelea nodi ya pili ya mtoto ya nodi ya kwanza ya kitu cha Hati, kama inavyoonyeshwa hapa chini:

Document.childNodes.childNodes == document.firstChild.firstChild.nextSibling

Wacha tufikirie kuwa hati inayohusika ina fomu ifuatayo:

TestHello Dunia!

Kisha nodi ya pili ya mtoto ya nodi ya mtoto wa kwanza itakuwa kipengele. Katika nodeType mali ina thamani 1 na katika nodeName mali ina thamani "BODY".

Walakini, kumbuka kuwa API hii ni nyeti sana kwa mabadiliko katika maandishi ya hati. Kwa mfano, ukiongeza mlisho wa mstari mmoja kati ya na tagi kwenye hati hii, herufi hiyo ya mlisho wa laini inakuwa nodi ya kwanza ya mtoto (Nodi ya maandishi) ya nodi ya mtoto wa kwanza, na nodi ya mtoto ya pili inakuwa kipengele, si .

Wakati masilahi ya msingi ni katika vipengee vya hati vyenyewe, badala ya maandishi ndani yao (na nafasi nyeupe kati yao), ni rahisi zaidi kutumia kiolesura cha programu ambacho hukuruhusu kutafsiri hati kama mti wa vitu vya Kipengele. , kupuuza nodi za Maandishi na Maoni ambazo pia ni sehemu ya hati.

Sehemu ya kwanza ya kiolesura hiki cha programu ni mali ya watoto ya vitu vya Element. Kama mali ya mtoto, thamani yake ni kitu cha NodeList. Walakini, tofauti na mali ya Nodi za watoto, orodha ya watoto ina vitu vya Element pekee.

Kumbuka kwamba nodi za Maandishi na Maoni hazina nodi za watoto. Hii ina maana kwamba kipengele cha Node.parentNode kilichoelezwa hapo juu hakirudishi nodi za aina ya Maandishi au Maoni. Thamani ya kipengele cha parentNodi ya kitu chochote cha Kipengele daima itakuwa kitu kingine cha Kipengele au mzizi wa mti - kitu cha Hati au Hati.

Sehemu ya pili ya kiolesura cha maombi ya vitu vya kuvinjari hati ni mali ya kitu cha Element, sawa na mali ya kupata nodi za watoto na ndugu za kitu cha Node:

Sawa na mali ya Mtoto wa kwanza na ya Mtoto wa mwisho, lakini rudisha vipengele vya mtoto.

Sawa na sifa ya pili ya Ndugu na Sibling iliyotangulia, lakini rudisha vipengele vya kaka.

Idadi ya vipengele vya watoto. Hurejesha thamani sawa na mali ya children.length.

Sifa hizi za ufikiaji wa vipengele vya watoto na ndugu zimesawazishwa na kutekelezwa katika vivinjari vyote vya sasa isipokuwa IE.

Mfano wa Kitu cha Hati, au "DOM", ni kiolesura cha programu cha kufikia vipengele vya kurasa za wavuti. Kimsingi, ni API ya ukurasa inayokuruhusu kusoma na kudhibiti yaliyomo, muundo, na mitindo ya ukurasa. Wacha tujue jinsi inavyofanya kazi na jinsi inavyofanya kazi.

Mchakato wa kubadilisha hati asili ya HTML kuwa ukurasa unaoweza kutolewa, mtindo na mwingiliano unaitwa "Njia Muhimu ya Utoaji". Ingawa mchakato huu unaweza kugawanywa katika hatua kadhaa, kama nilivyoeleza katika Kuelewa Njia Muhimu ya Utoaji, hatua hizi zinaweza kugawanywa katika vikundi viwili. Katika kwanza, kivinjari huchanganua hati ili kuamua ni nini kitakachoonyeshwa kwenye ukurasa, na kwa pili, kivinjari hufanya utoaji.

Matokeo ya hatua ya kwanza ni kile kinachoitwa "mti wa kutoa". Mti unaoonyesha ni uwakilishi wa vipengele vya HTML ambavyo vitatolewa kwenye ukurasa na mitindo inayohusiana nayo. Ili kuunda mti huu, kivinjari kinahitaji vitu viwili:

DOM ni uwakilishi wa kitu cha hati asili ya HTML. Ina tofauti fulani, kama tutakavyoona hapa chini, lakini kimsingi ni jaribio la kubadilisha muundo na maudhui ya hati ya HTML kuwa kielelezo cha kitu ambacho kinaweza kutumiwa na programu mbalimbali.

Muundo wa vitu vya DOM unawakilishwa na kile kinachoitwa "mti wa nodi". Inaitwa hivyo kwa sababu inaweza kudhaniwa kuwa mti wenye mzazi mmoja ambao una matawi katika matawi kadhaa ya watoto, ambayo kila moja linaweza kuwa na majani. Katika kesi hii, "kipengele" cha mzazi ni kipengele cha mizizi, "matawi" ya mtoto ni vipengele vilivyowekwa, na "majani" ni yaliyomo ndani ya vipengele.

Wacha tuchukue hati hii ya HTML kama mfano:

Ukurasa wangu wa kwanza wa wavuti Hujambo, ulimwengu!

Habari yako?

Hati hii inaweza kuwakilishwa kama mti ufuatao wa nodi:

• html
  • kichwa
    • kichwa
      • Ukurasa wangu wa kwanza wa wavuti
  • mwili
    • h1
      • Salamu, Dunia!
    • uk
      • Habari yako?

Katika mfano ulio hapo juu, inaonekana kwamba DOM ni ramani ya 1:1 ya hati asili ya HTML. Walakini, kama nilivyosema hapo awali, kuna tofauti. Ili kuelewa kikamilifu DOM ni nini, tunahitaji kuangalia ni nini sio.

Ingawa DOM imeundwa kutoka kwa hati ya HTML, sio sawa kila wakati. Kuna matukio mawili ambayo DOM inaweza kutofautiana na chanzo cha HTML.

DOM ni kiolesura cha kufikia vipengele halisi (yaani, vilivyotolewa tayari) vya hati ya HTML. Wakati wa mchakato wa kuunda DOM, kivinjari chenyewe kinaweza kusahihisha baadhi ya makosa katika msimbo wa HTML.

Fikiria hati hii ya HTML kama mfano:

Salamu, Dunia!

Hati haina vipengele na , ambayo ni hitaji la HTML. Lakini ikiwa tutaangalia mti wa DOM unaosababishwa, tunaweza kuona kuwa hii imesasishwa:

• html
  • kichwa
  • mwili
    • Salamu, Dunia!
  2. Wakati DOM inarekebishwa na msimbo wa Javascript

  Mbali na kuwa kiolesura cha kutazama yaliyomo kwenye hati ya HTML, DOM yenyewe pia inaweza kurekebishwa.

  Tunaweza, kwa mfano, kuunda nodi za ziada za DOM kwa kutumia Javascript.

  Var newParagraph = document.createElement("p"); var paragraphContent = document.createTextNode("Mimi ni mpya!"); newParagraph.appendChild(abaraYaliyomo); document.body.appendChild(newParagraph);

  Msimbo huu utabadilisha DOM, lakini mabadiliko hayataonekana kwenye hati ya HTML.

  DOM sio kile unachokiona kwenye kivinjari (yaani mti wa kutoa)

  Kwenye eneo la kutazama la kivinjari unaona mti wa kutoa, ambao kama nilivyosema ni mchanganyiko wa DOM na CSSOM. Ni nini tofauti kuhusu DOM na mti wa kutoa ni kwamba mwisho unajumuisha tu kile ambacho hatimaye kitatolewa kwenye skrini.

  Kwa sababu mti wa kutoa unahusiana tu na kile kinachotolewa, haijumuishi vipengele ambavyo vimefichwa. Kwa mfano, vipengele ambavyo vina mitindo yenye onyesho: none .

  Salamu, Dunia!

  Habari yako?

  DOM itajumuisha kipengele

  • html
    • kichwa
    • mwili
      • h1
        • Salamu, Dunia!
      • uk
        • Habari yako?

  Walakini, mti wa kutoa, na kwa hivyo kile kinachoonekana kwenye tovuti ya kutazama, haitajumuishwa kwenye kipengee hiki.

  • html
    • mwili
      • h1
        • Salamu, Dunia!
  DOM sio kile kinachoonyeshwa kwenye DevTools

  Tofauti hii ni ndogo kidogo kwa sababu Kikaguzi cha Kipengele cha DevTools hutoa ukadiriaji wa karibu zaidi wa DOM ambao tunayo kwenye kivinjari. Walakini, mkaguzi wa DevTools ana maelezo ya ziada ambayo hayapo kwenye DOM.

  Mfano bora wa hii ni CSS pseudo-elements. Vipengele vya uwongo vilivyoundwa kwa kutumia ::before na ::baada ya viteuzi ni sehemu ya CSSOM na mti wa uwasilishaji, lakini si sehemu ya kitaalam ya DOM. Hii ni kwa sababu DOM imeundwa kutoka kwa hati asili ya HTML pekee, bila kujumuisha mitindo inayotumika kwa kipengee.

  Ingawa vipengele bandia si sehemu ya DOM, vipo katika mkaguzi wetu wa vipengele vya devtools.

  
  Muhtasari

  DOM ni kiolesura cha hati ya HTML. Inatumiwa na vivinjari kama hatua ya kwanza katika kubainisha cha kutoa kwenye tovuti ya kutazama, na kwa msimbo wa Javascript kubadilisha maudhui, muundo, au mtindo wa ukurasa.

Katika somo hili tutaangalia misingi ya kufanya kazi na matukio, sifa na getElementById katika JavaScript.

Katika masomo yaliyotangulia, tulisoma uwezo wa kimsingi wa lugha ya JavaScript. Kuanzia na somo hili, tutafanya kile ambacho JavaScript imeundwa hasa - tutarekebisha vipengele vya ukurasa wa HTML na kujibu vitendo vya mtumiaji. Maandishi yetu yatakuwa ya kuvutia zaidi na yenye manufaa.

Tutaanza kwa kufundisha msimbo wetu kujibu vitendo vya mtumiaji wa tovuti. Kwa mfano, mtumiaji atabofya mahali fulani na panya, na msimbo wetu katika kujibu itabidi kuchakata kubofya huku na kuonyesha habari fulani kwenye skrini.

Vitendo vya mtumiaji tunavyoweza kufuatilia kupitia JavaScript vinaitwa matukio. Matukio yanaweza kuwa kama ifuatavyo: kulia panya kwenye kipengele cha ukurasa, mwongozo panya kwa kipengele cha ukurasa au kinyume chake - kujali mshale wa panya kutoka kwa kipengele na kadhalika. Kwa kuongeza, kuna matukio ambayo hayategemei vitendo vya mtumiaji, kwa mfano, tukio wakati ukurasa wa HTML umewekwa kwenye kivinjari.

Kuna njia kadhaa za kufanya kazi na matukio katika JavaScript. Tutaanza na rahisi zaidi kati yao.

Njia rahisi zaidi ya kuweka jibu la kipengele kwa tukio maalum ni kubainisha kwa kutumia sifa ya lebo maalum. Kwa mfano, tukio "bonyeza panya" inalingana na sifa ya kubofya, tukio "panya juu"- sifa ya onmouseover, na tukio "kipengele cha majani ya mshale"- sifa ya onmouseout.

Thamani ya sifa iliyo na tukio ni msimbo wa JavaScript. Katika mfano ufuatao kwa kubofya kitufe na panya kazi ya tahadhari itatekelezwa:

Na sasa kwa kubofya kazi ya func itatekelezwa kwenye kipengele:

kazi func() (tahadhari("!");)

Huwezi kufanya kazi moja tu, lakini kadhaa:

kazi func1() ( tahadhari("1"); ) kazi func2() ( tahadhari("2"); )

Tafadhali kumbuka kuwa ikiwa unahitaji nukuu mara mbili ndani ya sifa (kwa mfano, kwa kamba) na nukuu za nje za sifa pia ni nukuu mbili - bonyeza = "tahadhari ("!")"- kanuni hii haitafanya kazi.

Kuna njia kadhaa za kupambana na hili: unaweza kubadilisha dondoo za nje hadi nukuu moja bonyeza = "tahadhari ("!")", unaweza pia kuepuka nukuu za ndani kwa kurudi nyuma bonyeza="tahadhari(\"!\)" au sogeza tu msimbo wa JavaScript kutoka kwa sifa hadi kitendakazi, na uache tu jina la kazi katika sifa bonyeza="func()".

Jambo hilo hilo litatokea ikiwa utaweka nukuu za nje za sifa hiyo katika nukuu moja na pia kutumia nukuu moja kwa kamba: bonyeza = "tahadhari ("!")"- hapa, pia, kila kitu kinatatuliwa kwa njia sawa.

Sasa tutajifunza jinsi ya kupokea vipengele vya ukurasa wa HTML na kufanya udanganyifu mbalimbali nao (tutaweza kubadilisha, kwa mfano, maandishi yao na rangi na mambo mengine mengi muhimu).

Wacha tuseme tuna lebo kwenye ukurasa na sifa ya kitambulisho iliyowekwa test . Wacha tuandike kiunga cha lebo hii kwenye kigezo cha kutofautisha. Ili kufanya hivyo, lazima tutumie njia ya getElementById, ambayo hupata kipengele kwa kitambulisho chake.

Ingizo hili litatokea wakati kitufe ambacho tumepewa sifa ya kubofya kimebofya. Kwa kubofya kitufe hiki, kipengele cha kukokotoa kitafanya kazi, ambacho kitapata kipengee kwenye ukurasa wa HTML chenye kitambulisho sawa na kujaribu na kuandika. kiungo kwa hilo kwa kutofautisha kwa elem:

Sasa katika kigezo cha kutofautisha tuna kiungo cha kipengele kilicho na sifa ya kitambulisho katika thamani ya jaribio. Elem ya kutofautiana yenyewe ni kitu.

Kitu hiki na lebo ya ukurasa wa HTML zimeunganishwa kwa kila mmoja - tunaweza kubadilisha sifa zozote za kitu cha elem na wakati huo huo tutaona mabadiliko kwenye ukurasa wa HTML ambayo yatatokea kwa kipengee tulichopokea.

Wacha tuone jinsi hii inavyotokea katika mazoezi.

Sasa tutasoma na kubadilisha sifa za lebo. Wacha tuwe na ingizo tena na kitambulisho sawa na kujaribu na kitufe, tukibofya ambayo kitendakazi cha func kitazinduliwa:

Ndani ya kazi ya func tutapokea mchango wetu kwa kitambulisho chake na uandike kiunga kwake katika utofauti wa elem:

kazi func() ( var elem = document.getElementById("test"); )

Hebu sasa tuonyeshe yaliyomo katika sifa zetu za ingizo. Ili kufikia, kwa mfano, sifa ya thamani, unapaswa kuandika yafuatayo: elem.value , ambapo elem ni kigezo ambamo tuliandika kiungo cha kipengele chetu kwa kutumia getElementById, na thamani ni sifa ya lebo inayotuvutia.

Tunaweza kuonyesha maudhui ya sifa kupitia tahadhari kwa njia hii - alert(elem.value) - au tuandike kwa mabadiliko fulani. Hebu tufanye hivi:

kazi func() ( var elem = document.getElementById("test"); tahadhari(elem.value); //itaonyesha "!")

Tunaweza kusoma maadili ya sifa nyingine kwa njia ile ile, kwa mfano, elem.id - tunasoma thamani ya sifa ya kitambulisho, na elem.type - thamani ya sifa ya aina. Tazama mfano:

kazi func() ( var elem = document.getElementById("test"); tahadhari(elem.value); //itaonyesha "!" tahadhari(elem.id); //itaonyesha tahadhari ya "test"(elem.type) ); //itaonyesha "maandishi")

Huwezi kusoma tu maadili ya sifa, lakini pia ubadilishe. Kwa, kwa mfano, kubadilisha thamani ya sifa ya thamani, unahitaji tu kuikabidhi kwa elem.value construct:

kazi func() ( var elem = document.getElementById("test"); elem.value = "www"; //присвоим новое значение атрибуту value } !}

Nambari ya HTML itaonekana kama hii (sifa ya thamani itakuwa www):

Kweli, sasa jambo gumu zaidi - huwezi kuingiza utofauti wa elem, lakini jenga safu ya alama kwa njia hii:

kazi func() ( alert(document.getElementById("test").value); //itaonyesha "!" )

Kwa njia hiyo hiyo (mnyororo) unaweza kuandika tena sifa:

kazi func() ( document.getElementById("test").value = "www"; }!}

Hata hivyo, katika hali nyingi, kuanzisha kutofautiana ni rahisi zaidi. Linganisha mifano miwili - sasa nimeanzisha kutofautisha kwa elem na ninaweza kusoma idadi yoyote ya sifa, wakati getElementById inaitwa. mara moja tu:

kazi func() ( var elem = document.getElementById("test"); elem.value = "www"; elem.type = "submit"; }!}

Sasa sitangushi utaftaji mpya na kwa hivyo lazima nipigie getElementById mara mbili:

kazi func() ( document.getElementById("test").value = "www"; document.getElementById("test").type = "submit"; }!}

Kwa maoni yangu, nambari hii imekuwa ngumu zaidi, ingawa inachukua mstari mmoja mdogo. Kwa kuongeza, ikiwa ninataka kubadilisha thamani ya id kutoka mtihani hadi, kwa mfano, www, itabidi niifanye katika maeneo mengi, ambayo si rahisi sana.

Kwa upande wetu, ikiwa tunatumia getElementById kila wakati, basi kivinjari kitachakata ukurasa wa HTML kila wakati na kutafuta kipengee kilicho na kitambulisho mara kadhaa (haijalishi kwamba vitambulisho ni sawa - kivinjari kitafanya yote. vitendo mara kadhaa), kufanya shughuli zisizo na maana ambazo zinaweza kupunguza kasi ya uendeshaji wa kivinjari.

Ikiwa tunatumia kutofautisha kwa elem, hakuna utaftaji kwenye ukurasa unaotokea (kipengele tayari kimepatikana na kiunga chake kiko kwenye utofauti wa elem).

Tayari umejifunza jinsi ya kufanya kazi na sifa kupitia JavaScript na sasa ni wakati wa kukuambia kuwa sio kila kitu ni rahisi sana - kuna ubaguzi wakati wa kufanya kazi na sifa - hii ndio sifa ya darasa.

Neno hili ni maalum katika JavaScript na kwa hivyo hatuwezi kuandika kwa urahisi darasa.elimu kusoma thamani ya sifa ya darasa. Badala yake unapaswa kuandika elem.className.

Mfano ufuatao unaonyesha thamani ya sifa ya darasa:

kazi func() ( var elem = document.getElementById("test"); alert(elem.className); )

Kwa njia, kuna sifa nyingine zinazoitwa tofauti na mali. Kwa mfano, for() sifa ina mali inayoitwa htmlFor.

Sasa tutafanya kazi na kitu maalum hiki, ambacho kinaonyesha kipengele cha sasa (kipengele ambacho tukio hilo lilitokea). Zaidi ya hayo, inaonyesha kana kwamba kipengele hiki tayari kilikuwa kimepatikana kwa mbinu ya getElementById.

Wacha tuone jinsi ya kufanya kazi na hii na ni nini urahisi wa njia hii.

Hebu tuwe na kazi ya kubofya pembejeo ili kuonyesha maudhui ya thamani yake.

Kwa sasa unaweza tu kufanya uamuzi huu:

kazi func() ( var elem = document.getElementById("test"); tahadhari(elem.value); )

Kimsingi, suluhisho hili ni zuri, lakini sasa fikiria kuwa tuna pembejeo nyingi na tunapobofya kila moja, tunahitaji kuonyesha thamani yake.

Katika kesi hii, tutamaliza na kitu kama hiki:

kazi func1() ( var elem = document.getElementById("test1"); alert(elem.value); ) kazi func2() ( var elem = document.getElementById("test2"); tahadhari(elem.value); ) kazi func3() ( var elem = document.getElementById("test3"); tahadhari(elem.value); )

Sasa upungufu wa mbinu yetu unaonekana wazi - kwa kila pembejeo tunapaswa kuunda kazi yetu ya usindikaji wa kubofya, na kazi hizi hufanya karibu sawa.

Ikiwa tuna pembejeo 10, tutalazimika kufanya kazi 10, ambayo sio rahisi.

Wacha turahisishe kazi yetu: tutapitisha kitambulisho cha kipengee cha sasa kama kigezo cha kazi. Na badala ya idadi kubwa ya kazi, kila kitu kitapunguzwa kwa kazi moja:

kazi func(id) ( var elem = document.getElementById(id); tahadhari(elem.value); )

Walakini, suluhisho hili bado lina shida - kila kipengee kitalazimika kuingiza kitambulisho tofauti, ambacho pia ni ngumu kidogo.

Kwa hivyo, wacha tuangalie chaguo la kutatua shida kwa kutumia hii .

Wacha tuifanye ili kila ingizo lionyeshe yaliyomo wakati unapobofya. Ili kufanya hivyo, tunapitisha kitu hiki kama parameta kwa kazi, kama hii: func(this) .

Yetu hii inapitishwa kama kigezo cha kukokotoa na kuishia kwenye kigezo cha kutofautisha. Kipengele hiki kinafanya kama kilipatikana kwa njia hii: var elem = document.getElementById(...), lakini huna haja ya kuipokea kwa njia hii, kila kitu tayari tayari huko na unaweza kuitumia. Kwa mfano, elem.value inaashiria thamani ya mchango wetu na kadhalika.

Kwa hivyo, hapa kuna suluhisho rahisi zaidi kwa shida yetu:

kazi func(elem) ( tahadhari(elem.value); )

Katika JavaScript, kufanya kazi na sifa za CSS hutokea kwa kubadilisha thamani ya sifa ya mtindo kwa kipengele. Kwa mfano, ili kubadilisha rangi unahitaji kujenga mlolongo ufuatao - elem.style.color- na uipe thamani ya rangi inayotaka:

kazi func() ( var elem = document.getElementById("test"); elem.style.color = "nyekundu"; )

Huwezi pia kuingiza utofauti wa elem, lakini jenga mlolongo mrefu sana.

Mada ni tata kwelikweli. Lakini, kama wanasema, shetani sio mbaya kama alivyochorwa. Hapa ndipo ninapopata nati ngumu zaidi: kazi hii kuu ya "kuichora" iwe rahisi kumeng'enya, lakini sio ya zamani kabisa. Kufikia sasa, nyenzo zote ambazo nimesoma huwa sio za kawaida au za zamani.

Kifupi cha DOM kinasimama kwa Mfano wa Kitu cha Hati(mfano wa kitu cha hati).

DOM ni kiolesura cha programu cha kufikia yaliyomo katika hati za HTML, XHTML na XML, ambayo ni, kuwakilisha vitambulisho na sifa za HTML, XHTML na XML, pamoja na mitindo ya CSS kama vitu vya programu. JavaScript na lugha zingine za programu za wavuti hufanya kazi na modeli hii.

Historia kidogo

Kuna viwango 4 vya DOM (0, 1, 2 na 3).

Kiwango cha 0 (1996) kilijumuisha miundo ya DOM iliyokuwepo kabla ya Kiwango cha 1. Haya ni makusanyo hasa: hati.picha, fomu.za nyaraka, tabaka. Aina hizi sio vipimo rasmi vya DOM zilizochapishwa na W3C. Badala yake, zinawakilisha habari kuhusu kile kilichokuwepo kabla ya mchakato wa usanifishaji kuanza.

Kiwango cha 1 (1997) pia kilijumuisha utendakazi wa kimsingi wa kuchakata hati za XML: njia nyingi za kufanya kazi na nodi za kibinafsi, kufanya kazi na maagizo ya usindikaji ya XML, nk.

Kwa kuongeza, kiwango cha 1 cha DOM kina idadi ya violesura maalum vinavyoweza kushughulikia vipengele vya HTML binafsi. Kwa mfano, unaweza kufanya kazi na meza za HTML, fomu, orodha za uteuzi, nk.

Kiwango cha 2 cha DOM (2002) kiliongeza vipengele vipya kadhaa.

Ingawa Kiwango cha 1 cha DOM kilikosa usaidizi wa nafasi za majina, violesura vya Kiwango cha 2 vya DOM vina mbinu za kudhibiti nafasi za majina zinazohusiana na mahitaji ya kutunga na kuchakata hati za XML.

Kwa kuongeza, kiwango cha 2 cha DOM inasaidia matukio.

Kiwango cha 2 ndicho kiwango cha sasa cha vipimo vya DOM, lakini W3C inapendekeza baadhi ya sehemu za vipimo vya Kiwango cha 3.

Kiwango cha 3 cha DOM ni rasimu inayofanya kazi ya vipimo vinavyopanua utendakazi wa Kiwango cha 2 cha DOM. Moja ya vipengele muhimu vya toleo hili la vipimo ni uwezo wa kufanya kazi na viendelezi vingi vya DOM.

Je, "kiolesura cha programu" kinamaanisha nini?

Kiolesura cha neno la Kiingereza kinaweza kutafsiriwa kama "eneo la mawasiliano". Kompyuta, kwa ufupi, inaelewa mambo mawili tu: kidogo tupu na kidogo iliyojaa. Lugha ambayo kompyuta "inazungumza" inaweza kufikiria kama safu isiyo na mwisho ya zero na zile, ikitoa idadi isiyo na kikomo ya mchanganyiko tofauti.

Nambari yoyote ya programu ni tafsiri, inayoeleweka kwa programu, ya hizi "zero na zile" ambazo kompyuta inafanya kazi nayo. Kwa hivyo, lugha yoyote ya programu ni kiolesura cha mashine ya binadamu.

Vivinjari hufanya kazi kama programu zingine za kompyuta. Wanatafsiri HTML, XML, misimbo ya CSS, JavaScript, PHP, Perl, n.k. kuwa "zero na zile." Ili kukabiliana na wingi huu wa lugha nyingi, jukwaa la pamoja linahitajika. Jukwaa hili ni DOM - maelezo ambayo hayategemei lugha maalum ya programu au alama. Ni kiolesura ambacho kinaweza kutumika katika lugha nyingi maarufu za programu zinazohusiana na kuunda kurasa za wavuti na uwezo wa kuelewa na kutafsiri vitu vya DOM.

DOM na vivinjari

DOM na JavaScript

Katika JavaScript, juu ya ngazi ya kihierarkia ya vitu vya DOM, aina ya "kondakta" kwenye kiolesura hiki, ni kitu cha hati, na vitu vya DOM vinakuwa mali yake, sifa za mali zake, nk. Pia huitwa nodi za DOM.

Kuna aina 12 za nodi katika kiwango cha 2 cha DOM. Kila aina ya nodi ya DOM imepewa mara kwa mara na jina la kipekee. Nodi nyingi zimeundwa kufanya kazi na XML. Katika kusanyiko la HTML - JavaScript tunalofanya, ni aina 5 pekee zinazoweza kutumika. Lakini hata hii "ncha ya barafu" ni "mti unaoenea" sana ambao hauwezi kufunikwa katika somo moja au mbili.

Seti kamili ya vidhibiti vya aina ya nodi vilivyofafanuliwa katika vipimo vya W3C DOM (nodi zinazopatikana kwa HTML - JavaScript zimeangaziwa kwa bluu):

* Notisi ni majina ambayo yanabainisha umbizo la sehemu ambazo hazijachanganuliwa, umbizo la vipengee ambavyo vina sifa ya nukuu, au programu ya maombi ambayo maagizo yanashughulikiwa. (Si wazi? Bado sina uhakika sana pia.)

Muundo wa hati katika DOM

Vipengee vyote vya hati ni nodi za DOM. Wacha tuangalie hati ya msingi:

Maandishi ya aya

Hapa kuna mchoro wa mti wake wa DOM:

Kila nodi inaweza kuwa na nodi za watoto (mishale inawaongoza kwenye mchoro). Kitu cha hati - msingi wa mti wa hati - pia ni node, lakini haina node ya mzazi na ina idadi ya mali na mbinu ambazo nodes nyingine hazina. Ina nodi moja ya mtoto: kipengele.

Kipengele kina nodi mbili za watoto: na , ambayo vipengele vyote vilivyomo ndani yao huwa watoto.

Makini!

"Kipengele" na "lebo" si sawa. Lebo ni alama ya kuashiria: - hizi ni tagi mbili tofauti. Na kipengele ni kitu kilicho na alama hizi:

Maandishi ya aya

Vipengele, na

Ina maandishi ndani. Hizi ni nodi za maandishi za watoto wao. Kipengele pia kina sifa: align="center" . Nodi za sifa pia ni nodi za watoto za vitu vilivyomo.

Wakati wa kufanya kazi na nodi za miti ya DOM, mali na njia zao hutumiwa.

Utangulizi mdogo

Ninarudia mara nyingine tena: tunapopata vipengele vya ukurasa katika maandiko, tunashughulika sio tu na lugha ya Javascript, lakini pia na interface ya DOM iliyoingia ndani yake. Wakati mwingine unahitaji kufahamu hili, wakati mwingine unaweza kusahau "kwamba tunazungumza kwa prose."

Tayari tumetumia baadhi ya mali na mbinu kutoka kwa mfano wa kitu cha DOM kwa njia hii. Kwa hiyo, mara kwa mara nitatoa viungo kwa masomo ya awali.

Katika somo hili, hatutaenda njia ya "kielimu", kwa kuzingatia mali zote za nodi zote kwenye vivinjari vyote. Kwanza, wacha tufahamiane na vitendo zaidi na "bila migogoro" kati yao.

Ndio maana hatutaanza, kama kawaida, na "sifa kuu": nodeName na nodeValue.

tagName

Hurejesha mfuatano ulio na jina la lebo ya kipengele. Thamani zote zaTagName zina herufi kubwa pekee.

Sintaksia

Mfano

Kujaribu sifa ya tagName

document.write(document.getElementById( "testTagName").tagName)

Matokeo

Kujaribu sifa ya tagName

HTML ya ndani

Tayari tumekumbana na mali hii (tazama Somo la 10). Na sasa tunaelewa ilitoka wapi: "kutoka nyumbani."

Hutoa ufikiaji wa yaliyomo kwenye kipengee. Haibainishi tu maudhui ya maandishi, lakini pia lebo zote za HTML ziko ndani ya kipengele.

Mali hii sio tu ya kusoma, lakini pia kwa kubadilisha yaliyomo.

Kumbuka

Katika IE, innerHTML inasomwa tu kwa idadi ya vipengele: hivi vyote ni vipengele vya jedwali, isipokuwa na, vilevile na.

Kwa mfano, tuliunda meza tupu bila kipengele na tunataka kuiingiza kwa utaratibu kupitia innerHTML :

IE itatupa "kosa lisilojulikana la wakati wa kukimbia" na vivinjari vingine vitabandika.

Wakati huo huo, ikiwa tunauliza maudhui yaliyopo ya kipengele , kwa mfano, kupitia alert(document.getElementById("id").innerHTML) , basi hii itafanya kazi katika IE.

Sintaksia

Mfano

Kujaribu mali ya innerHTML

Aya ya kuingiza

Chombo kikuu cha kufanya kazi na mabadiliko ya nguvu kwenye ukurasa ni DOM (Mfano wa Kitu cha Hati) - kielelezo cha kitu kinachotumiwa kwa hati za XML/HTML.

Kulingana na mfano wa DOM, hati ni safu.
Kila lebo ya HTML huunda kipengele tofauti cha nodi, kila kipande cha maandishi huunda kipengele cha maandishi, nk.

Kwa ufupi, DOM ni uwakilishi wa hati kama mti wa vitambulisho. Mti huu unaundwa na muundo uliowekwa wa vitambulisho pamoja na vipande vya maandishi vya ukurasa, ambayo kila moja huunda nodi tofauti.

Wacha kwanza tujenge mti wa DOM kwa hati inayofuata.

Kichwa: Hati Bora

Lebo ya nje ni , kwa hivyo mti huanza kukua kutoka hapo.

Kuna nodi mbili ndani: na - zinakuwa nodi za watoto za .

Fomu ya lebo nodi za kipengele(nodi ya kipengele). Maandishi yaliyowasilishwa nodi za maandishi(nodi ya maandishi). Zote mbili ni nodi sawa kwenye mti wa DOM.

Hebu sasa tuangalie ukurasa muhimu zaidi:

Kuhusu moose Ukweli kuhusu moose.

Kipengele cha msingi cha uongozi ni html. Ana vizazi viwili. Ya kwanza ni kichwa, ya pili ni mwili. Na kadhalika, kila lebo iliyoorodheshwa ni mtoto wa lebo hapo juu:

Katika takwimu hii, bluu inaonyesha vipengele vya node, nyeusi inaonyesha vipengele vya maandishi.

Mti huundwa na vipengele vya nodi za bluu - vitambulisho vya HTML.

Na hivi ndivyo mti unavyoonekana ikiwa utauonyesha moja kwa moja kwenye ukurasa wa HTML:

Kwa njia, mti katika takwimu hii hauzingatii maandishi yanayojumuisha wahusika wa wazungu pekee. Kwa mfano, nodi ya maandishi kama hiyo inapaswa kuja mara moja baada ya . DOM ambayo haina nodi kama hizo "tupu" inaitwa "kawaida".

Wacha tuangalie hati ngumu zaidi.

Data ya Hati

• Kwa uangalifu
• Habari

Lebo ya juu ni html, ina kichwa na mwili wa watoto, na kadhalika. Hii inasababisha mti wa lebo:

Sifa

Katika mfano huu, nodi zina sifa zifuatazo: style , class , id . Kwa ujumla, sifa pia huzingatiwa nodi katika DOM ambayo mzazi wake ndiye kipengele cha DOM ambamo zimebainishwa.

Walakini, katika upangaji wa wavuti kwa kawaida hawaingii kwenye msitu huu, na huzingatia sifa kuwa mali tu za nodi ya DOM, ambayo, kama tutakavyoona baadaye, inaweza kuwekwa na kubadilishwa kwa ombi la programu.

Kwa kweli hii ni siri, lakini DOCTYPE pia ni nodi ya DOM, na iko kwenye mti wa DOM upande wa kushoto wa HTML (ukweli huu umefichwa kwenye picha).

P.S. Ni utani juu ya siri, bila shaka, lakini si kila mtu anajua kuhusu hilo. Ni ngumu kufikiria ni wapi maarifa kama haya yanaweza kuwa muhimu ...

Wakati wa kuchanganua HTML, Internet Explorer huunda mara moja kawaida DOM ambayo nodi hazijaundwa kutoka kwa maandishi tupu.

Firefox ina maoni tofauti, inaunda kipengele cha DOM kutoka kwa kila kipande cha maandishi.
Kwa hivyo, katika Firefox mti wa hati hii inaonekana kama hii:

Katika takwimu, kwa ufupi, nodi za maandishi zinaonyeshwa tu na hashi. mwili una watoto 7 badala ya 3.

Opera pia ina kitu cha kujivunia. Anaweza kuongeza kipengee cha ziada tupu "kutoka yeye mwenyewe".

Ili kuona hii, fungua hati. Hurejesha idadi ya nodi za watoto za document.body , ikijumuisha nodi za maandishi.

Ninapata 3 kwa IE, 7 kwa Firefox na 8 (!?) kwa Opera.

Kwa mazoezi, kutokubaliana huku hakuleti shida kubwa, lakini unahitaji kuifahamu. Kwa mfano, tofauti inaweza kujidhihirisha katika kesi ya kuorodhesha nodi za miti.

Kwa nini, kando na michoro nzuri, tunahitaji DOM ya kihierarkia?

Rahisi sana:

Kila kipengele cha DOM ni kitu na hutoa sifa kwa ajili ya kuendesha maudhui yake, kwa ajili ya kupata wazazi na watoto.

Kipengee cha hati kinatumika kwa upotoshaji wa DOM.
Kwa kutumia document , unaweza kupata kipengee cha mti unachotaka na ubadilishe yaliyomo.

Kwa mfano, nambari hii inachukua kipengee cha kwanza na lebo ya ol, huondoa vitu viwili vya orodha kwa mfuatano, na kisha kuviongeza kwa mpangilio wa nyuma:

Var ol = document.getElementsByTagName("ol") var hiter = ol.removeChild(ol.firstChild) var kovaren = ol.removeChild(ol.firstChild) ol.appendChild(kovaren) ol.appendChild(hiter)

Kwa mfano wa jinsi hati kama hiyo inavyofanya kazi, bonyeza kwenye maandishi kwenye ukurasa wa moose

Katika mafunzo ya zamani na hati, unaweza kuona kurekebisha msimbo wa HTML wa ukurasa moja kwa moja kwa kupiga document.write .

Katika maandishi ya kisasa, njia hii haitumiki kamwe; kesi za matumizi yake sahihi zinaweza kuhesabiwa kwa upande mmoja.

Epuka document.write.. Isipokuwa wakati unajua unachofanya (mbona unasoma somo basi - tayari wewe ni gwiji)

Wacha tuangalie kwa karibu njia za ufikiaji na mali ya vitu vya DOM.

Ufikiaji na marekebisho yote ya DOM hutoka kwa kitu cha hati.

Wacha tuanze juu ya mti.

Lebo ya juu. Kwa upande wa ukurasa sahihi wa HTML, hii itakuwa .

Tag, ikiwa iko kwenye hati (lazima iwe).

Mfano ufuatao, wakati kifungo kinapobofya, kitatoa uwakilishi wa maandishi wa vitu vya document.documentElement na document.body. Kamba yenyewe inategemea kivinjari, ingawa vitu ni sawa kila mahali.

kazi go() ( alert(document.documentElement) tahadhari(document.body) )

Kila kipengele kwenye DOM kina aina. Nambari yake imehifadhiwa katika sifa ya elem.nodeType

Kwa jumla, kuna aina 12 za vipengele katika DOM.

Kwa kawaida ni moja tu inayotumika: Node.ELEMENT_NODE, ambayo nambari yake ni 1. Vipengele vya aina hii vinalingana na lebo za HTML.

Wakati mwingine aina ya Node.TEXT_NODE pia ni muhimu, ambayo ni sawa na 3. Hivi ni vipengele vya maandishi.

Aina zingine hazitumiki katika programu ya javascript.

Mfano ufuatao, ukibofya kwenye kitufe, utachapisha aina za document.documentElement na kisha aina ya mtoto wa mwisho wa nodi ya document.body. Hii ni nodi ya maandishi.

kazi go() ( alert(document.documentElement.nodeType) arifa(document.body.lastChild.nodeType) ) Maandishi

Kwa mfano, hivi ndivyo hati kutoka kwa mfano hapo juu ingeonekana katika kivinjari ikiwa kila kipengele kinachoonekana kilizungukwa na fremu yenye nambari ya nodeType kwenye kona ya juu kulia.

...Takwimu

• Kwa uangalifu
• Habari

Vipengele vilivyo ndani ya mwili pekee ndivyo vinavyoonyeshwa hapa, kwani ndivyo pekee vinavyoonyeshwa kwenye ukurasa. Kwa vitu vya aina ya 1 (vitambulisho), lebo inayolingana imeonyeshwa kwenye mabano; kwa vitu vya maandishi (aina ya 3), kuna nambari tu.