Dom primjeri. Uvod

Ovaj odeljak pruža kratak uvod u model objekta dokumenta (DOM) – šta je DOM, kako se obezbeđuju strukture HTML i XML dokumenata i kako sa njima komunicirati. Ovaj odjeljak sadrži osnovne informacije i primjere.

Šta je objektni model dokumenta (DOM)?

Model objekta dokumenta (DOM) je programski interfejs (API) za HTML i XML dokumente. DOM pruža strukturirani prikaz dokumenta i definira kako se toj strukturi mogu pristupiti programi koji mogu promijeniti sadržaj, stil i strukturu dokumenta. DOM pogled se sastoji od strukturirane grupe čvorova i objekata koji imaju svojstva i metode. U suštini, DOM povezuje web stranicu sa skript jezicima ili programskim jezicima.

Web stranica je dokument. Dokument se može prikazati iu prozoru pretraživača iu samom HTML kodu. U svakom slučaju, radi se o istom dokumentu. DOM pruža još jedan način za predstavljanje, skladištenje i manipulaciju ovim dokumentom. DOM u potpunosti podržava objektno orijentisanu reprezentaciju web stranice, što omogućava njenu modifikaciju koristeći skriptni jezik kao što je JavaScript.

Kako se pristupa DOM-u?

Ne morate raditi ništa posebno da biste manipulirali DOM-om. Različiti pretraživači imaju različite implementacije DOM-a, a ove implementacije pokazuju različite stepene usklađenosti sa stvarnim DOM standardom (tema u koju smo pokušali da izbjegnemo u ovoj dokumentaciji), ali svaki pretraživač koristi drugačiji DOM kako bi web stranice učinile interoperabilnim sa skriptnim jezicima.

Kreiranjem skripte pomoću elementa ili uključivanjem instrukcija na web stranicu za učitavanje skripte, možete odmah početi koristiti sučelje za programiranje aplikacije (API), koristeći elemente za interakciju sa samim dokumentom ili za dobivanje potomaka taj dokument, tj. razne elemente na stranici. Vaše DOM programiranje može biti nešto tako jednostavno kao što je ispis poruke koristeći objektnu funkciju ili koristiti složenije DOM metode koje stvaraju novi sadržaj, kao što je prikazano u sljedećem primjeru:

U sljedećem primjeru, JavaScript kod je definiran unutar elementa; ovaj kod postavlja funkciju kada se dokument učita (kada je cijeli DOM dostupan za korištenje). Ova funkcija kreira novi H1 element, dodaje tekst tom elementu, a zatim dodaje H1 stablu dokumenta:

< html > < head > < script >// pokreće ovu funkciju prilikom učitavanja prozora dokumenta. onload = function () ( // kreiranje nekoliko elemenata // u praznoj HTML stranici heading = document. createElement( "h1" ) ; heading_text = document. createTextNode( "Velika glava!" ) ; heading. appendChild( heading_text ) ; dokument body.appendChild(heading) ;)< body >Važni tipovi podataka

Ovaj odjeljak je namijenjen da ukratko opiše različite tipove i objekte na jednostavan i pristupačan način. Postoji niz različitih tipova podataka koji se koriste u API-ju na koje biste trebali obratiti pažnju. Radi jednostavnosti, primjer sintakse u ovom odjeljku obično se odnosi na čvorove kao element s, nizove čvorova kao na listu čvorova (ili jednostavno element s), a atribute čvora kao na jednostavno atribut s.

Ispod je tabela sa kratkim opisom ovih tipova podataka.

