Dokument objektový model dom. Čo je DOM a prečo je potrebný? DOM nie je kópiou pôvodného HTML

Téma je naozaj zložitá. Ale, ako sa hovorí, diabol nie je taký strašný, ako je namaľovaný. Tu dostávam ten najtvrdší oriešok: túto super úlohu „namaľovať to“ čo najstráviteľnejšie, no nie úplne primitívne. Zatiaľ všetky materiály, ktoré som čítal, majú tendenciu byť nezrozumiteľné alebo primitívne.

Čo je DOM

Skratka DOM znamená Objektový model dokumentu(model objektu dokumentu).

DOM je programovacie rozhranie na prístup k obsahu dokumentov HTML, XHTML a XML, teda k reprezentácii značiek a atribútov HTML, XHTML a XML, ako aj k CSS štýly vo forme programovacích objektov. S týmto modelom funguje JavaScript aj iné webové programovacie jazyky.

Trochu histórie

K dispozícii sú 4 úrovne DOM (0, 1, 2 a 3).

Úroveň 0 (1996) zahŕňala modely DOM, ktoré existovali pred úrovňou 1. Ide najmä o kolekcie: document.images, document.forms, document.layers a document.all. Tieto modely nie sú formálne špecifikácie DOM publikované W3C. Predstavujú skôr informácie o tom, čo existovalo pred začatím procesu štandardizácie.

Úroveň 1 (1997) zahŕňala aj zákl funkčnosť o spracovaní XML dokumentov: početné spôsoby práce s jednotlivými uzlami, práca s inštrukciami XML spracovanie atď.

Okrem toho DOM level 1 obsahuje množstvo špeciálnych rozhraní, ktoré dokážu spracovať jednotlivé HTML elementy. Môžete napríklad pracovať s HTML tabuľky, formuláre, výberové zoznamy atď.

DOM Level 2 (2002) pridal niekoľko nových funkcií.

Zatiaľ čo DOM Level 1 postrádal podporu pre menné priestory, DOM Level 2 rozhrania obsahujú metódy na správu menných priestorov spojených s požiadavkami na vytváranie a spracovanie XML dokumentov.

Okrem toho DOM úrovne 2 podporuje udalosti.

Úroveň 2 je aktuálna úroveň špecifikácie DOM, ale W3C odporúča niektoré časti špecifikácie úrovne 3.

DOM Level 3 je pracovný návrh špecifikácie, ktorý rozširuje funkčnosť DOM Level 2. Jednou z najdôležitejších vlastností tejto verzie špecifikácie je schopnosť pracovať s mnohými rozšíreniami DOM.

Čo znamená „softvérové ​​rozhranie“?

Anglické slovo interface možno preložiť ako „kontaktná oblasť“. Počítač, zhruba povedané, rozumie iba dvom veciam: prázdny bit a vyplnený bit. Jazyk, ktorým počítač „hovorí“, si možno predstaviť ako nekonečný reťazec núl a jednotiek, ktorý poskytuje nekonečné množstvo rôznych kombinácií.

Akýkoľvek programový kód je interpretáciou, zrozumiteľnou pre programátora, týchto „núl a jednotiek“, s ktorými počítač pracuje. Každý programovací jazyk je teda rozhraním človek-stroj.

Prehliadače fungujú rovnako ako ostatné počítačové aplikácie. Interpretujú HTML, XML, CSS kódy, JavaScript, PHP, Perl atď. na „nuly a jednotky“. Na riešenie tejto viacjazyčnosti je potrebná spoločná platforma. Táto platforma je DOM – špecifikácia, ktorá nezávisí od konkrétneho programovacieho jazyka alebo značky. Je to rozhranie, ktoré možno použiť v mnohých populárnych programovacích jazykoch spojených s tvorbou webových stránok a schopné porozumieť a interpretovať objekty DOM.

DOM a prehliadače

DOM a JavaScript

V JavaScripte je vrcholom hierarchického rebríčka objektov DOM, akýmsi „vodičom“ tohto rozhrania, objekt dokumentu a objekty DOM sa stávajú jeho vlastnosťami, vlastnosťami jeho vlastností atď. Nazývajú sa tiež uzly DOM.

uzly DOM

