Ang hiniling na elemento ay hindi konektado sa modelo ng dom. Isa pang web developer blog. Pagpili ng mga elemento ayon sa klase ng CSS

Sa tutorial na ito titingnan natin ang mga pangunahing kaalaman sa pagtatrabaho sa mga kaganapan, katangian at getElementById sa JavaScript.

Sa nakaraang mga aralin, pinag-aralan namin ang mga pangunahing kakayahan ng wikang JavaScript. Simula sa araling ito, gagawin namin kung para saan talaga ang JavaScript - babaguhin namin ang mga elemento ng HTML page at tutugon sa mga aksyon ng user. Ang aming mga script ay magiging mas kahanga-hanga at kapaki-pakinabang.

Magsisimula kami sa pagtuturo sa aming code na tumugon sa mga aksyon ng user ng site.

Halimbawa, magki-click ang user sa isang lugar gamit ang mouse, at ang aming code bilang tugon ay kailangang iproseso ang pag-click na ito at ipakita ang ilang impormasyon sa screen. Ang mga pagkilos ng user na masusubaybayan namin sa pamamagitan ng JavaScript ay tinatawag na mga kaganapan. Ang mga kaganapan ay maaaring ang mga sumusunod: umiyak mouse sa isang elemento ng pahina, gabay mouse sa isang elemento ng page o vice versa - pangangalaga

mouse cursor mula sa isang elemento at iba pa. Bilang karagdagan, may mga kaganapan na hindi nakadepende sa mga aksyon ng user, halimbawa, ang kaganapan kapag ang isang HTML na pahina ay na-load sa browser.

Mayroong ilang mga paraan upang gumana sa mga kaganapan sa JavaScript.

Magsisimula tayo sa pinakasimple sa kanila. Pangunahing Kaganapan Ang pinakamadaling paraan upang itakda ang tugon ng isang elemento sa isang partikular na kaganapan ay ang tukuyin ito gamit ang isang katangian para sa isang partikular na tag. Halimbawa, isang kaganapan "pag-click ng mouse" tumutugma sa onclick attribute, event "itaas ang mouse"- ang katangian ng onmouseover, at ang kaganapan

"mga dahon ng cursor na elemento" - katangian ng onmouseout. Ang value ng attribute na may event ay JavaScript code. Sa sumusunod na halimbawa

sa pamamagitan ng pag-click sa isang pindutan gamit ang mouse ang function ng alerto ay isasagawa: At ngayon

sa pamamagitan ng pag-click

ang function ng func ay isasagawa sa elemento:

function func() ( alert("!"); )

Maaari kang magsagawa ng hindi lamang isang function, ngunit marami: function func1() ( alert("1"); ) function func2() ( alert("2"); ) Pakitandaan na kung kailangan mo ng double quotes sa loob ng isang attribute (halimbawa, para sa isang string) at ang mga panlabas na quotes ng attribute ay double quotes din -

onclick="alert("!")" function func1() ( alert("1"); ) function func2() ( alert("2"); )- hindi gagana ang code na ito. Mayroong ilang mga paraan upang labanan ito: maaari mong baguhin ang mga panlabas na quote sa mga solong quote, maaari ka ring makatakas sa mga panloob na panipi gamit ang backslash onclick="alerto(\"!\)".

Ang parehong bagay ay mangyayari kung ilalagay mo ang mga panlabas na quote ng katangian sa mga solong quote at gagamit din ng mga solong quote para sa string: function func1() ( alert("1"); ) function func2() ( alert("2"); )- dito, din, ang lahat ay nalutas sa magkatulad na paraan.

Talahanayan ng katangian para sa mga kaganapan Paggawa gamit ang getElementById

Ngayon ay matututunan natin kung paano tumanggap ng mga elemento ng HTML na pahina at magsagawa ng iba't ibang mga manipulasyon sa kanila (magagawa nating baguhin, halimbawa, ang kanilang teksto at kulay at marami pang ibang mga kapaki-pakinabang na bagay).

Sabihin nating mayroon kaming tag sa page na may id attribute na nakatakdang subukan .

Isulat natin ang link sa tag na ito sa elem variable. Upang gawin ito, dapat nating gamitin ang getElementById method, na nakakakuha ng elemento sa pamamagitan ng id nito. Ang entry na ito ay magaganap kapag na-click ang button kung saan namin itinalaga ang onclick attribute. Sa pamamagitan ng pag-click sa button na ito, gagana ang function ng func, na makakahanap ng elemento sa HTML page na may id na katumbas ng pagsubok at pagsulat

link dito sa elem variable:.

Ngayon sa elem variable mayroon kaming link sa isang elemento na may id attribute sa test value. Ang variable elem mismo ay

bagay

Ang object na ito at ang HTML page tag ay konektado sa isa't isa - maaari naming baguhin ang anumang mga katangian ng elem object at sa parehong oras ay makikita namin ang mga pagbabago sa HTML page na mangyayari sa elementong natanggap namin.

Tingnan natin kung paano ito nangyayari sa pagsasanay.

Mga pangunahing kaalaman sa pagtatrabaho sa mga katangian ng HTML sa pamamagitan ng JavaScript Ngayon ay babasahin natin at babaguhin ang mga katangian ng tag. Muli tayong magkaroon ng input na may id na katumbas ng pagsubok at isang button, sa pag-click kung saan ilulunsad ang func function:

Sa loob ng function ng func matatanggap namin ang aming input

sa pamamagitan ng kanyang id

at magsulat ng isang link dito sa elem variable:

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

Ipakita natin ngayon ang mga nilalaman ng ating mga input attribute.