dokument	Kada član vrati objekt tipa dokument (na primjer, svojstvo ownerDocument elementa vraća dokument na koji se odnosi), taj objekt dokumenta je njegov vlastiti korijenski objekt. Referentni odjeljak DOM dokumenta opisuje objekt dokumenta. element
element	označava element ili čvor tipa element koji vraća član DOM API-ja. Umjesto da kažemo da metoda document.createElement() vraća referencu na čvor, jednostavno ćemo reći da ovaj element vraća element koji je jednostavno kreiran u DOM-u. Objekti elementa implementiraju sučelje DOM elementa, a također i opštije sučelje Node. Oba sučelja su uključena u ovu pomoć. nodeList
Lista čvorova	niz elemenata, poput onog koji vraća metoda Document.getElementsByTagName(). Specifičnim elementima u nizu se pristupa preko indeksa na dva načina: list.item(1) Ove metode su ekvivalentne. U prvoj metodi, item() je jedina metoda objekta NodeList. Potonji koristi normalnu sintaksu niza da dobije drugu vrijednost na listi.
atribut	Kada član API-ja vrati atribut (na primjer, metoda createAttribute()) to će biti referenca na objekt koji pruža poseban (iako mali) interfejs za atribute. Atributi su čvorovi u DOM-u, baš kao i elementi, iako ih rijetko možete koristiti na taj način.
namedNodeMap	namedNodeMap je sličan nizu, ali se elementima pristupa po imenu ili indeksu. Pristup po indeksu je samo radi pogodnosti listinga, jer Elementi nemaju određeni redosled na listi. Ovaj tip podataka ima metodu item() za ovu svrhu i također možete dodavati i uklanjati stavke iz namedNodeMap

DOM interfejsi

Ovo je vodič o objektima i stvarnim stvarima koje možete koristiti za manipuliranje DOM hijerarhijom. Postoji mnogo mjesta na kojima razumijevanje kako to funkcionira može biti iznenađujuće. Na primjer, objekt koji predstavlja HTML element obrasca preuzima svojstvo name iz sučelja HTMLFormElement i svojstvo className iz sučelja HTMLElement. U oba slučaja, svojstvo koje želite je u tom objektu forme.

Dodatno, odnos između objekata i interfejsa koje implementiraju u DOM može biti iznenađujući i ovaj odeljak pokušava da ispriča nešto o postojećim interfejsima u DOM-u i kako im se može pristupiti.

Interfejsi i objekti

Mnogi objekti implementiraju akcije iz više sučelja. Objekt tablice, na primjer, implementira poseban koji uključuje metode kao što su createCaption i insertRow. Ali pošto je ovo tabela, ona je i HTML element, tabela implementira interfejs Element, opisan u odeljku. Konačno, pošto je HTML element (u DOM smislu) čvor u stablu koji čini objektni model za HTML ili XML stranicu, element tabele takođe implementira opštiji interfejs čvora iz kojeg je element izveden.

Var table = document.getElementById("table"); var tableAttrs = table.attributes; // Interfejs čvor/element za (var i = 0; i< tableAttrs.length; i++) { // HTMLTableElement interface: border attribute if(tableAttrs[i].nodeName.toLowerCase() == "border") table.border = "1"; } // HTMLTableElement interface: summary attribute table.summary = "note: increased border";

Osnovna sučelja u DOM-u

Ovaj odjeljak navodi nekoliko najčešćih sučelja u DOM-u. Ideja nije da se opiše šta rade ove API metode, već da vam damo neka razmišljanja o vrstama metoda i svojstava koje ćete često videti kada koristite DOM. Ovi zajednički dijelovi API-ja se koriste u većini primjera u odjeljku na kraju ove pomoći.

Dokument, prozor su objekti čije interfejse često koristite u DOM programiranju. Jednostavnim rečima, objekat prozora predstavlja nešto poput pretraživača, a objekat dokumenta predstavlja koren samog dokumenta. Element nasljeđuje od zajedničkog Node interfejsa, a ova sučelja zajedno pružaju mnoge metode i svojstva koja se mogu primijeniti na pojedinačne elemente. Ovi elementi također mogu imati odvojena sučelja za rad s tipovima podataka koje ovi elementi sadrže, kao u primjeru objekta tablice u prethodnom slučaju.

Ispod je kratka lista uobičajenih članova API-ja koji se koriste u programiranju web i XML stranica koristeći DOM:

• parentNode.appendChild(čvor)

DOM API testiranje

Ovaj dokument sadrži primjere za svaki interfejs koji možete koristiti u svom razvoju. U nekim slučajevima, primjeri su punopravne web stranice s pristupom DOM-u u elementu, koji također navode elemente potrebne za pokretanje skripte na obrascu i HTML elemente na kojima će se izvoditi DOM operacije. Kada se to dogodi, možete jednostavno kopirati i zalijepiti primjer u novi HTML dokument, sačuvati ga i pokrenuti u svom pretraživaču.

Međutim, postoje slučajevi u kojima su primjeri sažetiji. Da biste pokrenuli primjere koji samo demonstriraju osnove interakcije sučelja sa HTML elementima, možete pripremiti probnu stranicu na kojoj ćete postaviti funkcije unutar skripti. Sljedeća vrlo jednostavna web stranica sadrži element zaglavlja gdje možete postaviti funkcije za testiranje sučelja. Stranica sadrži nekoliko elemenata s atributima koji se mogu vratiti, postaviti ili drugim riječima manipulirati i sadrži korisničko sučelje potrebno za pozivanje željenih funkcija iz pretraživača.

Možete koristiti ovu probnu stranicu ili sličnu da testirate DOM interfejse koji vas zanimaju i vidite kako oni rade u pretraživačima. Možete ažurirati sadržaj funkcije test() po potrebi, kreirati više dugmadi ili dodati elemente po potrebi.

< html > < head > < title >DOM testovi< script type = " application/javascript" >funkcija setBodyAttr (attr, vrijednost) (if (dokument. tijelo) eval ("document.body." + attr+ "="" + value+ """ ) ; inače nije podržano () ; )< body > < div style =" margin : .5 in; height : 400 ; " > < p > < b > < tt >tekst< form > < select onChange = " setBodyAttr(" text" , this.options.value);" > < option value = "crna" >crna< option value = "tamno plava" >tamno plava< p > < b > < tt >bgColor< select onChange = " setBodyAttr(" bgColor" , this.options.value);" > < option value = "bijela" >bijela< option value = "svijetlo siva" >siva< p > < b > < tt >veza< select onChange = " setBodyAttr(" link" , this.options.value);" > < option value = "plava" >plava< option value = "zeleno" >zeleno< small > < a href = " http://www.brownhen.com/dom_api_top.html" id = " sample" >(uzorak linka)< br > < form > < input type = " button" value = "verzija" onclick = " ver()" />

Da biste testirali mnogo sučelja na jednoj stranici, skup svojstava koja mijenjaju boje web stranice, možete kreirati sličnu web stranicu s cijelom „konzolom“ dugmadi, tekstualnih polja i drugih elemenata. Sljedeći snimak ekrana daje ideju o tome kako se interfejsi mogu grupirati radi testiranja

U ovom primjeru, padajući izbornik dinamički ažurira dijelove web stranice kojima se pristupa iz DOM-a (na primjer, boja pozadine, boja veze i boja teksta). Međutim, kada se razvijaju testne stranice, testiranje interfejsa, kao što ste čitali, važan je deo učenja kako da efikasno radite sa DOM-om.

Ova publikacija prethodi seriji članaka o alternativnim načinima rada sa XML-om. “Alternativa” jer je, po pravilu, rad sa XML-om u 1C ograničen na raščlanjivanje xml-a pomoću sekvencijalnog čitanja - raščlanjivanje tekstualnog sadržaja red po red. Ali postoje i drugi načini.

Na primjer, korištenjem XML jezika upita xPath ili XSL predložaka transformacije. Ove opcije će biti razmatrane u budućim člancima. Ali svi se oslanjaju na osnovnu DOM reprezentaciju XML dokumenata. Šta je DOM (model objekta dokumenta) biće reči u publikaciji.