V DOM úrovne 2 je 12 typov uzlov. Každému typu uzla DOM je priradená konštanta s jedinečný názov. Väčšina uzlov je navrhnutá na prácu s XML. V zostave HTML - JavaScript, ktorú robíme, je možné použiť iba 5 typov. Ale aj táto „špička ľadovca“ je veľmi „rozširujúci sa strom“, ktorý sa nedá obsiahnuť v jednej alebo dvoch lekciách.

Úplná množina konštánt typu uzla definovaných v špecifikácii W3C DOM (uzly dostupné pre HTML - JavaScript sú zvýraznené modrou farbou):

Konštantné meno	Význam	Popis
Uzol.ELEMENT_NODE		Element Node (vracia koreňový element dokumentu, pre HTML dokumenty je to HTML element)
Uzol.ATTRIBUTE_NODE		Uzol atribútu (vracia atribút prvku dokumentu XML alebo HTML)
		Textový uzol (#text)
Node.CDATA_SECTION_NODE		Uzol sekcie CDATA (XML: alternatívna syntax na zobrazenie znakových údajov)
Uzol.ENTITY_REFERENCE_NODE
Uzol.ENTITY_NODE		Uzol oddielu
Uzol.PROCESSING_INSTRUCTION_NODE		Uzol smernice XML
Uzol.COMMENT_NODE		Uzol komentára
Uzol.DOCUMENT_NODE		Uzol dokumentu (základ pre prístup k obsahu dokumentu a vytváranie jeho komponentov)
Uzol.DOCUMENT_TYPE_NODE		Uzol typu dokumentu (vracia typ tohto dokumentu, t. j. hodnotu značky DOCTYPE)
Uzol.DOCUMENT_FRAGMENT_NODE		Uzol fragmentu dokumentu (extrahujte časť stromu dokumentu, vytvorte nový fragment dokumentu, vložte fragment ako detský prvok akýkoľvek uzol atď.)
Uzol.NOTATION_NODE		Uzol notácie*

* Zápisy sú názvy, ktoré identifikujú formát neanalyzovaných sekcií, formát prvkov, ktoré majú atribút zápisu, alebo aplikačný program, ktorému je smernica adresovaná. (Nie je to jasné? Ani ja si ešte nie som istý.)

Štruktúra dokumentu v DOM

Všetky objekty dokumentu sú uzly DOM. Pozrime sa na základný dokument:

< title>Hlavička DOM

Text odseku

Tu je diagram jeho stromu DOM:

Každý uzol môže mať dcérske uzly (v diagrame k nim vedú šípky). Objekt dokumentu - základ stromu dokumentu - je tiež uzlom, ale nemá nadradený uzol a má množstvo vlastností a metód, ktoré iné uzly nemajú. Má jeden podriadený uzol: prvok.

Prvok má dva podriadené uzly: a , pre ktoré sa všetky prvky v nich obsiahnuté stanú potomkami.

Pozor!

„Prvok“ a „značka“ nie sú synonymá. Značka je značka: - sú to dve rôzne značky. A prvok je objekt označený týmito značkami:

Text odseku

.

Prvky a

Vo vnútri obsahuje text. Toto sú ich podradené textové uzly. Prvok má tiež atribút: align="center" . Atribútové uzly sú tiež dcérskymi uzlami prvkov, ktoré ich obsahujú.

Pri práci s uzlami stromu DOM sa využívajú ich vlastnosti a metódy.

Niektoré vlastnosti uzlov

Malý úvod

Opakujem ešte raz: keď pristupujeme k prvkom stránky v skriptoch, máme do činenia nielen s jazykom Javascript, ale aj s rozhraním DOM, ktoré je v ňom zabudované. Niekedy si to musíte uvedomiť, niekedy môžete zabudnúť, „že hovoríme v próze“.

Niektoré vlastnosti a metódy z objektového modelu DOM sme už takto použili. Preto z času na čas poskytnem odkazy na predchádzajúce lekcie.

V tejto lekcii nepôjdeme „akademickou“ cestou, berúc do úvahy všetky vlastnosti všetkých uzlov vo všetkých prehliadačoch. Najprv sa zoznámime s najpraktickejšími a „bezkonfliktnými“ z nich.

Preto nezačneme, ako je zvykom, „hlavnými vlastnosťami“: nodeName a nodeValue.

tagName

Vráti reťazec obsahujúci názov značky prvku. Všetky hodnoty tagName obsahujú iba veľké písmená.

Syntax

element.tagName

Príklad

Testovanie vlastnosti tagName

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

Výsledok

Testovanie vlastnosti tagName

innerHTML

S touto vlastnosťou sme sa už stretli (pozri lekciu 10). A teraz chápeme, odkiaľ to prišlo: „z domova“.

Umožňuje prístup k obsahu prvku. Určuje nielen textový obsah, ale aj všetky značky HTML umiestnené vo vnútri prvku.

Táto vlastnosť neslúži len na čítanie, ale aj na zmenu obsahu.

Poznámka

V IE je innerHTML určený len na čítanie pre množstvo prvkov: toto sú všetky prvky tabuľky, s výnimkou a , ako aj a .

Vytvorili sme napríklad prázdnu tabuľku bez prvku a chceme ho programovo vložiť do cez innerHTML:

IE zobrazí " Neznáma chyba spustenie" a ostatné prehliadače vykonajú vloženie.

Zároveň, ak sa pýtame na existujúci obsah prvku , napríklad cez alert(document.getElementById("id").innerHTML) , potom to bude fungovať v IE.

Syntax

element.innerHTML = "priradený text"

Príklad

Testovanie vlastnosti innerHTML Odsek na vloženie // Táto funkcia prečíta text a vloží ho do daného odseku. funkcia testRead() ( document.getElementById( "cieľ").innerHTML = document.getElementById( "testInnerHTML").vnútornéHTML } // Táto funkcia zmení text daného odseku. funkcia testChange() ( document.getElementById( "cieľ").vnútornéHTML = "Prefarbenie a zmena textu" } // Táto funkcia vráti vlastnosť do pôvodnej polohy. function testReset() ( document.getElementById( "cieľ").vnútornéHTML = "Odsek na vloženie" }

Testovanie vlastnosti innerHTML

Odsek na vloženie

DOM sa často nazýva strom DOM, pretože pozostáva zo stromu objektov nazývaných uzly. Naučili ste sa, čo je to Document Object Model (DOM), ako pristupovať k objektu dokumentu a meniť jeho vlastnosti pomocou konzoly a aký je rozdiel medzi zdrojovým kódom HTML a DOM.

V tomto návode sa naučíte terminológiu HTML, ktorú potrebujete na prácu s JavaScriptom a DOM, dozviete sa, čo je DOM strom a uzly, a naučíte sa identifikovať najbežnejšie typy uzlov. Môžete tiež vytvoriť program JavaScript v konzole na interaktívnu úpravu DOM.

Terminológia HTML

Pre prácu s DOM je dôležité porozumieť pojmom HTML a JavaScript. Poďme sa rýchlo pozrieť na základné pojmy.

Pozrite sa na tento prvok HTML:

Domov

Obsahuje kotvu, ktorá je odkazom na index.html.

• a – tag
• href – atribút
• html – hodnota atribútu
• Domov – text.

Všetko medzi otváracou a uzatváracou značkou tvorí prvok HTML.

Vráťme sa k súboru index.html z predchádzajúcej príručky:

Učenie sa DOM


Objektový model dokumentu

Najjednoduchší spôsob prístupu k prvku pomocou JavaScriptu je atribút id. Pridajme vyššie uvedený odkaz do súboru index.html s id="nav".

...

Objektový model dokumentu
Domov

...

Načítajte (alebo obnovte) stránku v okne prehliadača a pozrite sa na DOM, aby ste zistili, či bol kód aktualizovaný.

Potom použite metódu getElementById() na prístup k celému prvku. V konzole zadajte nasledovné:

document.getElementById("nav");
Domov

Metóda getElementById() načíta celý prvok. Teraz namiesto toho, aby ste museli zadávať tento objekt a metódu zakaždým, keď potrebujete získať prístup k navigačnému odkazu, môžete prvok vložiť do premennej, aby ste s ním uľahčili prácu.

nech navLink = document.getElementById("nav");

Premenná navLink obsahuje kotvu. Tu môžete jednoducho zmeniť atribúty a hodnoty. Ak chcete napríklad zmeniť umiestnenie odkazu, zmeňte atribút href:

navLink.href = "https://www.wikipedia.org";

Text môžete zmeniť aj opätovným priradením vlastnosti textContent:

navLink.textContent = "Navigovať na Wikipédiu";

Ak teraz zobrazíte tento prvok v konzole alebo skontrolujete značku Elements, uvidíte, ako sa aktualizoval.

navLink;
Prejdite na Wikipédiu

Zmeny sa prejavia aj na frontende.

Obnovením stránky sa vrátia všetky pôvodné hodnoty.

V tomto bode by ste mali pochopiť, ako používať metódu dokumentu na prístup k prvku, ako priradiť prvok k premennej a ako zmeniť vlastnosti a hodnoty prvku.

Strom a uzly DOM

Všetky prvky v DOM sú definované ako uzly. Existuje mnoho typov uzlov, ale sú tri hlavné, s ktorými budete najčastejšie pracovať:

Uzol prvku

Textový uzol

Uzol komentára

Keď je prvok HTML prvkom v DOM, nazýva sa uzol prvku. Každý jednotlivý text mimo prvku je textový uzol a komentár HTML je uzol komentára. Okrem týchto troch typov uzlov je samotný objekt dokumentu uzlom dokumentu, ktorý je koreňovým uzlom všetkých ostatných uzlov.

DOM pozostáva zo stromovej štruktúry vnorených uzlov, často nazývaných DOM strom. Pravdepodobne viete, čo je rodokmeň – je to schematické znázornenie rodinných väzieb, ktoré tvoria rodičia, deti a najbližší príbuzní. Uzly v DOM sa tiež nazývajú rodič a dieťa na základe ich vzťahu k iným uzlom.

Vytvorte napríklad súbor nodes.html. pridajte doň textový uzol, ako aj uzly komentárov a prvkov.

Učenie o uzloch


Uzol prvku

Textový uzol.

Uzol prvku html je rodič. hlava a telo sú detské html uzly. telo obsahuje tri podriadené uzly a všetky sú na rovnakej úrovni – typ uzla neovplyvňuje úroveň vnorenia.

Poznámka: Pri práci s DOM generovaným HTML, odsadenie zdrojový kód HTML vytvára veľa prázdnych textových uzlov, ktoré nebudú viditeľné na karte DevTools Elements. Viac o tom na odkaze.

Definovanie typu uzla

Každý uzol v dokumente má typ, ku ktorému sa pristupuje prostredníctvom vlastnosti nodeType. Mozilla Developer Network má aktualizovaný zoznam všetkých konštánt typu uzla. Nižšie je uvedená tabuľka najbežnejších typov uzlov.

Na karte Prvky v Nástrojoch pre vývojárov si môžete všimnúť, že vždy, keď kliknete a zvýrazníte akýkoľvek riadok v DOM, zobrazí sa vedľa neho hodnota == $0. Toto je veľmi pohodlný spôsob prístup k aktuálne aktívnemu prvku.

V konzole node.html kliknite na prvý prvok v tele (h1).

Pomocou konzoly zistite typ vybraného uzla pomocou vlastnosti nodeType.

$0.nodeType;
1

Výberom prvku h1 uvidíte 1 ako výstup, ktorý odkazuje na ELEMENT_NODE. Urobte to isté s ostatnými uzlami a vrátia 3 a 8.

Keď viete, ako pristupovať k prvku, môžete vidieť typ uzla bez zvýraznenia prvkov v DOM.

document.body.nodeType;
1

Okrem nodeType môžete použiť aj vlastnosť nodeValue na získanie hodnoty textového alebo komentárového uzla a nodeName na získanie značky prvku.

Zmena DOM pomocou udalostí

Doteraz ste videli, ako zmeniť DOM v konzole a je známe, že takéto zmeny sú dočasné; pri každom obnovení stránky sa všetky zmeny stratia. V ste aktualizovali farbu pozadia stránky v konzole. Skúste skombinovať to, čo ste sa naučili v tomto návode, s tým, čo už viete, a vytvorte interaktívne tlačidlo, ktoré zmení farbu pozadia.

Vráťte sa do súboru index.html a pridajte prvok tlačidla s ID. Musíte tiež pridať odkaz na nový súbor v novom adresári js js/scripts.js.

Učenie sa DOM


Objektový model dokumentu
Zmeniť farbu pozadia

Udalosť v JavaScripte je akcia, ktorú používateľ vykoná. Používateľ prejde myšou na prvok, klikne naň alebo na konkrétny kláves na klávesnici – to všetko sú udalosti. V tomto konkrétnom prípade musí tlačidlo vykonať akciu, keď naň používateľ klikne. Ak to chcete urobiť, musíte pridať poslucháč udalostí. Vytvorte súbor scripts.js a uložte ho do nového adresára js. V súbore musíte definovať prvok tlačidla a priradiť ho k premennej.

Pomocou metódy addEventListener() bude tlačidlo počúvať kliknutia a vykonávať svoju funkciu po kliknutí.

...
button.addEventListener("click", () => (
// akcia prebehne tu
});

Vo vnútri funkcie je potrebné umiestniť kód z predchádzajúceho návodu na zmenu farby pozadia na fuchsiovú.

...

Takto vyzerá skript:

let button = document.getElementById("changeBackground");
button.addEventListener("click", () => (
document.body.style.backgroundColor = "fuchsiová";
});

Uložte a zatvorte súbor. Obnovte stránku index.html vo svojom prehliadači. Kliknite na nové tlačidlo a farba pozadia stránky sa zmení.

Značky: ,

innerHTML
var text = element.innerHTML;
element.innerHTML = "";
Priradenie nového innerHTML prepíše kód, aj keď je nová hodnota pripojená k aktuálnej hodnote (+=). Skripty pridané týmto spôsobom sa nevykonajú.

vonkajší HTML
Obsahuje celý prvok a nedá sa zmeniť. Technicky, zápis do tejto vlastnosti vytvára nový prvok, ktorá nahrádza starú. Odkazy na starý prvok v premenných sa nemenia.

údajov
textNode.data - obsah textových uzlov a komentárov

textObsah
element.textContent - text vo vnútri prvku bez značiek.
Existuje aj neštandardná vlastnosť s názvom innerText, ktorá má veľa spoločného s textContent.

Viditeľnosť prvku

skryté
prvok.skrytý = pravdivý
Skrytý atribút nie je podporovaný v IE11.

Atribúty

Väčšina štandardných atribútov v DOM sa stáva vlastnosťami objektu:
element.id = "id"
Pre neštandardné atribúty nie je vlastnosť vytvorená (nedefinovaná)

Môžete si vytvoriť svoje vlastné vlastnosti DOM:
element.myData = (meno:"John", priezvisko:"Smith");
a metódy:
element.myFunc = function())(upozorniť this.nodeName);
Funguje to, pretože uzly DOM sú bežné objekty JavaScriptu. Takéto neštandardné vlastnosti a metódy neovplyvňujú zobrazenie značky a sú viditeľné iba v JavaScripte.

