DOM programmēšana: manipulējiet ar Web lapām

Atklāšana: Jūsu atbalsts palīdz vietnei darboties! Mēs nopelnām nodošanas maksu par dažiem pakalpojumiem, kurus mēs iesakām šajā lapā.


Dokumenta objekta modelis vai DOM apraksta, kā katrs HTML lapas elements attiecas uz pašu dokumentu.

Būtībā katra HTML, XHTML vai XML lapa, kad tā ir augšupielādēta tīmeklī, kļūst par dokumentu. DOM šos dokumentus uzskata par koka struktūru. Pats dokuments ir augšējā struktūra, un katrs lapas elements tiek attēlots kā objekts.

Tas nozīmē, ka katrs attēls, katrs punkts, katrs virsraksts un tā tālāk ir atsevišķs objekts, kam ir savas attiecības ar dokumentu.

Zvanot noteiktam elementam pēc tā nosaukuma, tīmekļa izstrādātāji var modificēt šo elementu. Tas nozīmē, ka tīmekļa izstrādātāji var izgūt un iestatīt savus rekvizītus.

DOM arī ļauj pievienot un noņemt elementus vai objektus. Visbeidzot, tas ļauj tīmekļa izstrādātājiem tvert un reaģēt uz lietotāju vai pārlūku darbībām, efektīvi risinot notikumus.

DOM īsa vēsture

DOM vēsture aizsākās pārlūku karu un pirmo skriptu valodu izlaišanas dienās.

Kad Netscape Navigator un Microsoft Internet Explorer izlaida savas JavaScript versijas, izstrādātāji atrada vajadzību pēc saskarnes, kas ļautu piekļūt lapas elementiem ar šīm skriptu valodām.

Protams, katram pārlūkam bija sava metode, taču tas izraisīja daudz saderības problēmu, jo pārlūku pārdevēji mēģināja pārspēt viens otru, pievienojot jaunas funkcijas.

Galu galā W3C sāka strādāt pie XML DOM, saukta arī par 1. līmeņa DOM, specifikāciju, kam vajadzēja būt pārnēsājamam visos pārlūkos.

Tas bija paredzēts arī darbam ar jebkuru programmēšanas valodu, kas varētu manipulēt ar XML dokumentiem. Šī specifikācija tika pieņemta kā standarts 1998. gada beigās. Pašreizējā versija ir DOM 4, W3C ieteikums no 2015. gada.

DOM divi skati

DOM sastāv no divām daļām; kodols un HTML. Kodols ir HTML daļas pamats, un to izmanto, lai attēlotu funkcionalitāti, kas nepieciešama XML dokumentiem, lai manipulētu ar dokumenta struktūru, tā elementiem un atribūtiem.

HTML daļa nosaka konkrētus HTML elementus un to funkcionalitāti. Tādējādi DOM tiek uzskatīts gan par API, gan kā objektu.

DOM kā API

Kā lietojumprogrammu saskarni (API) to izmanto gan HTML, gan XML dokumentiem. Tas dod mums standarta objektu kopu, kas tiek izmantots šajos dokumentos, un kalpo arī kā paraugs, kā šos objektus var apvienot, piekļūt tiem un manipulēt ar tiem..

DOM kā objekts

Objekta modelis DOM attiecas uz faktu, ka dokumenti un elementi tiek definēti kā objekti. Šajā ziņā tas identificē:

  • Saskarnes un objekti, ko izmanto, lai attēlotu un manipulētu ar dokumentu
  • Viņu izturēšanās un atribūti
  • Viņu attiecības.

DOM struktūra

Strukturāli DOM ļoti līdzinās dokumentam, kuru tā modelē. Katrs dokumenta elements tiek uztverts kā objekts vai mezgls, kas sakārtots hierarhiski.

Katram mezglam ir funkcija un identitāte, un katram mezglam var būt arī noteikts skaits bērnu mezglu. Visizplatītākie mezgli ir elementi, teksts un atribūti.

Elementa mezgli

Elementu mezgli ir atsevišķi tagi vai tagu pāri HTML kodā. Viņiem var būt bērnu mezgli, kas var būt citi elementi vai teksta mezgli.

Teksta mezgli

Teksta mezgli ir faktiskais saturs starp HTML tagiem. Viņiem parasti ir vecāku mezgls un dažreiz brāļu un māsu mezgli, bet viņiem nav savu bērnu mezglu.