DOM se zasniva na predstavljanju dokumenta bilo koje strukture u obliku stabla čvorova, čiji svaki čvor (čvor) predstavlja element, atribut elementa, tekstualnu vrijednost elementa, itd. Veza između čvorovi su izgrađeni po principu “roditelj – podređeni”. Korijen dokumenta (DOM stablo) nema roditelja. Element slijepe ulice nema dijete (takvi elementi se apstraktno nazivaju lišćem drveta). Dakle, DOM se može kreirati ne samo za XML, već za gotovo svaki strukturirani dokument (HTML, XHTML). Tako, na primjer, korisnikov pretraživač, primajući HTML kod web stranice sa Interneta, gradi DOM stablo ove stranice u RAM-u računara korisnika.

DOM otvara široke mogućnosti za manipulaciju podacima dokumenta. Možete kreirati nove čvorove, umetati ih na različite nivoe stabla, kopirati čvorove, brisati čvorove, tražiti čvorove koristeći različite parametre i još mnogo toga.

DOM model XML dokumenta je vizualizovan na slici ispod.

Svaki savremeni programski jezik uključuje alate (parsere) za rad sa takvim stablom. Primajući sadržaj niza kao ulaz, XML parser gradi stablo čvorova u RAM-u i vrši manipulacije sa podacima stabla. Prednost ovog pristupa u odnosu na raščlanjivanje red po red je očigledna: jednim upitom do stabla možete odabrati potrebne podatke bez prolaska kroz cijeli dokument red po red, jer RAM sadrži potpuni prikaz elemenata sa svim odnosima.

U 1C platformi, DOM model je predstavljen posebnim objektom DocumentDOM, koji je zauzvrat izgrađen pomoću objekta BuilderDOM i njegove Read metode. Ulaz za ovu metodu je obično ili XML Reader ili HTML Reader objekat, koji direktno čita XML ili HTML tekstualni sadržaj iz datoteka ili ga učitava iz stringa. Pa, onda postoji niz konstrukcija koje vam omogućavaju da izvučete podatke iz objektnog modela pročitanog dokumenta.

Od svih opcija, sa moje tačke gledišta, najzanimljivija je opcija br. 1 koja koristi metodu CalculateXPathExpression. Njemu će biti posvećen sljedeći članak.

Prednosti raščlanjivanja red po red: potreba za resursima je manja. Nedostaci: potrebno je puno vremena za dobivanje podataka, morate pročitati cijelu datoteku red po red, složenost programskog koda prilikom raščlanjivanja XML dokumenata sa složenom strukturom.

Prednost uzorkovanja kroz DOM: brzina uzorkovanja podataka, jednostavnost programskog koda. Nedostaci: zahtjevni resursi; izgradnja i upiti prema DOM-u troše RAM i procesorsku snagu.

Referenca sadrži opise svih svojstava i metoda standardno ugrađenih JavaScript objekata.

Objektni model dokumenta

Model objekta dokumenta (DOM) je interfejs za programiranje aplikacije (API) za XML koji je proširen da radi i sa HTML-om.

U DOM-u je sav sadržaj stranice (elementi i tekst) predstavljen kao hijerarhija čvorova. Uzmite u obzir sljedeći kod:

Jednostavna stranica

Zdravo svijete!

Ovaj kod se može predstaviti koristeći DOM kao hijerarhiju čvorova:

Predstavljajući dokument kao stablo čvorova, DOM API daje programerima potpunu kontrolu nad sadržajem i strukturom web stranice.

Kada se opisuje struktura stabla DOM-a, koristi se terminologija koja je posuđena iz porodičnih stabala.

Dakle, čvor koji se nalazi direktno iznad datog čvora naziva se roditelj ovog čvora. Čvorovi koji se nalaze jedan nivo ispod datog čvora nazivaju se potomci ovog čvora. Čvorovi koji su na istom nivou i imaju isti roditelj nazivaju se braća i sestre. Čvorovi koji se nalaze na bilo koji broj nivoa ispod datog čvora nazivaju se njegovim potomcima. Roditelj, baka i djed i bilo koji drugi čvorovi koji se nalaze na bilo kojem broju nivoa iznad datog čvora nazivaju se njegovim precima.