Prístup k atribútom značiek:
element.hasAttribute(name)
element.getAttribute(name)
element.setAttribute(názov, hodnota)
element.removeAttribute(name)
element.attributes je pseudopole atribútov.

V atribútoch sa nerozlišujú veľké a malé písmená (html), zatiaľ čo vlastnosti nerozlišujú veľké a malé písmená (javaScript).
Hodnota atribútu je vždy reťazec.

Atribút: a.getAttribute("href") - zobrazuje presne to, čo je v HTML
Vlastnosť: a.href – môže sa líšiť od hodnoty atribútu
Najčastejšie vlastnosť závisí od atribútu, ale nie naopak. Zmena vlastnosti neovplyvní atribút.

Práca s triedami

Atribút class zodpovedá dvom vlastnostiam:
className - reťazec
classList — objekt

metódy objektu classList:
element.classList.contains("trieda") - kontroluje, či objekt obsahuje danú triedu
element.classList.add("trieda")
element.classList.remove("trieda")
element.classList.toggle("trieda")

classList je pseudopole, dá sa cez neho iterovať pre slučku.

dátové atribúty

Vlastné atribúty údajov sú dostupné nielen ako atribúty, ale aj prostredníctvom vlastnosti množiny údajov
data-about = "nejaká hodnota"
element.dataset.about

