Kaj je drevo elementov dokumentov HTML. Strukturiranje podatkov z uporabo JavaScripta: Les. Izbira elementov po vrsti
mlajši). Vsi lesni elementi so potomci koren, in on je njihov prednik. V tem primeru so vsi elementi in besedila, ki tvorijo njihovo vsebino, so vozlišča Drevo dokumenta.
Vsak element tega drevesa se ujema z elementom HTML in ima torej oznako (-e), vsebino in niz atributov. Če želite iti na predmet objekta dokumenta, ostaja edini korak: poimenujete vse elemente drevesnih predmetov, njihovi atributi pa so dostopni za branje in spremembo iz skript in appletov. Posledično postane drevo Elementi dokumentov HTML dinamično nadzorovano; Poleg tega lahko vsak element z lahkoto dodamo nove lastnosti, poleg standardnih atributov HTML.
To je bil ta pristop, ki je temeljil na dinamičnem modelu ITML Microsoftovih opazovalcev, nato pa je bil sprejet kot osnova standardov W3C, imenovanega imena vzorec predmeta (Model ali dom dokumentov). Hkrati je W3C razširil koncept DOM na vse dokumente XML, saj je HTML DOM kot specializirani poseben primer z dodatnimi funkcijami. Tako je dom model HTML in XML dokumentov, ki so neodvisni od platforme in programskega jezika, ki določa:
- vmesniki in predmete, ki se uporabljajo za predložitev dokumenta in jih manipuliranja;
- semantika teh vmesnikov in predmetov, vključno z njihovimi atributi in reakcijami na dogodke;
- odnosi med temi vmesniki in predmeti.
Danes W3C standardizirani dom prvi in \u200b\u200bdrugi ravni (dom 1 in dom 2); V fazi dela projekta je dom 3. Te kratice oziroma imenujejo naslednje:
- Dom 1 opisuje osnovno predstavitev dokumentov XML in HTML v obliki drevesnih dreves;
- Dom 2 razširja osnovne vmesnike Dom 1 in jim doda podporo za dogodke in stile;
- Dom 3 opisuje prenos in sintaktično analizo dokumentov, kot tudi njihov prikaz in oblikovanje.
Glede na trenutno stanje stvari, menimo, da je tukaj le 2 (in dom 1, ki ga vsebuje). Dom 2 je sestavljen iz naslednjih skupin medsebojno povezanih vmesnikov:
- Osnovni vmesniki, ki določajo predstavitev katerega koli dokumenta XML v obliki drevesa;
- Pogled - vmesniki, ki opisujejo morebitni prikaz dokumenta;
- Dogodkov - vmesniki, ki določajo postopek za ustvarjanje in predelavo dogodkov;
- Stil - vmesniki, ki določajo uporabo stilov za tabele dokumentov;
- Traversal & Range - vmesniki, ki določajo prehod drevesa dokumentov in manipulirajo področja njegove vsebine;
- HTML - vmesniki, ki določajo predstavitev dokumenta HTML v obliki drevesa.
Začnimo z opredelitvijo osnovnih vmesnikov, ki so podlaga za vse nadaljnje specifikacije.
4.2.2. Osnovni pojmi
Dom 2 Core predstavlja dokumente XML v obliki dreves, ki so sestavljeni iz vozlišč, ki so tudi objekti in izvajajo bolj specializirane vmesnike. Nekatere vrste vozlišč imajo lahko otroke, to je sama subttergati, drugi pa so listi, t.e. nimajo otrok. Naslednja tabela povzema vse možne vrste abstraktnih vozlišč dokumentov; Za vsako vrsto vozlišč so navedene tiste vozlišča, ki so lahko njeni otroci. Za koncepte, ki ustrezajo naštetih vozliščih, si oglejte opis strukture dokumenta XML.
| Interface. | Opis | Otroci |
|---|---|---|
| Dokument | Element (ne več kot eno), predelavo, komentar, dokumentType (ne več kot eno) | |
| Fragment dokumenta | Element, predelavo, komentar, besedilo, cdatazicija, entitetesference | |
| Dokument. | Vrsta dokumenta | otroci nimajo |
| Entitesference. | Povezava na razdelek | Element, predelavo, komentar, besedilo, cdatazicija, entitetesference |
| Element. | Element | Element, predelavo, komentar, besedilo, cdatazicija, entitetesference |
| Ard | Atribut. | Besedilo, entitesference. |
| Predelava. | Direktiva XML. | otroci nimajo |
| Komentar | Komentar | otroci nimajo |
| Besedilo. | Besedilo | otroci nimajo |
| CDatasiction. | Oddelek CDATA. | otroci nimajo |
| Entiteta. | Oddelek št | Element, predelavo, komentar, besedilo, cdatazicija, entitetesference |
| Oznaka. | Opomba | otroci nimajo |
Poleg tega je Core Dom 2 vsebuje specifikacijo noderlist vmesnika (naročeni seznami vozlišč, ki so na voljo na seznamu) in imenovanodemap (neurejene vozlišča, ki so na voljo v njihovem imenu). Ti predmeti so Živi, t.j. Vsaka sprememba dokumenta samodejno vključuje spremembo vseh povezanih seznamov.
Poudariti je treba, da jedro Dom 2 vsebuje dva sklopa vmesnikov, od katerih vsaka zagotavlja popoln dostop do vseh elementov dokumenta. Prvi SET predstavlja objektno usmerjen pristop z naslednjo dediščino dediščino: dokument je sestavni del svojih elementov - njihovi atributi in vsebino besedila. S tem pregledom drevesa dokumenta govorimo hierarhijski objekti. Drugi pristop je zgrajen na načelu "Vse obstajajo vozlišča (vozlišča)." Tukaj se vse komponente dokumenta štejejo za enaka vozlišča njegovega drevesa, in lahko govorimo hierarchy vozlišča. Dom 2 je tako po sebi redundanten, vendar nam zagotavlja priložnost, odvisno od naloge, upoštevajte dokument na tak ali drugačen način.
Vsi ALM 2 jedrni vmesniki so razdeljeni na glavno (temeljno) in dodatno (podaljšano). Glavni vmesniki,, vozlišče, vozlist, imenovanodemap, znakovnate, attr, element, besedilo in komentar so glavni. Te vmesnike morajo biti podprti z vsemi implementacijami DOM, tako za dokumente XML in HTML. Dodatne vmesnike so usmerjene v XML dokumente, tako da se izvajanje DOM za HTML ne podpira. Ti vključujejo CDatasiction, DocumentType, Opomba, Subjekt, EntitetReference in predelavo.
Za neodvisnost od jezika in platforme DOM, so naslednje vrste določajo:
Domstring. Besedilni niz, sestavljen iz znakov Unicode v formatu UTF-16. JavaScript in Java se izvajata s tip niza. DomTimestamp. Datum in čas v sprejemljivi obliki za določen jezik. Na primer, v JavaScriptu bo predmet Datum.In v Javi je celo število, ki vsebuje število milisekund.V nadaljevanju je kratek opis vseh DOM vmesnikov z navedbo nivoja modela (Dom 1 ali DOM 2), v katerem je to ali da je opredeljena lastnost vmesnika. Specifikacije W3C so napisane na jeziku IDL-neodvisnega jezika. Pripeljemo jih po sintaksu JavaScript, ki je danes glavni scenarij.
Skupaj z opisom standarda prinašamo kratek opis njegovega izvajanja v modelih Microsoft in Gecko. Upoštevati je treba, da je izvajanje Microsofta za XML in HTML popolnoma neodvisno (izvajajo se v skladu z XMLDOM in MSHTML komponentami programske opreme, medtem ko je v vzorcu predmeta Gecko enak za dokumente HTML in XML. Posledica naknadne predstavitve je podana z DOM za HTML; XML DOM bo podrobno obravnavana v delu VIII.
4.2.3. Izjeme: Domexception Interface
Objekt Domexception je prototip vseh izjemnih situacij, ki se lahko pojavijo med obdelavo dokumenta. Ima edino lastno vrsto kode. Številkaki vsebuje številko izjeme v skladu z naslednjo tabelo:
| Ime | Vrednost | Opis | Model. |
|---|---|---|---|
| Index_size_err. | 1 | Izhodni indeks, ki presega veljavno območje. | Dom 1. |
| Domstring_size_err. | 2 | Ni mogoče dati določenega besedila. | Dom 1. |
| Hierarchy_request_err. | 3 | Poskus vstavljanja vozlišča na nepravilno mesto drevesa. | Dom 1. |
| Napačno_document_err. | 4 | Neveljaven tip dokumenta. | Dom 1. |
| Invalid_Character_err. | 5 | Nahaja se nesprejemljiv simbol. | Dom 1. |
| No_data_allowed_err. | 6 | Vozlišče ne vsebuje podatkov. | Dom 1. |
| No_modification_allowed_err. | 7 | Poskus nesprejemljive spremembe objektov. | Dom 1. |
| NOT_FOUND_ERR. | 8 | Pritožbo na neobstoječega vozlišča. | Dom 1. |
| Not_supported_err. | 9 | Parameter ali delovanje se ne izvaja. | Dom 1. |
| Insuse_attribute_err. | 10 | Poskusite dodati atribut, ki že obstaja. | Dom 1. |
| Invalid_state_err. | 11 | Privlačnosti neobstoječega predmeta. | Dom 1. |
| Sintaksa_err. | 12 | Sintaksa napaka. | Dom 2. |
| Invalid_Modification_err. | 13 | Poskusite spremeniti vrsto predmeta. | Dom 2. |
| Namespace_err. | 14 | Poskus ustvarjanja ali urejanja predmeta, ki ne ustreza imenskega prostora XML. | Dom 2. |
| Invalid_Access_err. | 15 | Parameter ali delovanje ne podpira objekta. | Dom 2. |
4.2.4. Opis izvajanja: Vmesnik domimplement
Podpora: Samo dokument XML (XMLDOMimplementation). Se ujema z Dom 1.Vmesnik domov vsebuje metode, ki niso odvisne od specifičnega vzorca predmeta dokumenta. Na voljo je prek nepremičnine.
Metoda CREATECSSSSTYLESHEET.
Sintaksa : predmet.Createcsstylesheet (naslov, mediji) Argumente: Naslov, Media - Tip izraze Rezultat.: New Cssstylesheet Objekt Izjeme: SYNTAX_ERR. PodporaMetoda cREATECSSSTYLESheet. Ustvari nov objekt CSSstylesheet in vrne kazalec nanj. To metodo mora biti podprta le z izvedbami Doma, ki podpira CSS. Objekt je ustvarjen zunaj dokumentacije; Dom 2 vam ne omogoča preklapljanja na novo ustvarjenem slogu lista na dokument. Naslov argument nastavi naslov tabele slog in mediji je seznam prikaznih naprav prek vejice.
Metoda za ustvarjanje
Sintaksa : predmet.CreatEDocument (imespaceri, kvalificirano ime, doctype) Argumente: Namespaceri, kvalificirano ime - DOCTYPE Vrsta izraza - dokumentType tipa izraza Rezultat.: Novi predmet Izjeme: Invalid_Character_err, Namespace_err, Wrong_Document_err Podpora: Ne podpira. Ne podpira.Metoda urejeno Ustvari nov predmet in vrne kazalec nanj. Zasnovan je za ustvarjanje dokumentov XML in se ne sme podpreti za dokumente HTML. Namespaceriuri argument določa URI imena korenskega elementa dokumenta, Kvalificirano ime je njegovo omejeno ime in Doctype je vrsta, ki se ustvari (lahko nIČ).
Metoda, ki se je ustvarila
Sintaksa : predmet.CreatedocumentType (kvalificirano ime, publicID, SINISID) Argumente: Kvalificirano ime, publicID, SISTEMSID - Vrsta izraza Rezultat.: Novi dokumentType vozlišče Izjeme Podpora: Ne podpira. Ne podpira.Metoda cONTAILUCUMENTYPE. Ustvari prazno vozlišče tipa dokumentaType in vrne kazalec nanj. Namenjen je za dokumente XML in za dokumente HTML morda ne bodo podprti. Argument kvalificiranja določa omejeno ime vrste ustvarjenega dokumenta, PublicID je javni identifikator zunanje particije, sistem pa je identifikator sistema zunanje particije.
Metoda hasfeature.
Sintaksa : predmet.Asfeature (funkcija, različica) Argumente: Feature, različica - Vrsta izraza Rezultat.: Logična vrednost Izjeme: ne. PodporaMetoda hasfeature. Vrne prav.Če implementacija DOM podpira določeno lastnost in false. drugače. Ime lastnosti (v katerem koli registru) je nastavljen z argumentom funkcij; Upoštevati mora pravila za oblikovanje imena XML. Argument različice določa ime različice preverjene nepremičnine. Če ni določeno, se nato vrne prav.Če je podprta vsaj nekakšna različica tega premoženja.
V gecko so lahko vrednosti funkcij lahko "XML" in "HTML" strune, vrednost različice pa je "1.0" in "2.0". Primer:
Opozorilo (dokument.Implementation.hasfeature ("HTML", "1.0")); opozorilo (dokument.Implementation.hasfeature ("HTML", "2.0")); opozorilo (dokument.Implementation.hasfeature ("HTML", "3.0"));
Prvi dve operaterji opozarjanja bodo odstranili pravega niza in tretji napačen.
V Microsoft XMLDOM so lahko vrednosti funkcij "XML", "Dom" in "MS-Dom", in vrednost različice je "1.0". Primer:
Var objdoc \u003d nov ActivexObject ("Microsoft.XMLDOM"); Opozorilo (ObjDoc.Implementation.hasfeature ("XML", "1,0")); opozorilo (objdoc.implementation.hasfeature ("XML", "2,0"));
Upravljalec prvega opozorila bo prikazal pravi niz, in drugo napako.
4.2.5. Fragment dokumentov: Vmesnik za dokumente
Podpora: Samo XMLDOMDOCUMEMENT. Se ujema z Dom 1.Vmesnik za dokumente je potomec vmesnika vozlišča in podeduje vse njegove lastnosti in metode. Ker iz njegovega imena izhaja, je namenjeno operacijam fragmenti dokumentov (Izvlecite del drevesa dokumenta, ki ustvarja nov fragment dokumenta, ki vstavlja fragment kot sin katerega koli vozlišča itd.). Upoštevajte, da pri vstavitvi predmeta tipa dokumentara na vozlišče vozlišča, ki je sposobno imeti otroke, se vstavijo vsi otroci tega predmeta, ne pa tudi objekt. Za primere glejte Opis vmesnika vozlišča.
4.2.6. Dokument: Vmesnik dokumentov
Podpora: Podprto za dokumente XML (XMLDOMDOCUMENT); Za dokumente HTML je delno podprt. Dom 1 Popolnoma, Dom 2 delno.Vmesnik dokumentov se ujema z dokumentom XML ali HTML. To je osnova za dostop do vsebine dokumenta in ustvariti njegove komponente.
| Lastnina | Model. | Opis |
|---|---|---|
| Dom 1. | Ustvarja atribut. | |
| Dom 2. | Ustvari atribut na podlagi imenskega prostora. | |
| Dom 1. | Ustvarja oddelek CDATA. | |
| Dom 1. | Ustvari komentar. | |
| Dom 1. | Ustvarja nov fragment dokumenta. | |
| Dom 1. | Ustvarja nov element. | |
| Dom 2. | Ustvarja element ob upoštevanju imenskega prostora. | |
| Dom 1. | Ustvari povezavo do oddelka. | |
| Dom 2. | Ustvari nov predmet dogodka. | |
| Dom 1. | Ustvari direktivo. | |
| Dom 1. | Ustvari novo vozlišče. | |
| Dom 2. | Vrne element z določenim identifikatorjem. | |
| Dom 1. | Vrne zbirko vseh elementov, ki imajo to oznako. | |
| Dom 2. | Vrne zbirko vseh elementov, ki imajo to oznako ob upoštevanju imenskega prostora. | |
| Dom 2. | Uvozi vozlišče iz drugega dokumenta. |
Doctype nepremičnine
Sintaksa : dokument.Doctype. Spremenljivo: ne. PodporaLastnina dOCTYPE. Vrne vrsto tega dokumenta (tip dokumentaType). Za dokumente HTML in za dokumente XML, ki nimajo dokumentov, ki se vračajo nIČ.
Lastnost dokumentiranja
Sintaksa : dokument.Documentlement. Spremenljivo: ne. Podpora: Izpolnjuje standard. Skladen s standardom.Lastnina dokumentiranost Vrne korenski element tega dokumenta (tip elementa). Element se vrne za dokumente HTML HTML.. Primer: Operater.
Opozorilo (dokument.DocumentElement.Tagname);
prikaže niz HTML na zaslonu.
Izvajanje nepremičnin
Sintaksa : dokument.implementation Spremenljivo: ne. Podpora: Samo za dokumente XML. Se ujema z Dom 1.Lastnina izvajanje Vrne tipski predmet, ki opisuje ta implementacijski dom.
Stylesheets nepremičnine
Sintaksa : dokument.styslessheets. Spremenljivo: ne. Podpora: Samo za dokumente HTML. Skladen s standardom.Lastnina stylesheets. Vrne predmet tipa StylesheetList, ki ustreza seznamu zunanjih in notranjih stilov tabel. Ta lastnost podpirajo le te izvedbe Doma, ki podpirajo dinamične plošče.
Metoda CreateAttribute.
Sintaksa : dokument. Kreattribute (ime) Argumente: Ime - tip Expression Rezultat.: New Attr Izjeme: Invalid_Character_err. Podpora: Samo za dokumente XML. Skladen s standardom.Metoda cREATOATRIUBE. Ustvari nov predmet tipa in vrne kazalec nanj. Naslov ime nastavi ime atributa, ki nastane. Novi objekt, atribut Nodename ima ime, lokalni imenik, predpona in imespaceriri atributi so enaki nIČ. V prihodnje se lahko ustvari atribut dodeli kateri koli elementu, ki ga element.Tattributenode.
Primer ustvarjanja atributa za element HTML:
Var mydiv \u003d dokument.gethelementbyid ("iddiv"); VAR ATT \u003d dokument.createaTtribute ("temp"); attr.value \u003d "(! lang: začasno"; myDiv.setAttributeNode(attr); alert(myDiv.getAttribute("temp"));!}
Operater opozorila bo prikazal začasni niz.
Primer ustvarjanja atributa v Microsoft XMLDOM:
VAR XMLDOC \u003d nov ActiveXobject ("Microsoft.XMLDOM"); XMLDOC.ASYNC \u003d FALSE; xmldoc.load ("C: moje dokumente knjige.xml"); VAR root \u003d XMLDOC.Documentlement; VAR NEWATTR \u003d XMLDOC.Creattribute ("temp"); newattr.value \u003d "(! lang: začasno"; root.setAttributeNode(attr); alert(root.getAttribute("temp"));!}
Tukaj bo operater opozorila prikazal tudi začasni niz.
Metoda CREATTRIBUTS
Sintaksa : dokument.createatetributens (imespaceri, kvalificirano ime) Argumente: Namespaceri, QualifiedName - Vrsta izraza Rezultat.: New Attr Izjeme: Invalid_Character_err, imespace_err Podpora: Ne podpira. Ne podpira.Metoda ustvarjanjeIzutete. Ustvari nov predmet tipa in vrne kazalec nanj. Namenjen je za dokumente XML in za dokumente HTML morda ne bodo podprti. Argument Namespaceriuri določa IMESPARACE URI, Kvalificirano ime pa je omejeno ime atributa, ki nastane v tem imenskem prostoru. Ustvarjeni objekt Att ima naslednje atribute:
V prihodnje se lahko ustvari atribut dodeli kateri koli elementu, ki ga element.Tattributenode.
Metoda CREATECDATASICT
Sintaksa : dokument.Createcdatasiction (podatki) Argumente: Podatkovni izraz Rezultat.: Novi objekt CDATASIC Izjeme: Not_supported_err. Podpora: Izpolnjuje standard. Skladen s standardom.Metoda cREATCDATASICTION. Ustvari novo vrsto objekta CDATASICT in vrne kazalec nanj. Namenjen je samo za dokumente XML; Poskus, da ga pokličete v HTML DOM ustvari izjemo NOT_SUPPORTED_ERR. Argument podatkov določa ustvarjeno vsebino. Primer ustvarjanja razdelka CDATA v programu Microsoft XMLDOM:
VAR XMLDOC \u003d nov ActiveXobject ("Microsoft.XMLDOM"); XMLDOC.ASYNC \u003d FALSE; xmldoc.load ("C: moje dokumente knjige.xml"); VAR root \u003d XMLDOC.Documentlement; VAR Neewion \u003d XMLDOC.createcdataSection ("Zdravo svet!"); root.appendchild (meetion);
Ustvarjalna metoda
Sintaksa : dokument.Creattomet (podatki) Argumente: Podatkovni izraz Rezultat.: Novi komentar Objekt Izjeme: ne. Podpora: Samo za dokumente XML. Skladen s standardom.Metoda umetnost. Ustvari nov predmet tipa komentarja in vrne kazalec nanj. Argument podatkov določa vsebino nastalih pripomb. Primer ustvarjanja komentarjev v Gecko:
VAR root \u003d dokument.Documentlement.Firstchild; VAR COMM \u003d Dokument.creatment ("To je komentar."); root.appendchild (JOM);
Metoda CONTAILUCUMENT
Sintaksa : dokument.creatdocumentfragment () Rezultat.: Novi predmet Izjeme: ne. Podpora: Samo za dokumente XML. Skladen s standardom.Metoda urejenoComentFragment. Ustvari nov predmet praznega predmeta in vrne kazalec nanj. Primer ustvarjanja fragmenta dokumenta v Gecko:
VAR ELEM \u003d dokument.Documentlement.Firstchild; VAR O \u003d dokument.createDocumentFragment (); elem.appenddchild (o);
Metoda ustvarjanja
Sintaksa : dokument.Kreateement (tagname) Argumente: Tagname - tip Expression Rezultat.: Objekt novega elementa Izjeme: Invalid_Character_err. Podpora: Skladnost s standardom (glej pribl. 2). Skladen s standardom.Metoda ustvarjanje. Ustvari nov predmet vrste elementa in vrne kazalec nanj. Argument Tagname nastavi oznako nastanka elementa. Novi objekt, atribut NodeName ima vrednost Tagname, lokalni imenik, predpona in imespaceriuri atributi so enaki nIČ. Če ima objekt atribute s privzetimi vrednostmi, se ustrezna vozlišča samodejno ustvarijo in priključijo na element.
Opombe:
- Za XML so imena oznak elementov občutljiva na register. Za HTML se lahko navedejo v katerem koli registru, vendar se pri ustvarjanju elementa pretvorimo v velike črke.
- Poskusite ustvariti v Element Internet Explorer Okvir. ali Iframe. Premakne se bodisi na rahlo napako brskalnika, ali, vsaj za popolno uničenje drevesa objektov dokumenta.
| Vrsta vozlišča | Vedenje |
|---|---|
| Atribut_node. | Lastni atribut je enak nIČ, Določeno je enaka prav.. Vsi potomci izvornega vozlišča se rekurzivno kopirajo na novega vozlišča, ne glede na globoko. |
| Dokument_fragment_node. | Če je globoka enaka prav., potem je določen fragment dokumentov uvoz; V nasprotnem primeru se ustvari prazno vozlišče. |
| Dokument_node, dokument_type_node. | Ni mogoče uvoziti. |
| Element_node. | Vse vozlišče elementa se kopirajo vse atribute izvornega vozlišča, razen privzetega dokumenta, določenega v izvorni dokument. Privzeti atributi se nato ustvarijo v tem dokumentu za elemente s tem imenom. Če je globoka enaka prav., potem je uvoz vseh podprtih izvorni element. |
| Entity_node. | Subjekt dokumentType. |
| Entity_reference_node. | Samo sam vozlišče entitete se kopira, ne glede na globoko vrednost. Če je v našem dokumentu opredelitev dela s tem imenom, je vpisana v novo vozlišče. |
| Notar_node. | Označene vozlišča se lahko uvažajo, vendar v Dom 2, je cilj dokumentaType na voljo samo za branje, zato uvoz takih vozlišč nima smisla. |
| Predelava_instruction_node. | Kopirajte vrednosti atributov vozlišča TARGET in vira podatkov. |
| Besedilo_node, cdata_section_node, komentar_node | Kopirajte vrednosti atributov vozlišč za noge in dolžine. |
Pripravljen: Evgeny Ryzhkov Datum publikacije: 11/15/2010
Drevo dokumenta (Drevo dokumentov) je diagram gradnje dokumenta HTML, ki prikazuje povezave med različnimi elementi strani: naročilo in gnezdenje elementov. Ta shema pomaga pri navigaciji v tem, na prvi pogled, kaotične kash html tags.
Spletni razvijalec V drevo dokumenta pomaga pri pisanju pravil CSS in scenarijev JavaScript.
Opombe
Ni treba zamenjati drevesa dokumenta in model predmeta dokumenta (dom). Dom - koncept je bolj zapleten (napisan bo malo kasneje).
Da ne bi šli v dolge in dolgočasne razlage, zakaj drevo dokumentov, imenovanih drevo, razmislite o primer - vzemite preprosto HTML kodo:
Glavni naslov
besedilo odstavka.
- odstavek 1. \\ T
- točka 2.
Druga glava
Tako si oglejte HTML kodo brezposelnih Aborigine, ki so po naključju pritisnili pogled kode strani. Toda izvoljeno oko razvijalca ga bo razkrilo na policah, bo videli vse ravni gnezdenja in odnosov. To bo gradilo iz kaosa jasna hierarhična struktura v obliki drevesa (ker je shema podobna opisu drevesa):
Družinske vezi
Obstajajo določene povezave med elementi drevesa dokumentov. Razmislite o njih.
Predniki in potomci
Shematične podobe drevesa, in iz same kode HTML, je jasno, da so nekateri elementi vloženi v druge. Elementi, ki vsebujejo druge, so predniki (Prednik) v zvezi z vsemi vloženimi v njej. Investirala v zameno potomci (Predeljen).
Za jasnost upoštevajte eno vejo našega drevesa:
Vsak prednik ima lahko neomejeno število potomcev. Vsak potok bo imel število prednikov, odvisno od strukture drevesa in v kateri podružnici se nahaja, vendar bo v vsakem primeru vsaj en prednik.
Starši in hčere
Starš (Staršev) je neposredni prednik (prvi stopnji prednik) element. In obratno, takojšnje potomce (potomec prve stopnje) se imenuje hčerka (Otrok).
Vsak starš ima lahko neomejeno število hčerk. Otroški element bo imel samo enega starša.
Poklican je tudi matični element direct ANCE.in element otroka - neposredni potomci. To je nekaj podobnih semantičnih imen.
Elementi za nego
Sestrski elementi (brate in sestre) so skupina dveh ali več elementov, ki imajo skupni starš. Elementi ni treba biti ena vrsta, preprosto imajo skupni starš.
Povezani elementi
Povezani elementi (V bližini) je zdravstveni elementi, ki se nahajajo "sosednja vrata".
Prejšnja nega in naslednja zdravstvena nega
Vse je razvidno iz imen izrazov. Prehod Sibirska (predhodna brata) - prejšnji sestrski element v kodi. Na našem primeru veje za
- bo
- odstavek 1. \\ T
- točka 2.
Za
—
, in za Prejšnja nega ne bo.
Podobno naslednja zdravstvena nega (po branju): za
—
Za
—
- za
- - Ne.
Prejšnji in naslednjič
Prejšnji element (predhodnik) je isti prejšnji element v kodi, samo brez omejitev odnosov z negi. Za našo podružnico: Za
- bo
Za
—
za — .
V tem članku bi rad povedal, kakšno drevo dokumenta v HTML in kako so elementi povezani v njem.
V dokumentu HTML so številne oznake vložene v druge, na primer:
<
html>
<
head>
<
title> Približen naslov
<
body>
<
div class
=
”container”>
<
h1> Nekaj \u200b\u200bpomembnega
<
div class
=
”left”>
<
h2> Nekoliko manj pomembne informacije
<
p> Vsebina strani.
<
ul>
<
li> Odstavek 1. \\ T
<
li> Točka 2.
<
li> Točka 3.
Tako izgleda koda strani, vendar jo razvijalec ne vidi drugače. Ta kaotični niz znakov zaradi razumevanja strukture dokumenta je vgrajen v jasno opredeljeno shemo. Torej vidi, da sta glava in telo vgrajeni v html, in h2 p ul v div razredu \u003d "levo" in tako naprej.
Drevo dokumenta - shematsko predstavitev kode strani, ki odraža medsebojne odnose.
Po drugi strani pa so odvisno od narave odnosa spajanja elementov strani, so razdeljene na prednike in potomce, starše in hčere, negovalne elemente, in tako naprej.
Predniki in potomci
Kot je navedeno zgoraj, lahko element vključuje element v HTML kodi. Posledično se imenuje Oznaka, v kateri so druge oznake prednik (Prednik), in ti "drugi" se imenujejo potomci(Predeljen).
Število potomcev v prednikih ni omejeno. Število prednikov bo odvisno od lokacije elementa v strukturi dokumentov.
Starši in hčere
Poklican je prednik, ki ima prvo stopnjo gnezdenja starš (Starš) in potomstvo, ki ga vsebuje neposredno v njem hčerka(Otrok).
Število pomožnih elementov, ki jih vsebuje staršev, je neomejeno, vendar imajo hčerinske družbe le enega od staršev.
Starši in hčere se včasih imenujejo strani predniki in ravne potomci.
Razmislite o našem primeru
Vodja deluje kot starš in prednik za naslov, in deluje kot otrok element in potomca za glavo; H2, P, UL, LI, ki štrleče za DIV razred \u003d "Levo", hkrati, ko je LI potomca za UL in CIV razred \u003d "levo", in starš, ki ga Li Li, opravlja samo ul. To je glavna razlika med prednikom od staršev in hčerko iz potomec.
Elementi zdravstvene nege (brate in sestre)
Ti vključujejo odvisne družbe s skupnim staršem.
Oznake seryery so pomembne le prisotnost skupnega starša, vrsta predmeta pa je lahko drugačna, na primer:
h2, P, UL, so zdravstvena nega in pripadajo staršemu div razredu \u003d "levo", hkrati pa bodo vse LI sestre le pod staršev UL.
Sosednje (sosednje)
Oznake, ki stojijo v strukturi dokumentov v bližini in imajo en sam starš.
Torej, za naš primer, H2 sosednjih C P, UL sosednjih P, in P sosednja UL in H2 hkrati.
Prejšnja in naslednja zdravstvena nega
Tukaj je vse preprosto: naslednji element zdravstvene nege(Po branju) - v kodi gre takoj po oznaki, ki vas zanima, in ima skupni starš z njim, in prejšnja nega Predhodnim bratom) je oznaka pred našim in imajo tudi posameznika.
Prejšnji in naslednjič
Izjemno podoben na novo opisujejo, vendar obstajajo nianse - v tem primeru razpoložljivost skupnega starša ni pomembno za nas. Na primer, če ni nobene prejšnje nege oznake za H2, potem bo prejšnji (predhodna), bo DIV razred \u003d "levo", z naslednjim (predhodno) isto sliko.
Prvi in \u200b\u200bzadnji otrok
Prvi otrok. (Prvi otrok) je otrok, ki je prvi za svojega starša, zadnji otrok. (Zadnji otrok) - zadnja oznaka znotraj staršev.
Na primer, za DIV razred \u003d "Levo", bo prvi otrok H2, in UL štrleči kot slednje.
Korenski element
Štejejo se za oznako, ki nima nobenih prednikov niti staršev. Vključuje vse "veje" našega drevesa in se odpre na samem začetku dokumenta ( <
html>
) in zapre na samem koncu (
).
Povzetek
Razumevanje strukture drevesa elementov, kot tudi vse povezane povezave, bo pomagalo ne le enostavno in hitro navigacijo v kodo, in bo tudi olajšala izbiro izbranih oznak, ki jih potrebujete v CSS.
Drevo dokumenta (Drevo dokumentov) je diagram gradnje dokumenta HTML, ki prikazuje povezave med različnimi elementi strani: naročilo in gnezdenje elementov. Ta shema pomaga pri navigaciji v tem, na prvi pogled, kaotične kash html tags.
Spletni razvijalec V drevo dokumenta pomaga pri pisanju pravil CSS in scenarijev JavaScript.
Opombe
Ni treba zamenjati drevesa dokumenta in model predmeta dokumenta (dom). Dom - koncept je bolj zapleten (napisan bo malo kasneje).
Da ne bi šli v dolge in dolgočasne razlage, zakaj drevo dokumentov, imenovanih drevo, razmislite o primer - vzemite preprosto HTML kodo:
Shranjevanje strani.
Glavni naslov
besedilo odstavka.
Druga glava
Tako si oglejte HTML kodo brezposelnih Aborigine, ki so po naključju pritisnili pogled kode strani. Toda izvoljeno oko razvijalca ga bo razkrilo na policah, bo videli vse ravni gnezdenja in odnosov. To bo gradilo iz kaosa jasna hierarhična struktura v obliki drevesa (ker je shema podobna opisu drevesa):
Družinske vezi
Obstajajo določene povezave med elementi drevesa dokumentov. Razmislite o njih.
Predniki in potomci
Shematične podobe drevesa, in iz same kode HTML, je jasno, da so nekateri elementi vloženi v druge. Elementi, ki vsebujejo druge, so predniki (Prednik) v zvezi z vsemi vloženimi v njej. Investirala v zameno potomci (Predeljen).
Za jasnost upoštevajte eno vejo našega drevesa:
Vsak prednik ima lahko neomejeno število potomcev. Vsak potok bo imel število prednikov, odvisno od strukture drevesa in v kateri podružnici se nahaja, vendar bo v vsakem primeru vsaj en prednik.
Starši in hčere
Starš (Staršev) je neposredni prednik (prvi stopnji prednik) element. In obratno, takojšnje potomce (potomec prve stopnje) se imenuje hčerka (Otrok).
Vsak starš ima lahko neomejeno število hčerk. Otroški element bo imel samo enega starša.
Poklican je tudi matični element direct ANCE.in element otroka - neposredni potomci. To je nekaj podobnih semantičnih imen.
Elementi za nego
Sestrski elementi (brate in sestre) so skupina dveh ali več elementov, ki imajo skupni starš. Elementi ni treba biti ena vrsta, preprosto imajo skupni starš.
Povezani elementi
Povezani elementi (V bližini) je zdravstveni elementi, ki se nahajajo "sosednja vrata".
Prejšnja nega in naslednja zdravstvena nega
Vse je razvidno iz imen izrazov. Prehod Sibirska (predhodna brata) - prejšnji sestrski element v kodi. Na našem primeru veje za
bo Za
—
, in za Prejšnja nega ne bo.
Podobno naslednja zdravstvena nega (po branju): za
—
Za
—
za - Ne.
Prejšnji in naslednjič
Prejšnji element (predhodnik) je isti prejšnji element v kodi, samo brez omejitev odnosov z negi. Za našo podružnico: Za
bo Za
—
za — .
Podobno naslednji element (predhodna) nima omejitev odnosov z nego: za
—
Za
Prvi otrok in zadnji
Prvi otrok (prvi otrok) je prvi otroški element staršev v drevesu dokumentov, zadnji (zadnji otrok) pa je zadnji.
Korenski element
Korenski element (root) je prednik za vse prednike, to je "koren" našega drevesa dokumentov, to je edini element, ki nima staršev, je.
Delo z modelom DOM
Okno vsakega objekta ima lastnost. dokumentomenjeno predmet dokumenta. Ta predmet dokumenta ni avtonomni predmet. Gre za osrednji cilj obsežnega API, znan kot model objekta dokumenta (dom), ki opredeljuje vrstni red dostopa do vsebine dokumenta.
Pregled modela Doma
Objektni dokument (model objekta dokumenta, dom) - To je temeljni vmesnik aplikacijskega programa, ki omogoča delo z vsebino dokumentov HTML in XML. Uporabljeni programski vmesnik (API) Model Dom ni posebej zapleten, vendar obstaja veliko arhitekturnih funkcij, ki jih morate vedeti.
Najprej je treba razumeti, da so ugnezdeni elementi dokumentov HTML ali XML predstavljeni kot drevesa predmetov DOM. Drevo dokumenta HTML vsebuje vozlišča, ki predstavljajo elemente ali oznake, kot so
in In vozlišča, ki predstavljajo besedne strune. Dokument HTML lahko vsebuje tudi vozlišča, ki predstavljajo komentarje HTML. Razmislite o naslednjem preprostem dokumentu HTML:
Primer dokumenta
To je dokument HTML
Primer enostavno Besedilo.
Predstavitev Dom tega dokumenta je podana v naslednji diagramu:
Tisti, ki še niso seznanjeni z drevesnimi strukturami v računalniškem programiranju, je koristno vedeti, da je bila terminologija za njihov opis izposojena iz genealogičnih dreves. Vozlišče, ki se nahaja neposredno nad tem vozliščem, se imenuje staršev v zvezi s tem vozliščem. Vozlišča, ki se nahajajo za eno raven pod drugo vozliščem, so subvencionijo v zvezi s tem vozliščem. Vozlišča, ki so na isti ravni in imajo isti starš nega. Njegovi vozlišča, ki se nahajajo na katerem koli številu ravni pod drugim vozliščem, so njegovi potomci. Parentin, potovanj in vseh drugih vozlišč, ki se nahajajo nad tem vozliščem, so njegovi predniki.
Vsak pravokotnik na tem diagramu je vozlišče dokumenta, ki ga predstavlja objekt. Vozlišče.. Upoštevajte, da slika prikazuje tri različne vrste vozlišč. Koren drevesa je vozlišče dokumentov, ki predstavlja celoten dokument. Vozlišča, ki predstavljajo elemente HTML, so vozlišča tipa elementa in vozlišča, ki predstavljajo besedilo - besedilna vozlišča. Dokument, element in besedilo so podrazreda razreda vozlišča. Dokument in element sta dva najpomembnejša razreda v modelu DOM.
Tip vozlišča in njegovi podtipi tvorita hierarhijo tipa, prikazane na spodnji sliki. Bodite pozorni na formalne razlike med splošnimi vrstami dokumentov in elementov ter vrste htmldocument in htmlelement. Vrsta dokumenta predstavlja dokument HTML in XML, razred elementa pa predstavlja element tega dokumenta. HTMLDOCUMEMENT in HTMLELEMENT SUBLASSES sta posebej dokument HTML in njegovi elementi:
V tem diagramu je treba opozoriti tudi na prisotnost velikega števila podtipov razreda HTMlelement, ki predstavlja posebne vrste elementov HTML. Vsak od njih opredeljuje lastnosti JavaScripta, ki odraža atribute HTML določenega elementa ali skupine elementov. Nekateri od teh posebnih razredov določajo dodatne lastnosti ali metode, ki se ne odražajo v sintakse jezika označevanja HTML.
Izbira elementov dokumentov
Delo večine odjemalskih programov v jeziku JavaScript je nekako povezano z manipulacijskimi elementi dokumenta. Med izvajanjem lahko ti programi uporabljajo globalno spremenljivko dokumenta, ki se nanaša na predmet dokumenta. Za izvedbo kakršnih koli manipulacij z elementi dokumenta mora program nekako dobiti ali izbrati element predmetov, ki se nanašajo na te elemente dokumenta. Model DOM definira več načinov izbire elementov. Izberete lahko element ali elemente dokumenta:
z vrednostjo atributa ID;
z vrednostjo atributa imena;
z oznako;
z imenom razredov razreda ali CSS;
naključje z določenim izbirnikom CSS.
Vse te tehnike vzorčenja elementov so opisane v naslednjih pododdelkih.
Izbira elementov z ID-jem atributa
Vsi HTML elementi imajo atribute ID. Vrednost tega atributa mora biti edinstvena v dokumentu - št. Dva elementa v istem dokumentu morata imeti enake vrednosti atributov ID. Izberite element z edinstveno vrednostjo atributa ID-jev lahko uporabite metodo. getsementend () Objekt dokumenta:
VAR ODDELEK1 \u003d Dokument.gegelementbyid ("ODDELEK1");
To je najlažji in najpogostejši način za izbiro elementov. Če mora biti skript sposoben manipulirati z določenim nizom elementov dokumentov, nastavite vrednosti id atributov teh elementov in uporabite možnost iskanja teh vrednosti.
V različicah Internet Explorerja pod genementno metodo IE8 izvede Iskanje atributnih vrednosti vrednosti ID, ne da bi upoštevali register simbolov in poleg tega vrne elemente, v katerih bo tekma najdena z vrednostjo atributa imena.
Izbira vrednosti Atributa Ime
Ime HTML atribut je bil prvotno namenjen dodeljevanju imen na elemente obrazca, vrednost tega atributa pa je bila uporabljena, ko so bili podatki o obrazcu poslan na strežnik. Kot atribut ID, atribut imena dodeli ime izdelku. V nasprotju z ID-jem, vrednost atributa ime ni potrebna, da bi bila edinstvena: isto ime ima lahko več elementov naenkrat, kar je zelo običajno, ko se uporablja v obliki radiokonodarjev in zastav. Poleg tega je v nasprotju z ID-jem atribut imena dovoljeno samo v nekaterih elementih HTML, vključno z obrazci, elementi obrazcami in elementi
V tem članku bi rad povedal, kakšno drevo dokumenta v HTML in kako so elementi povezani v njem.
V dokumentu HTML so številne oznake vložene v druge, na primer:
< html> < head> < title> Približen naslov < body> < div class = ”container”> < h1> Nekaj \u200b\u200bpomembnega < div class = ”left”> < h2> Nekoliko manj pomembne informacije < p> Vsebina strani. < ul> < li> Odstavek 1. \\ T < li> Točka 2. < li> Točka 3.
Tako izgleda koda strani, vendar jo razvijalec ne vidi drugače. Ta kaotični niz znakov zaradi razumevanja strukture dokumenta je vgrajen v jasno opredeljeno shemo. Torej vidi, da sta glava in telo vgrajeni v html, in h2 p ul v div razredu \u003d "levo" in tako naprej.
Drevo dokumenta - shematsko predstavitev kode strani, ki odraža medsebojne odnose.
Po drugi strani pa so odvisno od narave odnosa spajanja elementov strani, so razdeljene na prednike in potomce, starše in hčere, negovalne elemente, in tako naprej.
Predniki in potomci
Kot je navedeno zgoraj, lahko element vključuje element v HTML kodi. Posledično se imenuje Oznaka, v kateri so druge oznake prednik (Prednik), in ti "drugi" se imenujejo potomci(Predeljen).
Število potomcev v prednikih ni omejeno. Število prednikov bo odvisno od lokacije elementa v strukturi dokumentov.
Starši in hčere
Poklican je prednik, ki ima prvo stopnjo gnezdenja starš (Starš) in potomstvo, ki ga vsebuje neposredno v njem hčerka(Otrok).
Število pomožnih elementov, ki jih vsebuje staršev, je neomejeno, vendar imajo hčerinske družbe le enega od staršev.
Starši in hčere se včasih imenujejo strani predniki in ravne potomci.
Razmislite o našem primeru
Vodja deluje kot starš in prednik za naslov, in deluje kot otrok element in potomca za glavo; H2, P, UL, LI, ki štrleče za DIV razred \u003d "Levo", hkrati, ko je LI potomca za UL in CIV razred \u003d "levo", in starš, ki ga Li Li, opravlja samo ul. To je glavna razlika med prednikom od staršev in hčerko iz potomec.
Elementi zdravstvene nege (brate in sestre)
Ti vključujejo odvisne družbe s skupnim staršem.
Oznake seryery so pomembne le prisotnost skupnega starša, vrsta predmeta pa je lahko drugačna, na primer:
h2, P, UL, so zdravstvena nega in pripadajo staršemu div razredu \u003d "levo", hkrati pa bodo vse LI sestre le pod staršev UL.
Sosednje (sosednje)
Oznake, ki stojijo v strukturi dokumentov v bližini in imajo en sam starš.
Torej, za naš primer, H2 sosednjih C P, UL sosednjih P, in P sosednja UL in H2 hkrati.
Prejšnja in naslednja zdravstvena nega
Tukaj je vse preprosto: naslednji element zdravstvene nege(Po branju) - v kodi gre takoj po oznaki, ki vas zanima, in ima skupni starš z njim, in prejšnja nega Predhodnim bratom) je oznaka pred našim in imajo tudi posameznika.
Prejšnji in naslednjič
Izjemno podoben na novo opisujejo, vendar obstajajo nianse - v tem primeru razpoložljivost skupnega starša ni pomembno za nas. Na primer, če ni nobene prejšnje nege oznake za H2, potem bo prejšnji (predhodna), bo DIV razred \u003d "levo", z naslednjim (predhodno) isto sliko.
Prvi in \u200b\u200bzadnji otrok
Prvi otrok. (Prvi otrok) je otrok, ki je prvi za svojega starša, zadnji otrok. (Zadnji otrok) - zadnja oznaka znotraj staršev.
Na primer, za DIV razred \u003d "Levo", bo prvi otrok H2, in UL štrleči kot slednje.
Korenski element
Štejejo se za oznako, ki nima nobenih prednikov niti staršev. Vključuje vse "veje" našega drevesa in se odpre na samem začetku dokumenta ( < html> ) in zapre na samem koncu ( ).
Povzetek
Razumevanje strukture drevesa elementov, kot tudi vse povezane povezave, bo pomagalo ne le enostavno in hitro navigacijo v kodo, in bo tudi olajšala izbiro izbranih oznak, ki jih potrebujete v CSS.
Drevo dokumenta (Drevo dokumentov) je diagram gradnje dokumenta HTML, ki prikazuje povezave med različnimi elementi strani: naročilo in gnezdenje elementov. Ta shema pomaga pri navigaciji v tem, na prvi pogled, kaotične kash html tags.
Spletni razvijalec V drevo dokumenta pomaga pri pisanju pravil CSS in scenarijev JavaScript.
Opombe
Ni treba zamenjati drevesa dokumenta in model predmeta dokumenta (dom). Dom - koncept je bolj zapleten (napisan bo malo kasneje).
Da ne bi šli v dolge in dolgočasne razlage, zakaj drevo dokumentov, imenovanih drevo, razmislite o primer - vzemite preprosto HTML kodo:
Glavni naslov
besedilo odstavka.
Druga glava
Tako si oglejte HTML kodo brezposelnih Aborigine, ki so po naključju pritisnili pogled kode strani. Toda izvoljeno oko razvijalca ga bo razkrilo na policah, bo videli vse ravni gnezdenja in odnosov. To bo gradilo iz kaosa jasna hierarhična struktura v obliki drevesa (ker je shema podobna opisu drevesa):
Družinske vezi
Obstajajo določene povezave med elementi drevesa dokumentov. Razmislite o njih.
Predniki in potomci
Shematične podobe drevesa, in iz same kode HTML, je jasno, da so nekateri elementi vloženi v druge. Elementi, ki vsebujejo druge, so predniki (Prednik) v zvezi z vsemi vloženimi v njej. Investirala v zameno potomci (Predeljen).
Za jasnost upoštevajte eno vejo našega drevesa:
Vsak prednik ima lahko neomejeno število potomcev. Vsak potok bo imel število prednikov, odvisno od strukture drevesa in v kateri podružnici se nahaja, vendar bo v vsakem primeru vsaj en prednik.
Starši in hčere
Starš (Staršev) je neposredni prednik (prvi stopnji prednik) element. In obratno, takojšnje potomce (potomec prve stopnje) se imenuje hčerka (Otrok).
Vsak starš ima lahko neomejeno število hčerk. Otroški element bo imel samo enega starša.
Poklican je tudi matični element direct ANCE.in element otroka - neposredni potomci. To je nekaj podobnih semantičnih imen.
Elementi za nego
Sestrski elementi (brate in sestre) so skupina dveh ali več elementov, ki imajo skupni starš. Elementi ni treba biti ena vrsta, preprosto imajo skupni starš.
Povezani elementi
Povezani elementi (V bližini) je zdravstveni elementi, ki se nahajajo "sosednja vrata".
Prejšnja nega in naslednja zdravstvena nega
Vse je razvidno iz imen izrazov. Prehod Sibirska (predhodna brata) - prejšnji sestrski element v kodi. Na našem primeru veje za
- bo
Za
—
, in za Prejšnja nega ne bo.
Podobno naslednja zdravstvena nega (po branju): za
—
Za
—
- za
- - Ne.
Prejšnji in naslednjič
Prejšnji element (predhodnik) je isti prejšnji element v kodi, samo brez omejitev odnosov z negi. Za našo podružnico: Za
- bo
Za
—
za — .
Podobno naslednji element (predhodna) nima omejitev odnosov z nego: za
—
Za
Prvi otrok in zadnji
Prvi otrok (prvi otrok) je prvi otroški element staršev v drevesu dokumentov, zadnji (zadnji otrok) pa je zadnji.
Korenski element
Korenski element (root) je prednik za vse prednike, to je "koren" našega drevesa dokumentov, to je edini element, ki nima staršev, je.
Delo z modelom DOM
Okno vsakega objekta ima lastnost. dokumentomenjeno predmet dokumenta. Ta predmet dokumenta ni avtonomni predmet. Gre za osrednji cilj obsežnega API, znan kot model objekta dokumenta (dom), ki opredeljuje vrstni red dostopa do vsebine dokumenta.
Pregled modela Doma
Objektni dokument (model objekta dokumenta, dom) - To je temeljni vmesnik aplikacijskega programa, ki omogoča delo z vsebino dokumentov HTML in XML. Uporabljeni programski vmesnik (API) Model Dom ni posebej zapleten, vendar obstaja veliko arhitekturnih funkcij, ki jih morate vedeti.
Najprej je treba razumeti, da so ugnezdeni elementi dokumentov HTML ali XML predstavljeni kot drevesa predmetov DOM. Drevo dokumenta HTML vsebuje vozlišča, ki predstavljajo elemente ali oznake, kot so
in In vozlišča, ki predstavljajo besedne strune. Dokument HTML lahko vsebuje tudi vozlišča, ki predstavljajo komentarje HTML. Razmislite o naslednjem preprostem dokumentu HTML:
Primer dokumenta
To je dokument HTML
Primer enostavno Besedilo.
Predstavitev Dom tega dokumenta je podana v naslednji diagramu:
Tisti, ki še niso seznanjeni z drevesnimi strukturami v računalniškem programiranju, je koristno vedeti, da je bila terminologija za njihov opis izposojena iz genealogičnih dreves. Vozlišče, ki se nahaja neposredno nad tem vozliščem, se imenuje staršev v zvezi s tem vozliščem. Vozlišča, ki se nahajajo za eno raven pod drugo vozliščem, so subvencionijo v zvezi s tem vozliščem. Vozlišča, ki so na isti ravni in imajo isti starš nega. Njegovi vozlišča, ki se nahajajo na katerem koli številu ravni pod drugim vozliščem, so njegovi potomci. Parentin, potovanj in vseh drugih vozlišč, ki se nahajajo nad tem vozliščem, so njegovi predniki.
Vsak pravokotnik na tem diagramu je vozlišče dokumenta, ki ga predstavlja objekt. Vozlišče.. Upoštevajte, da slika prikazuje tri različne vrste vozlišč. Koren drevesa je vozlišče dokumentov, ki predstavlja celoten dokument. Vozlišča, ki predstavljajo elemente HTML, so vozlišča tipa elementa in vozlišča, ki predstavljajo besedilo - besedilna vozlišča. Dokument, element in besedilo so podrazreda razreda vozlišča. Dokument in element sta dva najpomembnejša razreda v modelu DOM.
Tip vozlišča in njegovi podtipi tvorita hierarhijo tipa, prikazane na spodnji sliki. Bodite pozorni na formalne razlike med splošnimi vrstami dokumentov in elementov ter vrste htmldocument in htmlelement. Vrsta dokumenta predstavlja dokument HTML in XML, razred elementa pa predstavlja element tega dokumenta. HTMLDOCUMEMENT in HTMLELEMENT SUBLASSES sta posebej dokument HTML in njegovi elementi:
V tem diagramu je treba opozoriti tudi na prisotnost velikega števila podtipov razreda HTMlelement, ki predstavlja posebne vrste elementov HTML. Vsak od njih opredeljuje lastnosti JavaScripta, ki odraža atribute HTML določenega elementa ali skupine elementov. Nekateri od teh posebnih razredov določajo dodatne lastnosti ali metode, ki se ne odražajo v sintakse jezika označevanja HTML.
Izbira elementov dokumentov
Delo večine odjemalskih programov v jeziku JavaScript je nekako povezano z manipulacijskimi elementi dokumenta. Med izvajanjem lahko ti programi uporabljajo globalno spremenljivko dokumenta, ki se nanaša na predmet dokumenta. Za izvedbo kakršnih koli manipulacij z elementi dokumenta mora program nekako dobiti ali izbrati element predmetov, ki se nanašajo na te elemente dokumenta. Model DOM definira več načinov izbire elementov. Izberete lahko element ali elemente dokumenta:
z vrednostjo atributa ID;
z vrednostjo atributa imena;
z oznako;
z imenom razredov razreda ali CSS;
naključje z določenim izbirnikom CSS.
Vse te tehnike vzorčenja elementov so opisane v naslednjih pododdelkih.
Izbira elementov z ID-jem atributa
Vsi HTML elementi imajo atribute ID. Vrednost tega atributa mora biti edinstvena v dokumentu - št. Dva elementa v istem dokumentu morata imeti enake vrednosti atributov ID. Izberite element z edinstveno vrednostjo atributa ID-jev lahko uporabite metodo. getsementend () Objekt dokumenta:
VAR ODDELEK1 \u003d Dokument.gegelementbyid ("ODDELEK1");
To je najlažji in najpogostejši način za izbiro elementov. Če mora biti skript sposoben manipulirati z določenim nizom elementov dokumentov, nastavite vrednosti id atributov teh elementov in uporabite možnost iskanja teh vrednosti.
V različicah Internet Explorerja pod genementno metodo IE8 izvede Iskanje atributnih vrednosti vrednosti ID, ne da bi upoštevali register simbolov in poleg tega vrne elemente, v katerih bo tekma najdena z vrednostjo atributa imena.
Izbira vrednosti Atributa Ime
Ime HTML atribut je bil prvotno namenjen dodeljevanju imen na elemente obrazca, vrednost tega atributa pa je bila uporabljena, ko so bili podatki o obrazcu poslan na strežnik. Kot atribut ID, atribut imena dodeli ime izdelku. V nasprotju z ID-jem, vrednost atributa ime ni potrebna, da bi bila edinstvena: isto ime ima lahko več elementov naenkrat, kar je zelo običajno, ko se uporablja v obliki radiokonodarjev in zastav. Poleg tega je v nasprotju z ID-jem atribut imena dovoljeno samo v nekaterih elementih HTML, vključno z obrazci, elementi obrazcami in elementi
Podobno naslednji element (predhodna) nima omejitev odnosov z nego: za
—
Za
Prvi otrok in zadnji
Prvi otrok (prvi otrok) je prvi otroški element staršev v drevesu dokumentov, zadnji (zadnji otrok) pa je zadnji.
Korenski element
Korenski element (root) je prednik za vse prednike, to je "koren" našega drevesa dokumentov, to je edini element, ki nima staršev, je.
Delo z modelom DOM
Okno vsakega objekta ima lastnost. dokumentomenjeno predmet dokumenta. Ta predmet dokumenta ni avtonomni predmet. Gre za osrednji cilj obsežnega API, znan kot model objekta dokumenta (dom), ki opredeljuje vrstni red dostopa do vsebine dokumenta.
Pregled modela Doma
Objektni dokument (model objekta dokumenta, dom) - To je temeljni vmesnik aplikacijskega programa, ki omogoča delo z vsebino dokumentov HTML in XML. Uporabljeni programski vmesnik (API) Model Dom ni posebej zapleten, vendar obstaja veliko arhitekturnih funkcij, ki jih morate vedeti.
Najprej je treba razumeti, da so ugnezdeni elementi dokumentov HTML ali XML predstavljeni kot drevesa predmetov DOM. Drevo dokumenta HTML vsebuje vozlišča, ki predstavljajo elemente ali oznake, kot so
inIn vozlišča, ki predstavljajo besedne strune. Dokument HTML lahko vsebuje tudi vozlišča, ki predstavljajo komentarje HTML. Razmislite o naslednjem preprostem dokumentu HTML:
To je dokument HTML
Primer enostavno Besedilo.
Predstavitev Dom tega dokumenta je podana v naslednji diagramu:
Tisti, ki še niso seznanjeni z drevesnimi strukturami v računalniškem programiranju, je koristno vedeti, da je bila terminologija za njihov opis izposojena iz genealogičnih dreves. Vozlišče, ki se nahaja neposredno nad tem vozliščem, se imenuje staršev v zvezi s tem vozliščem. Vozlišča, ki se nahajajo za eno raven pod drugo vozliščem, so subvencionijo v zvezi s tem vozliščem. Vozlišča, ki so na isti ravni in imajo isti starš nega. Njegovi vozlišča, ki se nahajajo na katerem koli številu ravni pod drugim vozliščem, so njegovi potomci. Parentin, potovanj in vseh drugih vozlišč, ki se nahajajo nad tem vozliščem, so njegovi predniki.
Vsak pravokotnik na tem diagramu je vozlišče dokumenta, ki ga predstavlja objekt. Vozlišče.. Upoštevajte, da slika prikazuje tri različne vrste vozlišč. Koren drevesa je vozlišče dokumentov, ki predstavlja celoten dokument. Vozlišča, ki predstavljajo elemente HTML, so vozlišča tipa elementa in vozlišča, ki predstavljajo besedilo - besedilna vozlišča. Dokument, element in besedilo so podrazreda razreda vozlišča. Dokument in element sta dva najpomembnejša razreda v modelu DOM.
Tip vozlišča in njegovi podtipi tvorita hierarhijo tipa, prikazane na spodnji sliki. Bodite pozorni na formalne razlike med splošnimi vrstami dokumentov in elementov ter vrste htmldocument in htmlelement. Vrsta dokumenta predstavlja dokument HTML in XML, razred elementa pa predstavlja element tega dokumenta. HTMLDOCUMEMENT in HTMLELEMENT SUBLASSES sta posebej dokument HTML in njegovi elementi:
V tem diagramu je treba opozoriti tudi na prisotnost velikega števila podtipov razreda HTMlelement, ki predstavlja posebne vrste elementov HTML. Vsak od njih opredeljuje lastnosti JavaScripta, ki odraža atribute HTML določenega elementa ali skupine elementov. Nekateri od teh posebnih razredov določajo dodatne lastnosti ali metode, ki se ne odražajo v sintakse jezika označevanja HTML.
Izbira elementov dokumentov
Delo večine odjemalskih programov v jeziku JavaScript je nekako povezano z manipulacijskimi elementi dokumenta. Med izvajanjem lahko ti programi uporabljajo globalno spremenljivko dokumenta, ki se nanaša na predmet dokumenta. Za izvedbo kakršnih koli manipulacij z elementi dokumenta mora program nekako dobiti ali izbrati element predmetov, ki se nanašajo na te elemente dokumenta. Model DOM definira več načinov izbire elementov. Izberete lahko element ali elemente dokumenta:
z vrednostjo atributa ID;
z vrednostjo atributa imena;
z oznako;
z imenom razredov razreda ali CSS;
naključje z določenim izbirnikom CSS.
Vse te tehnike vzorčenja elementov so opisane v naslednjih pododdelkih.
Izbira elementov z ID-jem atributa
Vsi HTML elementi imajo atribute ID. Vrednost tega atributa mora biti edinstvena v dokumentu - št. Dva elementa v istem dokumentu morata imeti enake vrednosti atributov ID. Izberite element z edinstveno vrednostjo atributa ID-jev lahko uporabite metodo. getsementend () Objekt dokumenta:
VAR ODDELEK1 \u003d Dokument.gegelementbyid ("ODDELEK1");
To je najlažji in najpogostejši način za izbiro elementov. Če mora biti skript sposoben manipulirati z določenim nizom elementov dokumentov, nastavite vrednosti id atributov teh elementov in uporabite možnost iskanja teh vrednosti.
V različicah Internet Explorerja pod genementno metodo IE8 izvede Iskanje atributnih vrednosti vrednosti ID, ne da bi upoštevali register simbolov in poleg tega vrne elemente, v katerih bo tekma najdena z vrednostjo atributa imena.
Izbira vrednosti Atributa Ime
Ime HTML atribut je bil prvotno namenjen dodeljevanju imen na elemente obrazca, vrednost tega atributa pa je bila uporabljena, ko so bili podatki o obrazcu poslan na strežnik. Kot atribut ID, atribut imena dodeli ime izdelku. V nasprotju z ID-jem, vrednost atributa ime ni potrebna, da bi bila edinstvena: isto ime ima lahko več elementov naenkrat, kar je zelo običajno, ko se uporablja v obliki radiokonodarjev in zastav. Poleg tega je v nasprotju z ID-jem atribut imena dovoljeno samo v nekaterih elementih HTML, vključno z obrazci, elementi obrazcami in elementi