function func() ( var elem = document.getElementById("test"); alert(elem.value); //magpapakita ng "!" alert(elem.id); //magpapakita ng "test" alert(elem.type ); // ay magpapakita ng "teksto")

Hindi mo lang mababasa ang mga value ng attribute, ngunit mababago mo rin ang mga ito.

Para, halimbawa, baguhin ang value ng value attribute, kailangan mo lang itong italaga sa elem.value construct:"; //присвоим новое значение атрибуту value } !}

function func() ( var elem = document.getElementById("test"); elem.value = "www

Magiging ganito ang HTML code (ang value attribute ay magiging www):

Well, ngayon ang pinakamahirap na bagay - hindi ka maaaring pumasok sa elem variable, ngunit bumuo ng isang kadena ng mga puntos sa ganitong paraan:

function func() ( alert(document.getElementById("test").value); //ay magpapakita ng "!" )

Sa parehong paraan (chain) maaari mong muling isulat ang mga katangian:"; }!}

function func() ( document.getElementById("test").value = "www Gayunpaman, sa karamihan ng mga kaso, ang pagpapakilala ng isang variable ay mas maginhawa. Ihambing ang dalawang halimbawa - ngayon ay ipinakilala ko ang elem variable at maaaring magbasa ng anumang bilang ng mga katangian, habang ang getElementById ay tinatawag:

Para, halimbawa, baguhin ang value ng value attribute, kailangan mo lang itong italaga sa elem.value construct:"; elem.type = "submit"; }!}

minsan lang

Sa parehong paraan (chain) maaari mong muling isulat ang mga katangian:"; document.getElementById("test").type = "submit"; }!}

Ngayon hindi ako nagpapakilala ng isang bagong variable at kaya kailangan kong tumawag sa getElementById nang dalawang beses:

Sa aking opinyon, ang code na ito ay naging mas kumplikado, kahit na ito ay tumatagal ng isang mas kaunting linya. Bilang karagdagan, kung gusto kong baguhin ang halaga ng id mula sa pagsubok sa, halimbawa, www, kailangan kong gawin ito sa maraming lugar, na hindi masyadong maginhawa. sa browser. Ang paghahanap ng mga elemento sa isang page, na ginagawa ng getElementById method, ay medyo mabagal na operasyon ( at sa pangkalahatan ang anumang gawain sa mga elemento ng pahina ay isang mabagal na operasyon

- tandaan mo ito).

Sa aming kaso, kung gagamit kami ng getElementById sa bawat oras, pagkatapos ay ipoproseso ng browser ang HTML page sa bawat oras at maghahanap ng isang elemento na may ibinigay na id nang maraming beses (hindi mahalaga na ang mga id ay pareho - gagawin ng browser ang lahat ang mga aksyon nang maraming beses), nagsasagawa ng mga walang kwentang operasyon na maaaring makapagpabagal sa pagpapatakbo ng browser.

Kung gagamitin namin ang elem variable, walang paghahanap sa page na magaganap (ang elemento ay natagpuan na at ang link dito ay nasa elem variable).

Mga pagbubukod: klase at para sa mga katangian

Natutunan mo na kung paano gumawa ng mga attribute sa pamamagitan ng JavaScript at ngayon ay oras na para sabihin sa iyo na hindi lahat ay napakasimple - may exception kapag nagtatrabaho sa mga attribute - ito ang class attribute. Espesyal ang salitang ito sa JavaScript at samakatuwid ay hindi tayo basta basta magsulat elem.klase upang basahin ang halaga ng katangian ng klase. Sa halip ay magsulat ka.

Ang sumusunod na halimbawa ay nagpapakita ng halaga ng katangian ng klase:

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

Sa pamamagitan ng paraan, may iba pang mga katangian na tinatawag na naiiba kaysa sa mga katangian.

Halimbawa, ang for() attribute ay may property na tinatawag na htmlFor.

Paggawa gamit ito

Ngayon ay gagana tayo sa isang espesyal na bagay na ito, na tumuturo sa kasalukuyang elemento (ang elemento kung saan naganap ang kaganapan).

Bukod dito, ito ay nagpapahiwatig na ang elementong ito ay nakuha na ng getElementById method.

Tingnan natin kung paano ito gagawin at kung ano ang kaginhawahan ng diskarteng ito.

Magkaroon tayo ng gawain ng pag-click sa isang input upang ipakita ang mga nilalaman ng halaga nito.

Sa ngayon maaari mo lamang gawin ang desisyong ito:

function func() ( var elem = document.getElementById("test"); alert(elem.value); )

Sa prinsipyo, ang solusyon na ito ay mabuti, ngunit ngayon isipin na mayroon kaming maraming mga input at kapag nag-click kami sa bawat isa, kailangan naming ipakita ang halaga nito.

Sa kasong ito, magtatapos tayo sa isang bagay na tulad nito:

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

Ngayon ang disbentaha ng aming diskarte ay malinaw na nakikita - para sa bawat input kailangan naming lumikha ng aming sariling pag-click sa pagpoproseso ng function, at ang mga function na ito ay halos parehong bagay.

Kung mayroon tayong 10 input, kailangan nating gumawa ng 10 function, na hindi maginhawa.

Pasimplehin natin ang ating gawain: ipapasa natin ang id ng kasalukuyang elemento bilang parameter sa function.

At sa halip na isang malaking bilang ng mga pag-andar, ang lahat ay mababawasan sa isang pag-andar:

function func(id) ( var elem = document.getElementById(id); alert(elem.value); )

Gayunpaman, ang solusyon na ito ay mayroon pa ring disbentaha - ang bawat elemento ay kailangang magpasok ng ibang id, na medyo hindi rin maginhawa. Kaya, sa wakas ay tingnan natin ang opsyon ng paglutas ng problema gamit ito . Gawin natin ito upang ang bawat input ay magpapakita ng nilalaman nito kapag na-click.

Upang gawin ito, ipinapasa namin ang bagay na ito bilang isang parameter sa function, tulad nito: func(this) .

function func(elem) ( alert(elem.value); )

Mga Pangunahing Kaalaman sa CSS

Sa JavaScript, ang pagtatrabaho sa mga katangian ng CSS ay nangyayari sa pamamagitan ng pagbabago ng halaga ng katangian ng estilo para sa isang elemento. Halimbawa, upang baguhin ang kulay na kailangan mong buuin ang sumusunod na kadena - elem.style.color

- at italaga dito ang nais na halaga ng kulay:

function func() ( var elem = document.getElementById("test"); elem.style.color = "red"; ) Hindi mo rin maaaring ipasok ang elem variable, ngunit bumuo.

isang napakahabang kadena

Paggawa gamit ang modelo ng DOM

Ang bawat bagay sa Window ay may isang pag-aari ng dokumento na tumutukoy sa bagay na Dokumento. Ang object ng Dokumento na ito ay hindi isang standalone na bagay. Ito ang pangunahing bagay ng isang malawak na API na kilala bilang Document Object Model (DOM), na tumutukoy kung paano maa-access ang nilalaman ng dokumento.

Pangkalahatang-ideya ng DOM

Ang Document Object Model (DOM) ay ang pangunahing application programming interface na nagbibigay ng kakayahang magtrabaho kasama ang nilalaman ng HTML at XML na mga dokumento. Ang DOM application programming interface (API) ay hindi partikular na kumplikado, ngunit mayroong maraming mga tampok na arkitektura na dapat mong malaman.

Una, unawain na ang mga nested na elemento sa HTML o XML na mga dokumento ay kinakatawan bilang isang puno ng mga bagay na DOM. Ang tree view ng isang HTML na dokumento ay naglalaman ng mga node na kumakatawan sa mga elemento o tag, gaya ng at

At mga node na kumakatawan sa mga linya ng teksto. Ang isang HTML na dokumento ay maaari ding maglaman ng mga node na kumakatawan sa mga komento sa HTML. Isaalang-alang ang sumusunod na simpleng HTML na dokumento:

Halimbawang Dokumento Ito ay isang HTML na dokumento Halimbawa simple lang

text.

Ang representasyon ng DOM ng dokumentong ito ay ipinapakita sa sumusunod na diagram: Para sa mga hindi pamilyar sa mga istruktura ng puno sa computer programming, makatutulong na malaman na ang terminolohiya para sa paglalarawan sa mga ito ay hiniram mula sa mga puno ng pamilya. Ang node na matatagpuan mismo sa itaas ng node na ito ay tinatawag magulang kaugnay ng node na ito. Ang mga node na matatagpuan sa isang antas sa ibaba ng isa pang node ay mga subsidiary kaugnay ng node na ito. Ang mga node na nasa parehong antas at may parehong magulang ay tinatawag kapatid na babae

Ang bawat parihaba sa diagram na ito ay isang document node, na kinakatawan ng isang Node object. Tandaan na ang figure ay nagpapakita ng tatlong magkakaibang uri ng mga node. Ang ugat ng puno ay ang Document node, na kumakatawan sa buong dokumento. Ang mga node na kumakatawan sa mga elemento ng HTML ay mga node ng uri ng Element, at ang mga node na kumakatawan sa text ay mga node ng uri ng Text. Ang Dokumento, Elemento at Teksto ay mga subclass ng klase ng Node. Ang Dokumento at Elemento ay ang dalawang pinakamahalagang klase sa DOM.

Ang uri ng Node at ang mga subtype nito ay bumubuo sa uri ng hierarchy na ipinapakita sa diagram sa ibaba. Pansinin ang mga pormal na pagkakaiba sa pagitan ng mga generic na uri ng Document at Element, at ang mga uri ng HTMLDocument at HTMLElement. Ang uri ng Dokumento ay kumakatawan sa isang HTML at XML na dokumento, at ang klase ng Elemento ay kumakatawan sa isang elemento ng dokumentong iyon. Ang mga subclass ng HTMLDocument at HTMLElement ay partikular na kumakatawan sa isang HTML na dokumento at mga elemento nito:

Ang isa pang bagay na dapat tandaan sa diagram na ito ay mayroong isang malaking bilang ng mga subtype ng klase ng HTMLElement na kumakatawan sa mga partikular na uri ng mga elemento ng HTML. Ang bawat isa sa kanila ay tumutukoy sa mga katangian ng JavaScript na nagpapakita ng mga katangian ng HTML ng isang partikular na elemento o pangkat ng mga elemento. Ang ilan sa mga partikular na klase na ito ay tumutukoy sa mga karagdagang katangian o pamamaraan na hindi nagpapakita ng HTML markup language syntax.

Pagpili ng mga elemento ng dokumento

Ang gawain ng karamihan sa mga programa ng kliyente sa wikang JavaScript ay kahit papaano ay nauugnay sa pagmamanipula ng mga elemento ng dokumento. Sa runtime, maaaring gamitin ng mga program na ito ang pandaigdigang variable na dokumento, na tumutukoy sa isang Document object. Gayunpaman, upang maisagawa ang anumang pagmamanipula sa mga elemento ng dokumento, dapat makuha ng program, o piliin, ang mga bagay na Elemento na tumutukoy sa mga elemento ng dokumentong iyon. Tinutukoy ng DOM ang ilang paraan upang pumili ng mga elemento. Maaari kang pumili ng elemento o elemento ng isang dokumento:

sa pamamagitan ng halaga ng id attribute;

sa pamamagitan ng halaga ng katangian ng pangalan;

sa pamamagitan ng pangalan ng tag;

ayon sa klase ng CSS o pangalan ng mga klase;

sa pamamagitan ng pagtutugma ng isang partikular na tagapili ng CSS.

Ang lahat ng mga diskarte sa pag-sample ng elemento ay inilarawan sa mga sumusunod na subsection.

Pagpili ng mga elemento ayon sa halaga ng katangian ng id

Ang lahat ng mga elemento ng HTML ay may mga katangian ng id. Ang halaga ng attribute na ito ay dapat na natatangi sa loob ng isang dokumento—walang dalawang elemento sa parehong dokumento ang dapat magkaroon ng parehong id attribute value. Maaari kang pumili ng isang elemento sa pamamagitan ng isang natatanging halaga ng katangian ng id gamit ang getElementById() na pamamaraan ng object na Dokumento:

Var section1 = document.getElementById("section1");

Ito ang pinakasimple at pinakakaraniwang paraan upang pumili ng mga elemento. Kung kailangang magawa ng iyong script na manipulahin ang isang partikular na hanay ng mga elemento ng dokumento, magtalaga ng mga halaga sa mga katangian ng id ng mga elementong iyon at gamitin ang kakayahang hanapin ang mga ito gamit ang mga halagang iyon.

Sa mga bersyon ng Internet Explorer na mas maaga kaysa sa IE8, ang getElementById() method ay naghahanap ng mga value ng attribute ng id sa isang case-insensitive na paraan at nagbabalik din ng mga elementong tumutugma sa value ng attribute ng pangalan.

Pagpili ng mga elemento ayon sa halaga ng katangian ng pangalan

Ang HTML name attribute ay orihinal na inilaan upang pangalanan ang mga elemento ng form, at ang halaga ng katangiang ito ay ginamit kapag ang data ng form ay isinumite sa server. Tulad ng id attribute, ang name attribute ay nagtatalaga ng pangalan sa isang elemento. Gayunpaman, hindi tulad ng id, ang halaga ng katangian ng pangalan ay hindi kailangang maging natatangi: maraming elemento ang maaaring magkaroon ng parehong pangalan, na karaniwan kapag ginamit sa mga anyo ng mga radio button at checkbox. Bukod pa rito, hindi tulad ng id, pinapayagan lang ang attribute ng pangalan sa ilang partikular na elemento ng HTML, kabilang ang mga form, elemento ng form, at .

Maaari kang pumili ng mga elemento ng HTML batay sa mga halaga ng kanilang mga katangian ng pangalan gamit ang getElementsByName() na paraan ng object ng Dokumento:

Var radiobuttons = document.getElementsByName("paborito_kulay");

Ang getElementsByName() na pamamaraan ay hindi tinukoy ng klase ng Dokumento, ngunit ng klase ng HTMLDocument, kaya available lang ito sa mga HTML na dokumento at hindi available sa mga XML na dokumento. Nagbabalik ito ng NodeList object, na kumikilos tulad ng read-only na array ng mga Element object.

Sa IE, ang getElementsByName() na pamamaraan ay nagbabalik din ng mga elemento na ang halaga ng katangian ng id ay tumutugma sa tinukoy na halaga. Upang matiyak ang pagiging tugma ng cross-browser, dapat kang maging maingat sa pagpili ng mga halaga ng katangian at huwag gumamit ng parehong mga string tulad ng mga halaga para sa mga katangian ng pangalan at id.

Pumili ng mga item ayon sa uri

Ang getElementsByTagName() na paraan ng Document object ay nagbibigay-daan sa iyong piliin ang lahat ng HTML o XML na elemento ng isang tinukoy na uri (o ayon sa pangalan ng tag). Halimbawa, maaari kang makakuha ng read-only na array-like object na naglalaman ng mga Element object ng lahat ng elemento sa dokumento tulad nito:

Var spans = document.getElementsByTagName("span");

Katulad ng getElementsByName() method, ang getElementsByTagName() ay nagbabalik ng NodeList object. Ang mga elemento ng dokumento ay kasama sa NodeList array sa parehong pagkakasunud-sunod kung saan lumilitaw ang mga ito sa dokumento, i.e. unang elemento

Sa dokumento maaari kang pumili:

Var firstParagraph = document.getElementsByTagName("p");

Hindi case sensitive ang mga pangalan ng HTML tag, at kapag inilapat ang getElementsByTagName() sa isang HTML na dokumento, nagsasagawa ito ng case-insensitive na paghahambing laban sa pangalan ng tag. Ang spans variable na ginawa sa itaas, halimbawa, ay isasama rin ang lahat ng elemento na nakasulat bilang .

Maaari kang makakuha ng NodeList na naglalaman ng lahat ng elemento ng isang dokumento sa pamamagitan ng pagpasa ng wildcard na character na "*" sa getElementsByTagName() na pamamaraan.

Bilang karagdagan, tinutukoy din ng klase ng Element ang getElementsByTagName() na pamamaraan. Ito ay gumaganap nang eksakto tulad ng bersyon ng klase ng Dokumento ng pamamaraan, ngunit pinipili lamang ang mga elemento na nagmula sa elemento kung saan tinawag ang pamamaraan. Iyon ay, hanapin ang lahat ng mga elemento sa loob ng unang elemento

Magagawa mo ito tulad ng sumusunod:

Var firstParagraph = document.getElementsByTagName("p"); var firstParagraphSpans = firstParagraph.getElementsByTagName("span");

Para sa makasaysayang mga kadahilanan, ang HTMLDocument class ay tumutukoy sa mga espesyal na katangian upang ma-access ang ilang mga uri ng mga node. Mga Katangian mga larawan, mga form At mga link, halimbawa, sumangguni sa mga bagay na kumikilos tulad ng mga read-only na array na naglalaman ng mga elemento , At (ngunit ang mga tag na iyon lamang , na mayroong isang href attribute). Ang mga katangiang ito ay tumutukoy sa HTMLCollection object, na halos katulad ng mga NodeList object, ngunit maaari ding ma-index ng mga value ng id at name attributes.

Tinutukoy din ng HTMLDocument object ang magkasingkahulugan na mga pag-embed at plugin, na mga koleksyon ng mga elemento ng HTMLCollection. Ang ari-arian ng mga anchor ay hindi karaniwan, ngunit maaari itong magamit upang ma-access ang mga elemento , na may katangian ng pangalan ngunit walang katangian ng href. Ang katangian ng mga script ay tinukoy ng pamantayan ng HTML5 at isang koleksyon ng mga elemento ng HTMLCollection.

Bilang karagdagan, ang HTMLDocument object ay tumutukoy sa dalawang katangian, ang bawat isa ay tumutukoy hindi sa isang koleksyon, ngunit sa isang solong elemento. Ang document.body property ay kumakatawan sa HTML document element, at ang document.head property ay kumakatawan sa . Ang mga pag-aari na ito ay palaging tinukoy sa dokumento: kahit na ang pinagmulang dokumento ay walang mga elemento at mga elemento, ang browser ay gagawa ng mga ito nang tahasan. Ang documentElement property ng isang Document object ay tumutukoy sa root element ng dokumento. Sa mga HTML na dokumento ay palaging kinakatawan nito ang .

Pagpili ng mga elemento ayon sa klase ng CSS

Ang value ng HTML class attribute ay isang listahan ng zero o higit pang mga identifier, na pinaghihiwalay ng mga puwang. Binibigyang-daan ka nitong tukuyin ang mga hanay ng mga kaugnay na elemento ng dokumento: anumang mga elemento na may parehong identifier sa katangian ng klase ay bahagi ng parehong hanay. Ang klase ng salita ay nakalaan sa JavaScript, kaya ang client-side na JavaScript ay gumagamit ng className property upang iimbak ang halaga ng HTML class attribute.

Karaniwang ginagamit ang attribute ng klase kasabay ng CSS cascading style sheet para maglapat ng karaniwang istilo ng pag-render sa lahat ng miyembro ng isang set. Gayunpaman, bilang karagdagan, tinutukoy ng pamantayan ng HTML5 ang getElementsByClassName() na pamamaraan, na nagbibigay-daan sa iyong pumili ng maraming elemento ng dokumento batay sa mga identifier sa kanilang mga katangian ng klase.

Tulad ng getElementsByTagName() method, ang getElementsByClassName() method ay maaaring tawagin sa parehong HTML na dokumento at HTML elements, at nagbabalik ng live na NodeList object na naglalaman ng lahat ng descendants ng dokumento o elemento na tumutugma sa pamantayan sa paghahanap.

Ang getElementsByClassName() method ay tumatagal ng isang string argument, ngunit ang string mismo ay maaaring maglaman ng maraming identifier, na pinaghihiwalay ng mga puwang. Ang lahat ng elemento na ang mga attribute ng klase ay naglalaman ng lahat ng tinukoy na identifier ay ituturing na tugma. Ang pagkakasunud-sunod ng mga identifier ay hindi mahalaga. Tandaan na sa parehong katangian ng klase at argumento sa pamamaraang getElementsByClassName(), ang mga identifier ng klase ay pinaghihiwalay ng mga puwang sa halip na mga kuwit.

Nasa ibaba ang ilang halimbawa ng paggamit ng getElementsByClassName() na pamamaraan:

// Find all elements with class "warning" var warnings = document.getElementsByClassName("babala"); // Hanapin ang lahat ng mga inapo ng isang elemento na may mga identifier na "log" // na may mga klase na "error" at "fatal" var log = document.getElementById("log"); var fatal = log.getElementsByClassName("fatal error");

Pagpili ng Mga Elemento Gamit ang CSS Selectors

Ang CSS Cascading Style Sheets ay may napakalakas na syntactic construct na kilala bilang mga selector na nagbibigay-daan sa iyong ilarawan ang mga elemento o set ng mga elemento sa isang dokumento. Kasama ng pag-standardize ng mga tagapili ng CSS3, ang isa pang pamantayan ng W3C na kilala bilang Selectors API ay tumutukoy sa mga pamamaraan ng JavaScript para sa pagkuha ng mga elemento na tumutugma sa isang tinukoy na tagapili.

Ang susi sa API na ito ay ang querySelectorAll() method ng Document object. Ito ay nangangailangan ng isang string argument na may CSS selector at nagbabalik ng NodeList object na kumakatawan sa lahat ng elemento ng dokumento na tumutugma sa selector.

Bilang karagdagan sa querySelectorAll() na pamamaraan, ang object ng dokumento ay tumutukoy din sa isang querySelector() method, na katulad ng querySelectorAll() method maliban na ito ay nagbabalik lamang ng una (sa pagkakasunud-sunod ng dokumento) na tumutugmang elemento, o null kung walang tumutugmang mga elemento.

Ang dalawang pamamaraan na ito ay tinukoy din ng klase ng Elemento. Kapag tinawag sila sa isang elemento, hahanapin ang buong dokumento para sa isang tugma para sa ibinigay na tagapili, at pagkatapos ay sinasala ang resulta upang isama lamang ang mga inapo ng elementong ginamit. Ang diskarte na ito ay maaaring mukhang counterintuitive dahil nangangahulugan ito na ang selector string ay maaaring magsama ng mga ninuno ng elementong itinutugma.

Istraktura ng dokumento at pag-navigate sa dokumento

Pagkatapos pumili ng elemento ng dokumento, kung minsan ay kinakailangan na maghanap ng mga bahagi ng dokumento na may kaugnayan sa istruktura (magulang, kapatid, anak). Ang isang bagay na Dokumento ay maaaring isipin bilang isang puno ng mga bagay na Node. Ang uri ng Node ay tumutukoy sa mga katangian na nagbibigay-daan sa iyong mag-navigate sa gayong puno. May isa pang interface ng application para sa pag-navigate ng dokumento, tulad ng Element object tree.

Mga dokumento bilang mga node tree

Ang Document object, ang Element object nito, at ang Text object na kumakatawan sa mga fragment ng text sa dokumento ay lahat ng Node object. Ang klase ng Node ay tumutukoy sa mga sumusunod na mahahalagang katangian:

parentNode

Ang parent node ng node na ito, o null para sa mga node na walang parent, gaya ng Document.

childNodes

Isang nababasang bagay na tulad ng array (NodeList) na nagbibigay ng representasyon ng mga child node.

unang anak, huling anak

Ang una at huling child node, o null kung ang ibinigay na node ay walang child node.

susunodKapatid, datiKapatid

Susunod at naunang kapatid na node. Ang magkapatid na node ay dalawang node na may parehong magulang. Ang pagkakasunud-sunod kung saan lumitaw ang mga ito ay tumutugma sa pagkakasunud-sunod sa dokumento. Ang mga katangiang ito ay nagli-link ng mga node sa isang dobleng naka-link na listahan.

nodeType

Ang uri ng node na ito. Ang mga node ng uri ng Dokumento ay may halaga na 9 sa property na ito. Mga node ng uri ng Element - halaga 1. Mga node ng teksto ng uri ng Teksto - halaga 3. Mga node ng uri Mga Komento - halaga 8 at mga node ng uri ng DocumentFragment - halaga 11.

nodeValue

Text content ng Text at Comment node.

nodeName

Ang pangalan ng isang Element tag na may lahat ng character na na-convert sa uppercase.

Gamit ang mga katangiang ito ng klase ng Node, maaari mong i-reference ang pangalawang child node ng unang child node ng object ng Document, tulad ng ipinapakita sa ibaba:

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

Ipagpalagay natin na ang pinag-uusapang dokumento ay may sumusunod na anyo:

TestHello World!

Pagkatapos ay ang pangalawang child node ng unang child node ang magiging elemento. Sa property ng nodeType naglalaman ito ng value 1 at sa property na nodeName naglalaman ito ng value na "BODY".

Gayunpaman, pakitandaan na ang API na ito ay lubhang sensitibo sa mga pagbabago sa teksto ng dokumento. Halimbawa, kung nagdagdag ka ng isang line feed sa pagitan ng mga at tag sa dokumentong ito, ang line feed na character na iyon ay magiging unang child node (Text node) ng unang child node, at ang pangalawang child node ay magiging elemento, hindi .

Mga dokumento bilang mga puno ng elemento

Kapag ang pangunahing interes ay ang mga elemento ng dokumento mismo, sa halip na ang teksto sa loob ng mga ito (at ang puting espasyo sa pagitan ng mga ito), mas maginhawang gumamit ng interface ng application na nagbibigay-daan sa iyo upang bigyang-kahulugan ang dokumento bilang isang puno ng mga bagay na Elemento, hindi papansinin ang mga node ng Teksto at Komento na bahagi rin ng dokumento.

Ang unang bahagi ng interface ng application na ito ay ang child property ng Element objects. Tulad ng childNodes property, ang value nito ay isang NodeList object. Gayunpaman, hindi tulad ng childNodes property, ang listahan ng mga bata ay naglalaman lamang ng mga Element object.

Tandaan na ang Text at Comment node ay walang child node. Nangangahulugan ito na ang property na Node.parentNode na inilarawan sa itaas ay hindi kailanman nagbabalik ng mga node na may uri ng Text o Comment. Ang halaga ng parentNode property ng anumang Element object ay palaging magiging isa pang Element object o ang ugat ng tree - isang Document o DocumentFragment object.

Ang pangalawang bahagi ng interface ng application para sa pag-navigate sa mga elemento ng dokumento ay ang mga katangian ng object ng Element, katulad ng mga katangian para sa pag-access ng mga node ng bata at kapatid ng object ng Node:

firstElementChild, lastElementChild

Katulad ng firstChild at lastChild properties, ngunit ibalik ang child elements.

nextElementSibling, previousElementSibling

Katulad ng nextSibling at previousSibling properties, pero ibalik ang sibling elements.

childElementCount

Bilang ng mga elemento ng bata. Ibinabalik ang parehong halaga ng mga child.length property.

Ang mga katangian ng pag-access ng elemento ng bata at kapatid na ito ay na-standardize at ipinapatupad sa lahat ng kasalukuyang browser maliban sa IE.

Sa araling ito, titingnan natin kung ano ang DOM, bakit ito kailangan, at kung paano ito binuo.

Ano ang DOM?

Kapag humiling ang isang browser ng page at natanggap ang source HTML code nito bilang tugon mula sa server, dapat muna itong i-parse. Sa proseso ng pagsusuri at pag-parse ng HTML code, ang browser ay bumubuo ng isang DOM tree batay dito.

Pagkatapos makumpleto ang pagkilos na ito at ang ilang iba pa, magsisimulang i-render ng browser ang pahina. Sa prosesong ito, siya, siyempre, ay gumagamit na ng DOM tree na kanyang nilikha, at hindi ang orihinal na HTML code.

Ang DOM ay isang modelo ng object object na nilikha ng browser sa memorya ng computer batay sa HTML code na natatanggap nito mula sa server.

Sa madaling salita, ang HTML code ay ang teksto ng isang pahina, at ang DOM ay isang hanay ng mga kaugnay na bagay na nilikha ng browser kapag nag-parse ng teksto nito.

Sa Chrome, ang source code ng page na natatanggap ng browser ay maaaring tingnan sa tab na "Source" sa panel na "Web Developer Tools."

Walang tool ang Chrome kung saan maaari mong tingnan ang DOM tree na ginagawa nito. Ngunit mayroong isang representasyon ng puno ng DOM na ito sa anyo ng HTML code, magagamit ito sa tab na "Mga Elemento". Ang representasyon ng DOM na ito, siyempre, ay mas maginhawa para sa isang web developer na magtrabaho kasama. Samakatuwid, walang tool na kumakatawan sa DOM bilang isang istraktura ng puno.

Ang mga bagay sa modelong ito ay nabuo mula sa halos lahat ng nasa HTML (mga tag, nilalaman ng teksto, komento, atbp.), kabilang ang mismong dokumento. Ang mga ugnayan sa pagitan ng mga bagay na ito sa modelo ay nabuo batay sa kung paano nakaposisyon ang mga elemento ng HTML na may kaugnayan sa isa't isa sa code.

Sa kasong ito, ang DOM ng dokumento pagkatapos ng pagbuo nito ay maaaring baguhin. Kapag nagbago ang DOM, halos agad na ire-redraw ng browser ang larawan ng pahina. Bilang resulta, ang aming pag-render ng pahina ay palaging tumutugma sa DOM.

Upang basahin at baguhin ang DOM sa programmatically, ang browser ay nagbibigay sa amin ng isang DOM API o, sa madaling salita, isang programming interface. Sa madaling salita, ang DOM API ay isang koleksyon ng isang malaking bilang ng iba't ibang mga bagay, ang kanilang mga katangian at pamamaraan na magagamit namin upang basahin at baguhin ang DOM.

Upang gumana sa DOM, ginagamit ang JavaScript sa karamihan ng mga kaso, dahil... Ngayon ito ay ang tanging programming language kung saan ang mga script ay maaaring isagawa sa isang browser.

Bakit natin kailangan ang DOM API?

Ang DOM API ay nagbibigay sa amin (mga developer) ng isang malaking bilang ng mga pamamaraan kung saan maaari naming baguhin ang lahat sa pahina, pati na rin makipag-ugnayan sa user. Yung. binibigyang-daan kami ng interface ng software na ito na lumikha ng mga kumplikadong interface, mga form, magproseso ng mga aksyon ng user, magdagdag at mag-alis ng iba't ibang elemento sa page, baguhin ang kanilang mga nilalaman, katangian (mga katangian), at marami pang iba.

Sa ngayon, halos walang mga site sa web na ang mga senaryo ay hindi gagana sa DOM.

Ano ang binubuo ng HTML code ng isang page?

Bago magpatuloy sa pag-aaral ng modelo ng object object, dapat mo munang tandaan kung ano ang source code ng isang web page (HTML document).

Ang source code ng isang web page ay binubuo ng mga tag, attribute, komento, at text. Ang mga tag ay ang pangunahing syntactic na konstruksyon ng HTML. Karamihan sa kanila ay ipinares. Sa kasong ito, ang isa sa kanila ay nagbubukas at ang isa ay nagsasara. Ang isang ganoong pares ng mga tag ay bumubuo ng isang HTML na elemento. Ang mga elemento ng HTML ay maaaring magkaroon ng mga karagdagang parameter - mga katangian.

Sa isang dokumento, upang lumikha ng ilang partikular na markup, ang ilang elemento ay matatagpuan sa loob ng iba. Bilang resulta, ang isang HTML na dokumento ay maaaring katawanin bilang isang hanay ng mga elemento ng HTML na naka-nest sa bawat isa.

Bilang halimbawa, isaalang-alang ang sumusunod na HTML code:

Pamagat ng pahina Pamagat ng artikulo Seksyon ng artikulo

Mga nilalaman ng artikulo

Sa code na ito, ang root element ay html. Naglalaman ito ng mga elemento ng ulo at katawan. Ang elemento ng ulo ay naglalaman ng isang pamagat, at ang katawan ay naglalaman ng isang h1 at isang div. Ang elemento ng div naman ay naglalaman ng h2 at p .

Ngayon tingnan natin kung paano bumuo ang browser ng DOM tree batay sa HTML code.

Paano nabuo ang puno ng DOM ng isang dokumento?

Gaya ng inilarawan sa itaas, ang browser ay bumubuo ng isang puno batay sa mga elemento ng HTML at iba pang mga entity ng source code ng pahina. Kapag isinasagawa ang prosesong ito, isinasaalang-alang ang nesting ng mga elemento sa loob ng bawat isa.

Bilang resulta, ginagamit ng browser ang nagresultang DOM tree hindi lamang sa trabaho nito, ngunit nagbibigay din sa amin ng API para sa maginhawang trabaho dito sa pamamagitan ng JavaScript.

Kapag gumagawa ng DOM, lumilikha ang browser ng mga bagay (DOM tree node) mula sa mga elemento ng HTML, text, komento at iba pang entity ng wikang ito.

Sa karamihan ng mga kaso, ang mga web developer ay interesado lamang sa mga bagay (node) na nabuo mula sa mga elemento ng HTML.

Kasabay nito, ang browser ay hindi lamang lumilikha ng mga bagay mula sa mga elemento ng HTML, ngunit ikinokonekta din ang mga ito sa isa't isa sa ilang partikular na koneksyon, depende sa kung paano nauugnay ang bawat isa sa kanila sa isa sa code.

Ang mga elemento na direktang nasa ilang elemento ay mga bata kaugnay nito. At siya ay isang magulang para sa bawat isa sa kanila. Bilang karagdagan, ang lahat ng mga elementong ito ay magkakapatid (kapatid na lalaki) na may kaugnayan sa bawat isa.

Bukod dito, sa HTML, ang anumang elemento ay palaging may isang magulang (ang HTML na elemento kung saan ito direktang matatagpuan). Sa HTML, hindi maaaring magkaroon ng maraming magulang ang isang elemento. Ang tanging pagbubukod ay ang elemento ng html. Wala siyang magulang.

Upang makakuha ng DOM tree habang binubuo ito ng browser, kailangan mo lang "ayusin" ang lahat ng elemento depende sa kanilang relasyon sa isa't isa.

Ang paglikha ng puno ng DOM ay ginagawa mula sa itaas hanggang sa ibaba.

Sa kasong ito, ang ugat ng puno ng DOM ay palaging ang mismong dokumento (ang node ng dokumento). Susunod, ang puno ay binuo depende sa istraktura ng HTML code.

Halimbawa, ang HTML code na tiningnan namin sa itaas ay magkakaroon ng sumusunod na DOM tree:

Sa pinakatuktok ng punong ito ay ang document node. Ang node na ito ay nauugnay sa html, ito ang anak nito. Ang html node ay nabuo ng html (...) na elemento. Ang head(...) at body(...) na mga node ay may kaugnayan sa magulang sa html. In relation to each other, magkapatid sila, kasi magkaroon ng isang magulang. Ang head node ay nauugnay sa pamagat (lt;title>...), ito ang anak nito. Ang mga h1 at div node ay nauugnay sa katawan , na kanilang magulang. Ang div node ay konektado sa h2(...) at p(), sila ang mga anak nito.

Nagsisimula ang puno, tulad ng nabanggit sa itaas, gamit ang object ng dokumento (node). Ito naman ay may isang child node na nabuo ng html (...) na elemento. Ang mga elemento ng ulo(...) at katawan(...) ay nasa html at samakatuwid ay mga anak nito. Susunod, ang head node ay ang magulang ng pamagat (lt;title>...). Ang mga elemento ng h1 at div ay nakapugad sa loob ng katawan, na nangangahulugang sila ay mga anak nito. Direktang naglalaman ang div ng mga elemento h2 (...) at p (). Nangangahulugan ito na ang div node para sa bawat isa sa kanila ay ang magulang.

Ganito kadaling bumuo ng DOM tree sa isang browser batay sa HTML code.

Bakit kailangan mong malaman kung paano binuo ang puno ng DOM?

Una, ito ay isang pag-unawa sa kapaligiran kung saan nais mong baguhin ang isang bagay. Pangalawa, karamihan sa mga aksyon kapag nagtatrabaho sa DOM ay bumaba sa paghahanap (pagpili) ng mga kinakailangang elemento. Nang hindi nalalaman kung paano nakabalangkas ang puno ng DOM at ang mga koneksyon sa pagitan ng mga node, magiging mahirap na makahanap ng isang partikular na elemento dito.

Mag-ehersisyo

Ang Document Object Model, o "DOM", ay isang programming interface para sa pag-access ng mga elemento ng mga web page. Sa pangkalahatan, ito ay isang page API na nagbibigay-daan sa iyong basahin at manipulahin ang nilalaman, istraktura, at mga istilo ng isang pahina. Alamin natin kung paano ito gumagana at kung paano ito gumagana.

Paano nabuo ang isang web page?

Ang proseso ng pagbabago ng orihinal na HTML na dokumento sa isang renderable, istilo at interactive na pahina ay tinatawag na "Critical Rendering Path". Bagama't ang prosesong ito ay maaaring hatiin sa ilang hakbang, gaya ng inilarawan ko sa Pag-unawa sa Pag-render ng Kritikal na Landas, ang mga hakbang na ito ay maaaring halos pagsama-samahin sa dalawang hakbang. Sa una, pina-parse ng browser ang dokumento para matukoy kung ano ang ipapakita sa page, at sa pangalawa, ginagawa ng browser ang pag-render.

Ang resulta ng unang yugto ay tinatawag na "render tree". Ang rendering tree ay isang representasyon ng mga elemento ng HTML na ire-render sa isang page at ang mga nauugnay na istilo nito. Upang mabuo ang punong ito, kailangan ng browser ng dalawang bagay:

CSSOM, na kumakatawan sa mga istilong nauugnay sa mga elemento

DOM, representasyon ng elemento

Ano ang binubuo ng DOM?

Ang DOM ay isang object na representasyon ng orihinal na HTML na dokumento. Ito ay may ilang mga pagkakaiba, tulad ng makikita natin sa ibaba, ngunit mahalagang ito ay isang pagtatangka na i-convert ang istraktura at nilalaman ng isang HTML na dokumento sa isang object model na maaaring magamit ng iba't ibang mga programa.

Ang istraktura ng mga bagay sa DOM ay kinakatawan ng tinatawag na "node tree". Ito ay tinatawag na gayon dahil maaari itong isipin bilang isang puno na may isang magulang na sumasanga sa ilang mga sanga ng bata, na ang bawat isa ay maaaring may mga dahon. Sa kasong ito, ang "elemento" ng magulang ay ang elemento ng ugat, ang "mga sanga" ng bata ay ang mga nested na elemento, at ang "mga dahon" ay ang mga nilalaman sa loob ng mga elemento.

Kunin natin ang HTML na dokumentong ito bilang isang halimbawa:

Ang aking unang web page Kumusta, mundo!

kamusta ka na?

Ang dokumentong ito ay maaaring katawanin bilang sumusunod na puno ng mga node:

html
- ulo
  - pamagat
    - Ang aking unang web page
- katawan
  - h1
    - Hello, mundo!
  - p
    - kamusta ka na?

Ano ang hindi DOM

Sa halimbawa sa itaas, lumalabas na ang DOM ay isang 1:1 na pagmamapa ng orihinal na HTML na dokumento. Gayunpaman, tulad ng sinabi ko dati, may mga pagkakaiba. Upang lubos na maunawaan kung ano ang DOM, kailangan nating tingnan kung ano ang hindi.

Ang DOM ay hindi isang kopya ng orihinal na HTML

Kahit na ang DOM ay nilikha mula sa isang HTML na dokumento, hindi ito palaging eksaktong pareho. Mayroong dalawang kaso kung saan maaaring mag-iba ang DOM sa source HTML.

1. Kapag naglalaman ang HTML ng mga error sa markup

Ang DOM ay ang interface para sa pag-access sa aktwal (iyon ay, nai-render na) na mga elemento ng isang HTML na dokumento. Sa panahon ng proseso ng paglikha ng DOM, maaaring itama ng browser mismo ang ilang mga error sa HTML code.

Isaalang-alang ang HTML na dokumentong ito bilang isang halimbawa:

Hello, mundo!

Ang dokumento ay kulang sa mga elemento at , na isang kinakailangan para sa HTML. Ngunit kung titingnan natin ang nagresultang puno ng DOM, makikita natin na naayos na ito:

html
- ulo
- katawan
  - Hello, mundo!
2. Kapag ang DOM ay binago ng Javascript code
Bilang karagdagan sa pagiging interface para sa pagtingin sa mga nilalaman ng isang HTML na dokumento, ang DOM mismo ay maaari ding baguhin.

Maaari kaming, halimbawa, lumikha ng mga karagdagang node para sa DOM gamit ang Javascript.
Var newParagraph = document.createElement("p"); var paragraphContent = document.createTextNode("Ako ay bago!");newParagraph.appendChild(paragraphContent);document.body.appendChild(newParagraph);
Babaguhin ng code na ito ang DOM, ngunit hindi lilitaw ang mga pagbabago sa HTML na dokumento.
Ang DOM ay hindi ang nakikita mo sa browser (i.e. ang rendering tree)
Sa viewport ng browser makikita mo ang rendering tree, na gaya ng sinabi ko ay kumbinasyon ng DOM at CSSOM. Ano ang naiiba sa DOM at sa render tree ay ang huli ay binubuo lamang ng kung ano ang ire-render sa screen.

Dahil ang render tree ay nauugnay lamang sa kung ano ang na-render, hindi nito kasama ang mga elemento na biswal na nakatago. Halimbawa, ang mga elementong may mga istilo na may display: wala .
Hello, mundo!
kamusta ka na?

Isasama ng DOM ang elemento
- html
  - ulo
  - katawan
    - h1
      - Hello, mundo!
    - p
      - kamusta ka na?
Gayunpaman, ang render tree, at samakatuwid ay kung ano ang nakikita sa viewport, ay hindi isasama sa elementong ito.
- html
  - katawan
    - h1
      - Hello, mundo!
Ang DOM ay hindi ang ipinapakita sa DevTools
Ang pagkakaibang ito ay bahagyang mas maliit dahil ang DevTools Element Inspector ay nagbibigay ng pinakamalapit na approximation sa DOM na mayroon kami sa browser. Gayunpaman, ang DevTools inspector ay naglalaman ng karagdagang impormasyon na wala sa DOM.

Ang pinakamagandang halimbawa nito ay ang CSS pseudo-elements. Ang mga pseudo element na ginawa gamit ang ::before at ::after ay bahagi ng CSSOM at rendering tree, ngunit hindi ito teknikal na bahagi ng DOM. Ito ay dahil ang DOM ay nilikha lamang mula sa orihinal na HTML na dokumento, hindi kasama ang mga istilong inilapat sa elemento.

Kahit na ang mga pseudo-element ay hindi bahagi ng DOM, ang mga ito ay nasa aming devtools element inspector.

Ipagpatuloy
Ang DOM ay ang interface sa HTML na dokumento. Ginagamit ito ng mga browser bilang unang hakbang sa pagtukoy kung ano ang ire-render sa viewport, at ng Javascript code upang baguhin ang nilalaman, istraktura, o istilo ng isang page.

Ang publikasyong ito ay nauuna sa isang serye ng mga artikulo tungkol sa mga alternatibong paraan upang gumana sa XML. "Alternatibong" dahil, bilang panuntunan, ang pagtatrabaho sa XML sa 1C ay limitado sa pag-parse ng xml gamit ang sequential reading - line-by-line na pag-parse ng text content. Ngunit may iba pang mga paraan.

Halimbawa, gamit ang XML query language na xPath o XSL na mga template ng pagbabago. Ang mga opsyon na ito ay tatalakayin sa mga susunod na artikulo. Ngunit lahat sila ay umaasa sa isang pangunahing representasyon ng DOM ng mga XML na dokumento. Kung ano ang DOM (modelo ng object ng dokumento) ay tatalakayin sa publikasyon.

Ang DOM ay batay sa representasyon ng isang dokumento ng anumang istraktura sa anyo ng isang puno ng mga node, ang bawat node (node) na kumakatawan sa isang elemento, isang katangian ng isang elemento, ang halaga ng teksto ng isang elemento, atbp. Ang koneksyon sa pagitan Ang mga node ay itinayo sa prinsipyo ng "magulang - mga subordinates". Ang ugat ng dokumento (DOM tree) ay walang magulang. Ang isang dead-end na elemento ay walang anak (ang mga nasabing elemento ay abstract na tinatawag na mga dahon ng puno). Kaya, ang DOM ay maaaring gawin hindi lamang para sa XML, ngunit para sa halos anumang structured na dokumento (HTML, XHTML). Kaya, halimbawa, ang browser ng user, na tumatanggap ng HTML code ng isang web page mula sa Internet, ay bumubuo ng DOM tree ng page na ito sa RAM ng computer ng user.

Ang DOM ay nagbubukas ng malawak na mga posibilidad para sa pagmamanipula ng data ng dokumento. Maaari kang lumikha ng mga bagong node, ipasok ang mga ito sa iba't ibang antas ng puno, kopyahin ang mga node, tanggalin ang mga node, maghanap ng mga node gamit ang iba't ibang mga parameter, at marami pa.

Ang modelo ng DOM ng isang XML na dokumento ay nakikita sa figure sa ibaba.

Anumang modernong programming language ay may kasamang mga tool (parser) para sa pagtatrabaho sa naturang puno. Ang pagtanggap ng string na nilalaman bilang input, ang XML parser ay bubuo ng isang puno ng mga node sa RAM at nagsasagawa ng mga manipulasyon sa data ng puno. Ang bentahe ng diskarteng ito sa line-by-line na pag-parse ay kitang-kita: sa isang query sa puno maaari mong piliin ang kinakailangang data nang hindi dumadaan sa buong dokumento sa linya sa pamamagitan ng linya, dahil ang RAM ay naglalaman ng kumpletong representasyon ng mga elemento kasama ang lahat ng mga relasyon.

Sa 1C platform, ang modelo ng DOM ay kinakatawan ng isang espesyal na object DocumentDOM, na kung saan ay binuo gamit ang BuilderDOM object at ang Read method nito. Ang input sa paraang ito ay karaniwang isang XML Reader o isang HTML Reader object, na direktang nagbabasa ng XML o HTML na text content mula sa mga file o nilo-load ito mula sa isang string. Well, pagkatapos ay mayroong isang bilang ng mga constructions na nagbibigay-daan sa iyo upang kunin ang data mula sa object model ng read document.

Sa lahat ng mga opsyon, ang pinaka-interesante sa aking pananaw ay ang opsyon No. 1 gamit ang CalculateXPathExpression na paraan. Ang susunod na artikulo ay iuukol sa kanya.

Mga kalamangan ng line-by-line na pag-parse: mas mababa ang pangangailangan para sa mga mapagkukunan. Mga disadvantages: tumatagal ng mahabang panahon upang makakuha ng data, kailangan mong basahin ang buong file sa pamamagitan ng linya, ang pagiging kumplikado ng code ng programa kapag nag-parse ng mga dokumento ng XML na may isang kumplikadong istraktura.

Ang bentahe ng sampling sa pamamagitan ng DOM: bilis ng data sampling, pagiging simple ng program code. Mga disadvantages: ang paghingi sa mga mapagkukunan at mga query sa DOM ay gumagamit ng RAM at kapangyarihan sa pagproseso.