DOM referenca sadrži opise objekata Document, Element, Event i NodeList, uključujući opise njihovih metoda i svojstava:

BOM imenik

BOM (Browser Object Model preveden sa engleskog - Browser Object Model) omogućava pristup prozoru pretraživača i omogućava vam da manipulišete njime i njegovim elementima.

BOM-ovi omogućavaju pristup funkcionalnosti pretraživača nezavisno od sadržaja web stranice. Tema BOM-a je i zanimljiva i složena jer, zbog dugog odsustva specifikacije, dobavljači pretraživača su bili slobodni da prošire BOM kako im odgovara. Mnogi elementi koji su slični u svim pretraživačima postali su de facto standardi koji se i danas poštuju iz razloga međusobne kompatibilnosti. Da bi standardizovao ove fundamentalne aspekte JavaScripta, W3C je definisao osnovne elemente BOM-a u HTML5 specifikaciji.

Tema je zaista kompleksna. Ali, kako kažu, đavo nije tako strašan kao što je naslikan. Ovdje dobijam najtvrđi orah: ovaj super zadatak da ga "oslikam" što je moguće svarljivijim, ali ne sasvim primitivnim. Do sada su svi materijali koje sam pročitao obično ili zamućeni ili primitivni.

Šta je DOM

Skraćenica DOM je skraćenica za Model objekta dokumenta(model objekta dokumenta).

DOM je programsko sučelje za pristup sadržaju HTML, XHTML i XML dokumenata, odnosno predstavljanje HTML, XHTML i XML oznaka i atributa, kao i CSS stilova kao programskih objekata. I JavaScript i drugi web programski jezici rade sa ovim modelom.

Malo istorije

Postoje 4 DOM nivoa (0, 1, 2 i 3).

Nivo 0 (1996) uključivao je DOM modele koji su postojali prije Nivoa 1. To su uglavnom kolekcije: document.images, document.forms, document.layers i document.all. Ovi modeli nisu formalno DOM specifikacije koje je objavio W3C. Umjesto toga, oni predstavljaju informacije o tome šta je postojalo prije početka procesa standardizacije.

Nivo 1 (1997) je takođe uključivao osnovnu funkcionalnost za obradu XML dokumenata: brojne načine rada sa pojedinačnim čvorovima, rad sa uputstvima za obradu XML-a itd.

Pored toga, DOM nivo 1 sadrži niz posebnih interfejsa koji mogu da rukuju pojedinačnim HTML elementima. Na primjer, možete raditi sa HTML tabelama, obrascima, listama za odabir itd.

DOM Level 2 (2002) dodao je nekoliko novih mogućnosti.

Dok DOM Nivo 1 nije imao podršku za prostore imena, interfejsi DOM nivoa 2 sadrže metode za upravljanje imenskim prostorima povezanim sa zahtevima za sastavljanje i obradu XML dokumenata.

Osim toga, DOM nivo 2 podržava događaje.

Nivo 2 je trenutni nivo DOM specifikacije, ali W3C preporučuje neke delove specifikacije nivoa 3.

DOM Level 3 je radni nacrt specifikacije koji proširuje funkcionalnost DOM nivoa 2. Jedna od najvažnijih karakteristika ove verzije specifikacije je mogućnost rada sa brojnim DOM ekstenzijama.

Šta znači "softverski interfejs"?

Engleska riječ interfejs može se prevesti kao „područje kontakta“. Kompjuter, grubo govoreći, razumije samo dvije stvari: prazan bit i popunjen bit. Jezik kojim kompjuter "govori" može se smatrati beskonačnim nizom nula i jedinica, koji daje beskonačan broj različitih kombinacija.

Svaki programski kod je interpretacija, razumljiva programeru, ovih „nula i jedinica“ sa kojima računar radi. Dakle, svaki programski jezik je interfejs čovek-mašina.

