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 querySelector() mbinu, ambayo ni sawa na 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.

Katika somo hili, tutaangalia DOM ni nini, kwa nini inahitajika, na jinsi inavyojengwa.

Wakati kivinjari kinaomba ukurasa na kupokea msimbo wake wa chanzo cha HTML kwa kujibu kutoka kwa seva, lazima kwanza ichanganue. Katika mchakato wa kuchambua na kuchanganua msimbo wa HTML, kivinjari hujenga mti wa DOM kulingana na hilo.

Baada ya kukamilisha kitendo hiki na idadi ya nyingine, kivinjari huanza kutoa ukurasa. Katika mchakato huu, yeye, bila shaka, tayari anatumia mti wa DOM aliounda, na sio msimbo wa awali wa HTML.

DOM ni kielelezo cha kitu cha hati ambacho kivinjari huunda kwenye kumbukumbu ya kompyuta kulingana na msimbo wa HTML unaopokea kutoka kwa seva.

Ili kuiweka kwa urahisi, msimbo wa HTML ni maandishi ya ukurasa, na DOM ni seti ya vitu vinavyohusiana vilivyoundwa na kivinjari wakati wa kuchanganua maandishi yake.

Katika Chrome, msimbo wa chanzo wa ukurasa ambao kivinjari hupokea unaweza kutazamwa kwenye kichupo cha "Chanzo" kwenye paneli ya "Zana za Wasanidi Programu".

Chrome haina zana ambayo unaweza kutazama mti wa DOM ambayo huunda. Lakini kuna uwakilishi wa mti huu wa DOM kwa namna ya msimbo wa HTML, unapatikana kwenye kichupo cha "Elements". Uwakilishi huu wa DOM, bila shaka, ni rahisi zaidi kwa msanidi programu kufanya kazi naye. Kwa hivyo, hakuna zana ambayo ingewakilisha DOM kama muundo wa mti.

Vitu katika mtindo huu huundwa kutoka kwa karibu kila kitu kilicho katika HTML (vitambulisho, maudhui ya maandishi, maoni, nk), ikiwa ni pamoja na hati yenyewe. Uhusiano kati ya vitu hivi kwenye modeli huundwa kulingana na jinsi vipengele vya HTML vimewekwa kuhusiana na kila mmoja katika msimbo.

Katika kesi hii, DOM ya hati baada ya malezi yake inaweza kubadilishwa. Wakati DOM inabadilika, kivinjari karibu huchora upya picha ya ukurasa mara moja. Kwa hivyo, utoaji wetu wa ukurasa kila wakati unalingana na DOM.

Ili kusoma na kubadilisha DOM kwa utaratibu, kivinjari hutupa API ya DOM au, kwa maneno mengine, kiolesura cha programu. Kwa ufupi, API ya DOM ni mkusanyiko wa idadi kubwa ya vitu tofauti, mali zao na njia ambazo tunaweza kutumia kusoma na kubadilisha DOM.

Kufanya kazi na DOM, JavaScript hutumiwa katika hali nyingi, kwa sababu ... Leo ndio lugha pekee ya programu ambayo maandishi yanaweza kutekelezwa kwenye kivinjari.

Kwa nini tunahitaji API ya DOM? Tunaihitaji ili tuweze kutumia JavaScript kubadili ukurasa kwenye kuruka, i.e. ifanye iwe ya nguvu na maingiliano.

API ya DOM hutupatia (watengenezaji) idadi kubwa ya mbinu ambazo kwazo tunaweza kubadilisha kila kitu kwenye ukurasa, na pia kuingiliana na mtumiaji. Wale. kiolesura hiki cha programu hutuwezesha kuunda miingiliano tata, fomu, kuchakata vitendo vya mtumiaji, kuongeza na kuondoa vipengele mbalimbali kwenye ukurasa, kubadilisha yaliyomo, mali (sifa), na mengi zaidi.

Siku hizi hakuna tovuti kwenye wavuti ambazo hali zao hazitafanya kazi na DOM.

Kabla ya kuendelea na kusoma mfano wa kitu cha hati, lazima kwanza ukumbuke nini msimbo wa chanzo wa ukurasa wa wavuti (hati ya HTML) ni.

Msimbo wa chanzo wa ukurasa wa wavuti unajumuisha lebo, sifa, maoni na maandishi. Lebo ni muundo msingi wa kisintaksia wa HTML. Wengi wao wameunganishwa. Katika kesi hii, mmoja wao anafungua na mwingine anafunga. Jozi moja ya vitambulisho huunda kipengele cha HTML. Vipengele vya HTML vinaweza kuwa na vigezo vya ziada - sifa.