Poradie uzlov

rodič.obsahuje(dieťa) — pravda alebo nepravda
kontroluje, či je podriadený uzol vnorený do rodiča

nodeA.compareDocumentPosition(nodeB) – Poskytuje informácie o obsahu a relatívnom poradí prvkov. Návratová hodnota je bitová maska:

Pridávanie a odstraňovanie uzlov

var div = document.createElement("div")
document.createTextNode("text")

parent.appendChild(element) - prvok sa pridá na koniec rodiča
parent.insertBefore(element, nextSibling) - prvok sa pridá pred nextSibling
parent.insertBefore(element, parent.firstChild) - pridané na začiatok
parent.insertBefore(element, null) - bude fungovať ako appendChild
Všetky metódy vloženia vrátia vložený uzol.
Pri presúvaní prvku ho nemusíte najskôr odstrániť zo starého miesta, spôsob vloženia to urobí automaticky.

element.insertAdjacentHTML(where, html) - vloží ľubovoľný HTML kód kdekoľvek do dokumentu. Where určuje, kam sa má vložiť html vo vzťahu k prvku - beforeBegin, afterBegin, beforeEnd, afterEnd.
element.insertAdjacentElement(where, newElement)
element.insertAdjacentText(kde, text)
Posledné dve metódy nie sú podporované vo Firefoxe