Atribūtu mezgli

Atribūtu mezgli ir nedaudz īpaši. Viņiem nav vecāku mezglu, bērnu vai brāļu vai māsu mezglu, bet tā vietā tie attēlo atribūtus, kas definēti HTML tagos, piemēram, atribūtu href tagos vai src atribūtus img tagos.

Jaunu atribūtu var izveidot, izmantojot document.createAttribute (), un pēc tam to var piešķirt elementa mezglam un iestatīt tā vērtību. Vēl viens atribūtu atsauces veids ir piekļuve elementa atribūtiem tieši, izmantojot getAttribute () un metodi setAttribute (), lai iestatītu tā vērtību.

Runājot par atribūtiem, ir vērts pieminēt, ka vairums atribūtu, kurus izmanto HTML tagos, ir samērā vienkārši, un tie sastāv no vienas vērtības īpašumam, kas saistīts ar šo tagu. Tomēr ir arī stila atribūti, kas var būt sarežģītāki.

Stila atribūti tiek pielietoti ar CSS palīdzību. Varat to izmantot, lai piemērotu stilus atsevišķiem tagiem, visiem noteikta veida tagiem vai arī, izmantojot klases, var piešķirt stila atribūtus.

Lai sarežģītu jautājumus vēl vairāk, noteikta elementa stilus var mantot no jebkura no šiem avotiem. Varat arī manipulēt un mainīt šos stilus, mainot taga stila atribūtu vai izmantojot taga klases atribūtus..

Tomēr šādi rīkojoties, tiks mainīti visi elementa stila parametri, un dažos gadījumos tas nav praktiski, īpaši, ja vēlaties mainīt tikai vienu stila parametru.

Par laimi stila atribūti atšķiras no citiem atribūtiem. Tie tiek definēti kā objekti, un tiem ir īpašības katram iespējamajam parametram. Pēc tam šīm īpašībām var piekļūt, tās atjaunināt un ar tām citādi rīkoties.

Izmantojot DOM

Tā kā katrs dokuments ir arī objekts, tas kalpo kā sākumpunkts manipulācijām ar citiem tajā esošajiem mezgliem. Šiem bērnu mezgliem var piekļūt un ar tiem var manipulēt, izmantojot šādas metodes:

  • getElementById ()
  • getElementsByTagName ()
  • createElement ()
  • izveidotAttribūtu ()
  • createTextNode ().

Varat arī dinamiski pievienot, atjaunināt un noņemt mezglus, izmantojot šādas metodes:

  • insertBefore ()
  • aizstāt bērnu ()
  • removeChild ()
  • appendChild ()
  • cloneNode ().

DOM ir tieši piesaistīts HTML, CSS un JavaScript, jo tas atspoguļo tagos un atribūtos, kas noteikti šajos standartos, kā arī kalpo kā API klienta puses skriptu veidošanai..

Resursi

Šis resursu saraksts sniedz detalizētu DOM pārskatu un ir piemērots gan iesācējiem, gan pieredzējušiem lietotājiem. Iekļauts arī atsauču saraksts, kā arī resursi ar piemēriem.

  • JavaScript un DOM sērija: šī ir ļoti detalizēta apmācību sērija, kurā ļoti detalizēti aprakstīts, kā JavaScript izmantot, lai manipulētu ar DOM.
  • JavaScript DOM konsultācijas: interaktīvu apmācību komplekts, kas māca jums piekļūt DOM un manipulēt ar to no JavaScript. Tiek pieņemts, ka ir zināmas iepriekšējas zināšanas par JavaScript, tomēr ir vērts pieminēt, ka netiek izmantotas īpašas bibliotēkas.
  • DOM mezgli: ļoti rūpīgs DOM mezglu pārskats, kas piemērots iesācējiem, kuri vēlas iepazīties ar DOM struktūru un kādiem mezgliem tas sastāv.
  • JavaScript DOM – vingrinājumi, prakse, risinājums: dažādu vingrinājumu komplekts, kurā iesaistītas DOM, sākot no vienkāršiem vingrinājumiem līdz sarežģītākiem.
  • W3C dokumentu objekta modelis (DOM): šī rokasgrāmata, ko publicējis W3C, piedāvā ievaddaļu un iesācējiem draudzīgu pārskatu par DOM, vēsturi un tā darbību.
  • Ievads DOM: īss konceptuāls ievads DOM, ko publicējis Mozilla Izstrādātāju tīkls un kurā paskaidrots, kā tas nodrošina HTML un XML dokumentu struktūru un kā tam var piekļūt.
  • W3C DOM4: jaunākais W3C DOM ieteikums, kas datēts ar 2015. gadu, kurā ietverts DOM pārskats un detalizētas specifikācijas.
  • DOM atsauce: ērts atsauču saraksts, ko publicējis Microsoft izstrādātāju tīkls, ieskaitot rekvizītus, metodes, notikumus un citu.