Katika hati, ili kuunda markup fulani, vipengele vingine viko ndani ya wengine. Kwa hivyo, hati ya HTML inaweza kuwakilishwa kama seti ya vipengele vya HTML vilivyowekwa ndani ya kila mmoja.

Kama mfano, fikiria nambari ifuatayo ya HTML:

Jina la ukurasa Jina la kifungu Sehemu ya kifungu

Yaliyomo katika makala

Katika msimbo huu, kipengele cha mizizi ni html. Ina vipengele vya kichwa na mwili. Kipengele cha kichwa kina kichwa, na mwili una h1 na div. Kipengele cha div kwa upande wake kina h2 na p .

Sasa hebu tuangalie jinsi kivinjari hujenga mti wa DOM kulingana na msimbo wa HTML.

Kama ilivyoelezwa hapo juu, kivinjari huunda mti kulingana na vipengele vya HTML na vyombo vingine vya msimbo wa chanzo cha ukurasa. Wakati wa kufanya mchakato huu, inazingatia uwekaji wa vitu ndani ya kila mmoja.

Kama matokeo, kivinjari hutumia mti wa DOM unaosababishwa sio tu katika kazi yake, lakini pia hutupatia API ya kufanya kazi nayo kwa urahisi kupitia JavaScript.

Wakati wa kuunda DOM, kivinjari huunda vitu (nodi za miti ya DOM) kutoka kwa vipengele vya HTML, maandishi, maoni na vyombo vingine vya lugha hii.

Mara nyingi, watengenezaji wa wavuti wanavutiwa tu na vitu (nodi) iliyoundwa kutoka kwa vipengee vya HTML.

Wakati huo huo, kivinjari sio tu huunda vitu kutoka kwa vipengele vya HTML, lakini pia huwaunganisha kwa kila mmoja na uhusiano fulani, kulingana na jinsi kila mmoja wao anavyohusiana na mwingine katika kanuni.

Vipengele ambavyo viko moja kwa moja katika kipengele fulani ni watoto kuhusiana nayo. Na yeye ni mzazi kwa kila mmoja wao. Kwa kuongeza, vipengele hivi vyote ni ndugu (ndugu) kuhusiana na kila mmoja.

Aidha, katika HTML, kipengele chochote huwa na mzazi mmoja (kipengele cha HTML ambacho kinapatikana moja kwa moja). Katika HTML, kipengele hakiwezi kuwa na wazazi wengi. Isipokuwa tu ni kipengee cha html. Hana mzazi.

Ili kupata mti wa DOM kama kivinjari kinavyojenga, unahitaji tu "kupanga" vipengele vyote kulingana na uhusiano wao kwa kila mmoja.

Uundaji wa mti wa DOM unafanywa kutoka juu hadi chini.

Katika kesi hii, mzizi wa mti wa DOM daima ni hati yenyewe (nodi ya hati). Ifuatayo, mti hujengwa kulingana na muundo wa msimbo wa HTML.

Kwa mfano, nambari ya HTML tuliyoangalia hapo juu ingekuwa na mti ufuatao wa DOM:

Juu kabisa ya mti huu ni nodi ya hati. Nodi hii inahusishwa na html, ni mtoto wake. Nodi ya html inaundwa na kipengele cha html (...). Nodi za kichwa(...) na body(...) zina uhusiano wa mzazi na html. Kuhusiana na kila mmoja, wao ni ndugu, kwa sababu kuwa na mzazi mmoja. Nodi ya kichwa inahusishwa na kichwa (lt; title>...), ni mtoto wake. Nodi za h1 na div zinahusishwa na body , ambayo ni mzazi wao. Nodi ya div imeunganishwa na h2(...) na p(), ni watoto wake.

Mti huanza, kama ilivyoonyeshwa hapo juu, na kitu cha hati (nodi). Kwa upande wake ina nodi moja ya mtoto iliyoundwa na kipengee cha html (...). Vipengee vya kichwa(...) na mwili(...) viko katika html na kwa hivyo ni watoto wake. Ifuatayo, nodi ya kichwa ni mzazi wa kichwa (lt; kichwa>...). Vipengele vya h1 na div vimewekwa ndani ya mwili, kumaanisha kuwa ni watoto wake. Div moja kwa moja ina vipengele h2 (...) na p (). Hii inamaanisha kuwa nodi ya div kwa kila mmoja wao ni mzazi.

Hivi ndivyo ilivyo rahisi kujenga mti wa DOM kwenye kivinjari kulingana na msimbo wa HTML.