node.append(...nodes) – vloží uzly na koniec uzla,
node.prepend(...nodes) – vloží uzly na začiatok node ,
node.after(...nodes) – vloží uzly za node node,
node.before(...nodes) – vloží uzly pred uzol uzla,
node.replaceWith(...nodes) – vloží uzly namiesto node .
tu uzly sú uzly alebo reťazce v ľubovoľnom množstve a kombináciách oddelené čiarkami.

var fragment = document.createDocumentFragment() - simuluje uzol DOM, ktorý po vložení do dokumentu zmizne a ostanú len jeho potomkovia. IN moderné prehliadače Neodporúčané.

element.cloneNode(true) - hlboká kópia prvku
element.cloneNode(false) - kópia bez podradených prvkov

parent.removeChild(element)
parent.replaceChild(newElement, element)
element.remove() - odstráni prvok priamo, bez odkazu na jeho rodiča.
Metódy vrátia vzdialený uzol

Keď otvoríte akýkoľvek dokument HTML, prehliadač najprv analyzuje jeho obsah a na základe tejto analýzy vytvorí objektový model dokumentu HTML alebo skrátene DOM.

DOM pozostáva z hierarchicky vnorených objektov nazývaných uzly. Každý uzol v štruktúre predstavuje jeden umiestnený na HTML stránku element.