Pretraživači rade kao i druge računarske aplikacije. Oni tumače HTML, XML, CSS kodove, JavaScript, PHP, Perl, itd. u „nule i jedinice“. Za rješavanje ove višejezičnosti potrebna je zajednička platforma. Ova platforma je DOM - specifikacija koja ne zavisi od specifičnog programskog jezika ili oznake. To je sučelje koje se može koristiti u mnogim popularnim programskim jezicima povezanim s kreiranjem web stranica i sposobno za razumijevanje i tumačenje DOM objekata.

DOM i pretraživači

DOM i JavaScript

U JavaScript-u, vrh hijerarhijske ljestvice DOM objekata, neka vrsta “provodnika” ovog interfejsa, je objekt dokumenta, a DOM objekti postaju njegova svojstva, svojstva njegovih svojstava itd. Nazivaju se i DOM čvorovima.

DOM čvorovi

Postoji 12 tipova čvorova u DOM nivou 2. Svakom tipu DOM čvora je dodijeljena konstanta s jedinstvenim imenom. Većina čvorova je dizajnirana za rad sa XML-om. U HTML - JavaScript sklopu koji radimo, može se koristiti samo 5 tipova. Ali čak i ovaj „vrh ledenog brijega“ je veoma „drvo koje se širi“ koje se ne može pokriti za jednu ili dvije lekcije.

Potpuni skup konstanti tipa čvora definiranih u W3C DOM specifikaciji (čvorovi dostupni za HTML - JavaScript su istaknuti plavom bojom):