Kwa nini unahitaji kujua jinsi mti wa DOM umejengwa? Kwanza, ni ufahamu wa mazingira ambayo unataka kubadilisha kitu. Pili, vitendo vingi wakati wa kufanya kazi na DOM huja chini kwa kutafuta (kuchagua) vitu muhimu. Bila kujua jinsi mti wa DOM umeundwa na viunganisho kati ya nodi, itakuwa ngumu sana kupata kipengee maalum ndani yake.

Kulingana na mti wa DOM ulioonyeshwa kwenye takwimu, unda msimbo wa HTML.

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.

Chapisho hili linatanguliza mfululizo wa makala kuhusu njia mbadala za kufanya kazi na XML. "Mbadala" kwa sababu, kama sheria, kufanya kazi na XML katika 1C ni mdogo kwa kuchanganua xml kwa kutumia usomaji wa mtiririko - uchanganuzi wa maandishi kwa mstari kwa mstari. Lakini kuna njia nyingine.

Kwa mfano, kutumia violezo vya mabadiliko ya lugha ya XML ya xPath au XSL. Chaguzi hizi zitajadiliwa katika makala zijazo. Lakini zote zinategemea uwakilishi wa msingi wa DOM wa hati za XML. Nini DOM (mfano wa kitu cha hati) itajadiliwa katika uchapishaji.

DOM inategemea uwakilishi wa hati ya muundo wowote kwa namna ya mti wa nodi, kila nodi (nodi) ambayo inawakilisha kipengele, sifa ya kipengele, thamani ya maandishi ya kipengele, nk. nodi zimejengwa juu ya kanuni ya "mzazi - wasaidizi". Mzizi wa hati (mti wa DOM) hauna mzazi. Kipengele cha mwisho hakina mtoto (vitu kama hivyo huitwa abstractly majani ya mti). Kwa hivyo, DOM inaweza kuundwa sio tu kwa XML, lakini kwa karibu hati yoyote iliyopangwa (HTML, XHTML). Kwa hiyo, kwa mfano, kivinjari cha mtumiaji, kupokea msimbo wa HTML wa ukurasa wa wavuti kutoka kwenye mtandao, hujenga mti wa DOM wa ukurasa huu kwenye RAM ya kompyuta ya mtumiaji.

DOM inafungua uwezekano mkubwa wa kudhibiti data ya hati. Unaweza kuunda nodes mpya, kuziingiza kwenye viwango tofauti vya miti, nodes za nakala, kufuta nodes, kutafuta nodes kwa kutumia vigezo tofauti, na mengi zaidi.

Muundo wa DOM wa hati ya XML unaonyeshwa kwenye mchoro ulio hapa chini.

Lugha yoyote ya kisasa ya programu inajumuisha zana (parers) za kufanya kazi na mti kama huo. Inapokea maudhui ya mfuatano kama ingizo, kichanganuzi cha XML huunda mti wa nodi kwenye RAM na kufanya upotoshaji na data ya mti. Faida ya mbinu hii juu ya uchanganuzi wa mstari kwa mstari ni dhahiri: kwa swali moja kwa mti unaweza kuchagua data muhimu bila kupitia mstari mzima wa hati kwa mstari, kwa sababu RAM ina uwakilishi kamili wa vipengele na vipengele vyote. mahusiano.

Katika jukwaa la 1C, mfano wa DOM unawakilishwa na kitu maalum DocumentDOM, ambayo kwa upande wake hujengwa kwa kutumia kitu cha BuilderDOM na njia yake ya Kusoma. Ingizo la mbinu hii kwa kawaida huwa ni Kisomaji cha XML au kipengee cha HTML Reader, ambacho husoma moja kwa moja maudhui ya maandishi ya XML au HTML kutoka kwa faili au kuyapakia kutoka kwa mfuatano. Kweli, basi kuna idadi ya miundo ambayo hukuruhusu kutoa data kutoka kwa mfano wa kitu cha hati iliyosomwa.

Kati ya chaguzi zote, ya kuvutia zaidi kutoka kwa mtazamo wangu ni chaguo No 1 kwa kutumia njia ya CalculateXPathExpression. Makala inayofuata itatolewa kwake.

Manufaa ya uchanganuzi wa mstari kwa mstari: hitaji la rasilimali ni kidogo. Hasara: inachukua muda mrefu kupata data, unahitaji kusoma mstari mzima wa faili kwa mstari, ugumu wa msimbo wa programu wakati wa kuunganisha nyaraka za XML na muundo tata.

Faida ya sampuli kupitia DOM: kasi ya sampuli ya data, unyenyekevu wa msimbo wa programu. Hasara: kudai rasilimali; ujenzi na maswali kwa DOM hutumia RAM na nguvu ya usindikaji.