Pomocou DOM môžete interagovať ( čítať, meniť, mazať) s obsahom HTML dokumentov zo skriptov.

Nižšie je uvedený kód pre HTML dokument a DOM, ktoré by prehliadač vytvoril na základe tohto kódu:

HTML DOM HTML DOM.

Ahojte všetci.

Všetky obdĺžniky zobrazené na obrázku sú objekty (alebo uzly). Uzly rôznych typov sú na obrázku označené rôznymi farbami.

Uzol Dokument je označený červenou farbou. Akýkoľvek prístup k DOM musí začínať prístupom k tomuto uzlu.

Elementárne uzly sú označené zelenou farbou. Pre každý HTML prvok Na stránke prehliadač vytvorí zodpovedajúci uzol prvku.

Obsah prvkov je uložený v textových uzloch. Textové uzly sú v našom diagrame označené modrou farbou.

Pre každý HTML atribút vytvorí sa atribútový uzol. Uzol atribútu je na diagrame označený ružovou farbou.

Poznámka: Pamätajte, že text je vždy uložený v textových uzloch a nie je vlastnosťou prvku. Tie. Ak chcete získať prístup k obsahu prvku HTML, musíte získať prístup k vlastnosti jeho textového uzla.

Vzťahy medzi uzlami

Uzly v štruktúre objektu sú navzájom prepojené. Existuje niekoľko špeciálnych výrazov na opis vzťahov medzi uzlami:

Nadradený uzol ( rodičovský uzol) - nadradeným uzlom vo vzťahu k predmetnému objektu je uzol, do ktorého je predmetný objekt vnorený. V našom diagrame vo vzťahu k uzlom a