Konstantno ime	Značenje	Opis
Čvor.ELEMENT_NODE		Element Čvor (vraća osnovni element dokumenta, za HTML dokumente ovo je HTML element)
Čvor.ATTRIBUTE_NODE		Atributski čvor (vraća atribut elementa XML ili HTML dokumenta)
		Tekstni čvor (#text)
Čvor.CDATA_SECTION_NODE		Čvor CDATA odjeljka (XML: alternativna sintaksa za prikaz znakovnih podataka)
Čvor.ENTITY_REFERENCE_NODE
Čvor.ENTITY_NODE		Particijski čvor
Čvor.PROCESSING_INSTRUCTION_NODE		Čvor XML direktive
Čvor.COMMENT_NODE		Komentar čvor
Čvor.DOCUMENT_NODE		Čvor dokumenta (osnova za pristup sadržaju dokumenta i kreiranje njegovih komponenti)
Čvor.DOCUMENT_TYPE_NODE		Čvor tipa dokumenta (vraća tip ovog dokumenta, tj. vrijednost oznake DOCTYPE)
Čvor.DOCUMENT_FRAGMENT_NODE		Čvor fragmenta dokumenta (izdvajanje dijela stabla dokumenta, kreiranje novog fragmenta dokumenta, umetanje fragmenta kao podređenog čvora, itd.)
Čvor.NOTATION_NODE		Notacijski čvor*

* Notacije su imena koja identifikuju format neraščlanjenih sekcija, format elemenata koji imaju atribut notacije ili aplikacijski program na koji je direktiva upućena. (Nije jasno? Ni ja još nisam previše siguran.)

Struktura dokumenta u DOM-u

Svi objekti dokumenta su DOM čvorovi. Pogledajmo osnovni dokument:

< title>DOM Header

Tekst pasusa

Evo dijagrama njegovog DOM stabla:

Svaki čvor može imati podređene čvorove (strelice vode do njih na dijagramu). Objekt dokumenta - osnova stabla dokumenta - je također čvor, ali nema roditeljski čvor i ima niz svojstava i metoda koje drugi čvorovi nemaju. Ima jedan podređeni čvor: element.

Element ima dva podređena čvora: i , za koje svi elementi sadržani u njima postaju podređeni.

Pažnja!

"Element" i "tag" nisu sinonimi. Oznaka je oznaka za označavanje: - ovo su dvije različite oznake. A element je objekt označen ovim oznakama:

Tekst pasusa

.

Elementi i

Sadrži tekst unutra. Ovo su njihovi podređeni tekstualni čvorovi. Element također ima atribut: align="center" . Čvorovi atributa su također podređeni čvorovi elemenata koji ih sadrže.

Prilikom rada sa DOM čvorovima stabla koriste se njihova svojstva i metode.

Neka svojstva čvorova

Mali uvod

Ponavljam još jednom: kada pristupamo elementima stranice u skriptama, imamo posla ne samo sa jezikom Javascript, već i sa DOM interfejsom koji je u njega ugrađen. Ponekad morate biti svjesni toga, ponekad možete zaboraviti „da razgovaramo u prozi“.

Na ovaj način smo već koristili neka svojstva i metode iz DOM objektnog modela. Stoga ću s vremena na vrijeme dati linkove na prethodne lekcije.

U ovoj lekciji nećemo ići „akademskim“ putem, uzimajući u obzir sva svojstva svih čvorova u svim pretraživačima. Prvo, hajde da se upoznamo s najpraktičnijim i „bezkonfliktnijim“ od njih.

Zato nećemo početi, kao što je uobičajeno, sa “glavnim svojstvima”: nodeName i nodeValue.

tagName

Vraća string koji sadrži ime oznake elementa. Sve vrijednosti tagName sadrže samo velika slova.

Sintaksa

element.tagName

Primjer

Testiranje svojstva tagName

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

Rezultat

Testiranje svojstva tagName

innerHTML

Već smo se susreli sa ovim svojstvom (vidi lekciju 10). I sada razumijemo odakle je došlo: „od kuće“.

Omogućuje pristup sadržaju elementa. Određuje ne samo tekstualni sadržaj, već i sve HTML oznake koje se nalaze unutar elementa.

Ovo svojstvo nije samo za čitanje, već i za promjenu sadržaja.

Bilješka

U IE, innerHTML je samo za čitanje za brojne elemente: ovo su svi elementi tabele, sa izuzetkom i , kao i i .

Na primjer, kreirali smo praznu tablicu bez elementa i želimo da ga programski ubacimo preko innerHTML :

IE će izbaciti "nepoznatu grešku u izvršavanju" i drugi pretraživači će izvršiti lijepljenje.

U isto vrijeme, ako upitamo postojeći sadržaj elementa , na primjer, preko alert(document.getElementById("id").innerHTML) , onda će ovo raditi u IE.

Sintaksa

element.innerHTML = "dodijeljeni tekst"

Primjer

Testiranje svojstva innerHTML Paragraf za umetanje // Ova funkcija čita tekst i umeće ga u dati pasus. funkcija testRead() ( document.getElementById( "meta").innerHTML = document.getElementById( "testInnerHTML").innerHTML } // Ova funkcija mijenja tekst datog pasusa. funkcija testChange() ( document.getElementById( "meta").innerHTML = "Prebojite i promijenite tekst" } // Ova funkcija vraća svojstvo na prvobitnu poziciju. funkcija testReset() ( document.getElementById( "meta").innerHTML = "Odlomak za umetanje" }

Testiranje svojstva innerHTML

Paragraf za umetanje

innerHTML
var text = element.innerHTML;
element.innerHTML = "";
Dodjeljivanje novog innerHTML-a prepisuje kod, čak i ako je nova vrijednost dodana trenutnoj (+=). Ovako dodane skripte se ne izvršavaju.

outerHTML
Sadrži cijeli element i ne može se mijenjati. Tehnički, pisanje u ovo svojstvo stvara novi element koji zamjenjuje stari. Reference na stari element u varijablama se ne mijenjaju.

podaci
textNode.data - sadržaj tekstualnih čvorova i komentara

textContent
element.textContent - tekst unutar elementa bez oznaka.
Postoji i nestandardno svojstvo pod nazivom innerText, koje ima dosta zajedničkog sa textContent.

Vidljivost elementa

skriveno
element.hidden = istina
Skriveni atribut nije podržan u IE11.

Atributi

Većina standardnih atributa u DOM-u postaju svojstva objekta:
element.id = "id"
Za nestandardne atribute, svojstvo nije kreirano (nedefinirano)

Možete kreirati vlastita DOM svojstva:
element.myData = (ime:"John", prezime:"Smith");
i metode:
element.myFunc = function())(upozori ovaj.nodeName);
Ovo funkcionira jer su DOM čvorovi regularni JavaScript objekti. Takva nestandardna svojstva i metode ne utiču na prikaz oznake i vidljive su samo u JavaScript-u.