Grāmatas

Ja vēlaties mācīties no grāmatām, ir daudz iespēju. Sarakstā iekļautās grāmatas ir ļoti sīki aprakstītas par DOM, kā tā darbojas un kā ar dokumentiem var manipulēt.

  • DOM skriptu sastādīšana: Web dizains ar JavaScript un Document Object Model (2005), autors Džeremijs Keits: šī grāmata sniedz ātru un ērtu atsauci tiem, kas nav koda eksperti, bet vēlas ātri mācīties un izmantot JavaScript un DOM priekšrocības, lai pievienotu funkcionalitāti viņu vietnēm. Tas satur daudz piemēru un palīdz lasītājiem veidot vairākus reālās pasaules projektus.
  • Dokumenta objekta modelis (2002), autore Džo Marini: šīs grāmatas autore palīdz jums uzzināt DOM jēdzienus, dizainu, teoriju un izcelsmi. Visā grāmatā DOM izmantosit, lai pārbaudītu, vadītu un manipulētu ar dokumentu mezgliem un saturu; pēc tam iemācieties veidot noderīgas lietojumprogrammas, kuras bez atkārtotas kodēšanas var viegli pārnest uz jebkuru ar DOM atbilstošu ieviešanu.
  • DOM apgaismība: Cody Lindley izpētīt JavaScript un mūsdienu DOM (2013): ar šīs grāmatas palīdzību jūs uzzināsit, kā efektīvāk manipulēt ar HTML, skriptējot dokumenta objekta modeli (DOM), neizmantojot DOM bibliotēku. Ar daudziem viegli sagremojamiem piemēriem autors sniedz jums pilnīgu mūsdienu DOM koncepciju pārskatu, lai parādītu, kā darbojas dažādi mezglu objekti.

Dodieties tālāk un šķērsojiet DOM

Izpratne par DOM ir viena no pamatjēdzieniem ikvienam, kurš vēlas kļūt par tīmekļa izstrādātāju.

Vislabākā ir tā, ka, lai sāktu to lietot, nav nepieciešami īpaši rīki. Viss, kas jums nepieciešams, ir skripts un vēlamais pārlūks. Tiklīdz jūs izveidojat skriptu un iekļaujat to savā tīmekļa lapā, varat sākt izmantot dokumenta vai loga elementu API, lai dažādos veidos manipulētu ar dokumentu.

Iepriekš minētie resursi kalpos kā stabils sākumpunkts DOM šķērsošanā.

Turpmākie lasījumi un resursi

Mums ir vairāk rokasgrāmatu, mācību materiālu un infografiku, kas saistīti ar kodēšanu un vietņu izstrādi:

  • Laba HTML sastādīšana: tas ir labs ievads labi izveidota HTML rakstīšanai un HTML validētāja programmatūras izmantošanai.
  • CSS3 – ievads, ceļveži un resursi: šī ir lieliska vieta, kur sākt apgūt tīmekļa lapas izkārtojumu.
  • ASP.NET resursi: šī rokasgrāmata palīdzēs jums izmantot Microsoft .NET sistēmu tīmekļa lapu izveidošanai.

HTML iesācējiem – galīgais ceļvedis

Ja jūs patiešām vēlaties iemācīties HTML, mēs esam izveidojuši grāmatas garuma rakstu HTML HTML iesācējiem – galīgais ceļvedis.

Un tas tiešām ir galvenais ceļvedis; tas prasīs jūs no paša sākuma līdz meistarībai.

HTML iesācējiem - galīgais ceļvedis
HTML iesācējiem – galīgais ceļvedis

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map