je rodič. Pre uzol je nadradený uzol .

Zostupné uzly ( detský uzol) - podradený uzol vo vzťahu k predmetnému objektu je uzol, ktorý je vnorený do predmetného objektu. V našom diagrame vo vzťahu k uzlu a

Sú to potomkovia. Pre uzol je dieťa .

Súrodenecké uzly ( súrodenecký uzol) - uzly, ktoré sú na rovnakej úrovni vnorenia vo vzťahu k ich rodičovskému uzlu. V našom diagrame sú súrodenecké uzly a ,

Najvyšší uzol v DOM sa nazýva koreň. V našom diagrame je to koreň (keďže objekt dokumentu nie je súčasťou DOM).

Táto publikácia predchádza množstvu článkov o alternatívne spôsoby prácu s XML. „Alternatívne“, pretože práca s XML v 1C je spravidla obmedzená na analýzu xml pomocou sekvenčného čítania - analýzu obsahu textu po riadkoch. Ale sú aj iné spôsoby.

Napríklad pomocou XML dotazovacieho jazyka xPath alebo šablón transformácie XSL. O týchto možnostiach sa bude diskutovať v ďalších článkoch. Všetky sa však spoliehajú na základnú DOM reprezentáciu dokumentov XML. Čo je to DOM (model objektu dokumentu) sa bude diskutovať v publikácii.

DOM je založený na reprezentácii dokumentu ľubovoľnej štruktúry vo forme stromu uzlov, z ktorých každý uzol (node) predstavuje prvok, atribút prvku, textovú hodnotu prvku atď. uzly sú postavené na princípe „rodič - podriadení“. Koreň dokumentu (strom DOM) nemá žiadneho rodiča. Prvok slepej uličky nemá potomka (takéto prvky sa abstraktne nazývajú listy stromu). DOM teda možno vytvoriť nielen pre XML, ale prakticky pre akýkoľvek štruktúrovaný dokument (HTML, XHTML). Takže napríklad prehliadač používateľa, ktorý prijíma HTML kód webovej stránky z internetu, vytvorí strom DOM tejto stránky v pamäti RAM počítača používateľa.

DOM otvára široké možnosti pre manipuláciu s dátami dokumentov. Môžete vytvárať nové uzly, vkladať ich do rôznych úrovní stromu, kopírovať uzly, mazať uzly, hľadať uzly podľa rôzne parametre a oveľa viac.

model DOM XML dokument je jasne znázornené na obrázku nižšie.

akýkoľvek moderný jazyk programovanie zahŕňa nástroje (parsery) na prácu s takýmto stromom. Analyzátor XML prijímajúci obsah reťazca ako vstup, vytvára strom uzlov v pamäti RAM a vykonáva manipulácie s údajmi stromu. Výhoda tohto prístupu oproti analýze riadok po riadku je zrejmá: jedným dotazom do stromu môžete vybrať potrebné údaje bez toho, aby ste museli prechádzať celý dokument riadok po riadku, pretože RAM obsahuje kompletnú reprezentáciu prvkov so všetkými vzťahy.

V platforme 1C je zastúpený model DOM špeciálny objekt DocumentDOM, ktorý je zostavený pomocou objektu DOMBuilder a jeho metódy Read. Vstupom do tejto metódy je zvyčajne buď XML Reader alebo HTML Reader objekt, ktorý priamo číta textový obsah XML alebo HTML zo súborov alebo ho načítava z reťazca. Potom existuje množstvo konštrukcií, ktoré umožňujú extrahovať údaje z objektového modelu čítaného dokumentu.

Zo všetkých možností je z môjho pohľadu najzaujímavejšia možnosť č.1 pomocou metódy CalculateXPathExpression. Ďalší článok bude venovaný práve jemu.

Výhody analýzy riadok po riadku: potreba zdrojov je menšia. Nevýhody: získanie údajov trvá dlho, treba čítať celý súbor riadok po riadku, zložitosť programový kód pri analýze XML dokumentov so zložitou štruktúrou.

Výhoda vzorkovania cez DOM: rýchlosť vzorkovania dát, jednoduchosť programového kódu. Nevýhody: náročnosť na zdroje, vynaložené na výstavbu a dotazy na DOM RAM a spracovateľský výkon.