Pristup atributima oznake:
element.hasAttribute(ime)
element.getAttribute(name)
element.setAttribute(ime, vrijednost)
element.removeAttribute(name)
element.attributes je pseudo-niz atributa.

Atributi ne razlikuju velika i mala slova (html), dok svojstva razlikuju velika i mala slova (javaScript).
Vrijednost atributa je uvijek niz.

Atribut: a.getAttribute("href") - prikazuje tačno ono što je u HTML-u
Svojstvo: a.href - može se razlikovati od vrijednosti atributa
Svojstvo najčešće zavisi od atributa, ali ne i obrnuto. Promjena svojstva ne utječe na atribut.

Rad sa klasama

Atribut class odgovara dva svojstva:
className - string
classList — objekat

classList objektne metode:
element.classList.contains("class") - provjerava da li objekat sadrži datu klasu
element.classList.add("class")
element.classList.remove("class")
element.classList.toggle("class")

classList je pseudo-niz i može se ponavljati kroz for petlju.

atributi podataka

Prilagođeni atributi podataka dostupni su ne samo kao atributi, već i kroz svojstvo skupa podataka
data-about = "neka vrijednost"
element.dataset.about

Redoslijed čvorova

parent.contains(child) — tačno ili netačno
provjerava da li je podređeni čvor ugniježđen unutar roditelja

nodeA.compareDocumentPosition(nodeB) - Pruža informacije o sadržaju i relativnom redoslijedu elemenata. Povratna vrijednost je bitmaska:

Dodavanje i uklanjanje čvorova

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

parent.appendChild(element) - element se dodaje na kraj nadređenog
parent.insertBefore(element, nextSibling) - element se dodaje prije nextSibling
parent.insertBefore(element, parent.firstChild) - dodano na početak
parent.insertBefore(element, null) - radit će kao appendChild
Sve metode umetanja vraćaju umetnuti čvor.
Kada premještate element, ne morate ga prvo ukloniti sa starog mjesta; metoda umetanja to čini automatski.

element.insertAdjacentHTML(gdje, html) - umeće proizvoljan HTML kod bilo gdje u dokumentu. Gdje specificira gdje html treba biti umetnut u odnosu na element - beforeBegin, afterBegin, beforeEnd, afterEnd.
element.insertAdjacentElement(gdje, noviElement)
element.insertAdjacentText(gdje, tekst)
Posljednje dvije metode nisu podržane u Firefoxu

node.append(...nodes) – umeće čvorove na kraju čvora,
node.prepend(...nodes) – umeće čvorove na početak čvora,
node.after(...nodes) – umeće čvorove nakon čvora čvora,
node.before(...čvorovi) – umeće čvorove prije čvora čvora,
node.replaceWith(...nodes) – umeće čvorove umjesto čvora.
ovdje su čvorovi čvorovi ili nizovi, u bilo kojoj količini i kombinacijama, navedeni odvojeni zarezima.

var fragment = document.createDocumentFragment() - simulira DOM čvor koji, kada se ubaci u dokument, nestaje, ostavljajući samo svoje potomke. Ne preporučuje se u modernim pretraživačima.

element.cloneNode(true) - duboka kopija elementa
element.cloneNode(false) - kopija bez podređenih elemenata

parent.removeChild(element)
parent.replaceChild(newElement, element)
element.remove() - uklanja element direktno, bez upućivanja na njegovog roditelja.
Metode vraćaju udaljeni čvor