Mis on dokumendiobjekti mudel ja miks peaksite teadma, kuidas seda kasutada.

Nii et olete õppinud HTML-i, loonud oma esimesed sildid, õppinud CSS-i, teinud ilusaid vorme, hämmastavaid nuppe, tundlikke lehti ja hakanud kõigile näitama, kui hämmastav see kõik oli.

Kuid siis otsustate, et soovite oma õppes veel ühe sammu astuda, ja olete endamisi imestama hakanud: „Kuidas saan oma lehele animatsiooni lisada? Soovin, et see nupp tegi minu lehel animatsiooni, kui klõpsasin seda! "

Noh, seal tuleb DOM teie probleemi lahendama. Ilmselt olete sellest palju kuulnud, kuid te ei pruugi veel teada, mis see on ja milliseid probleeme see lahendab. Nii et süveneme.

Mis on DOM?

Kas teate kõiki neid lahedaid animatsioone, mida näete enda ümber ja mis panevad teid endas mõtlema: "Wow, soovin, et saaksin midagi sellist teha"? Kõik need animatsioonid on tehtud DOM-iga manipuleerimise teel. Seletan teile nüüd, kuidas hakata sellega manipuleerima ja muuta teie veebisaidid lahedamaks.

DOM (Document Object Model) on liides, mis näitab, kuidas brauser loeb teie HTML- ja XML-dokumente. See võimaldab keelel (JavaScript) teie veebisaiti manipuleerida, struktureerida ja kujundada. Pärast seda, kui brauser on teie HTML-dokumendi läbi lugenud, loob see esitluspuu, mida nimetatakse dokumendi objektimudeliks, ja määratleb, kuidas sellele puule pääseb juurde.

Eelised

DOM-iga manipuleerides on teil lõpmatuid võimalusi. Saate luua rakendusi, mis värskendavad lehe andmeid ilma värskendust vajamata. Samuti saate luua rakendusi, mida kasutaja saab kohandada, ja seejärel muuta lehe kujundust ilma värskenduseta. Elemente saate lohistada, teisaldada ja kustutada.

Nagu ma ütlesin, on teil lõpmatuid võimalusi - peate lihtsalt loovust kasutama.

Esindus brauseri poolt

Ülaltoodud pildil näeme esinduspuud ja seda, kuidas brauser selle loob. Selles näites on meil neli olulist elementi, mida näete palju:

  1. Dokument : see käsitleb kõiki HTML- dokumente.
  2. Elemendid : kõik teie HTML-is või XML-is olevad märgendid muutuvad DOM-elemendiks.
  3. Tekst : kogu siltide sisu.
  4. Atribuudid : kõik konkreetse HTML- elemendi atribuudid . Pildil on atribuut class = ”hero” atribuut elemendist < p>.

DOM-iga manipuleerimine

Nüüd jõuame parimasse ossa: hakatakse DOM-iga manipuleerima. Kõigepealt loome näiteks HTML-elemendi, et näha mõningaid meetodeid ja kuidas sündmused toimivad.

      Entendendo o DOM (Document Object Model) 

00:00:00

Start Stop Reset

Väga lihtne, eks? Nüüd õpime lisateavet DOM-i meetodite kohta: kuidas oma elemente hankida ja hakata manipuleerima.

Meetodid

DOMil on palju meetodeid. Need on ühendus meie sõlmede (elementide) ja sündmuste vahel, millest saame hiljem rohkem teada. Ma näitan teile kõige olulisemaid meetodeid ja nende kasutamist. On palju rohkem meetodeid, mida ma teile siin ei näita, kuid kõiki neid meetodeid näete siin.

getElementById ()

See meetod tagastab elemendi, mis sisaldab edastatud nime id . Nagu me teame, peaksid id- id olema ainulaadsed, seega on see väga kasulik meetod ainult soovitud elemendi saamiseks.

var myStart = document.getElementsById('start');

myStart : Meie muutuja nimi, mis näeb välja sarnane meie ID-ga, on möödunud.

algus : id läbitud. Ja kui meil pole selle konkreetse nimega ühtegi ID-d , tagastatakse see null .

getElementsByClassName ()

See meetod tagastab HTMLCollection kõik need elemendid, mis sisaldavad konkreetset nime klassi möödas.

var myContainer = document.getElementsByClassName('container');

myContainer : Meie muutuja nimi, mis näeb välja sarnane meie klassile, on möödunud.

.konteiner : meie klass möödus. Juhul kui meil pole ühtegi selle konkreetse nimega klassi , tagastatakse see null .

getElementsByTagName ()

See töötab samamoodi nagu ülaltoodud meetodid: see tagastab ka HTMLCollectioni, kuid seekord ühe erinevusega: see tagastab kõik need elemendid , mille sildi nimi on edastatud.

var buttons = document.getElementsByTagName('button');

nupud : meie muutuja nimi, mis näeb välja sarnane meie sildi nimega, on edastatud.

nupp : sildi nimi, mille me tahame saada.

querySelector ()

See tagastab esimese elemendi , mille konkreetne CSS-valija on läbinud. Pidage meeles, et valija peaks järgima CSS-i süntaksit . Juhul, kui teil pole ühtegi valijat , tagastatakse see null .

var resetButton = document.querySelector('#reset');

resetButton : meie muutuja nimi, mis näeb välja nagu meie valija, on edastatud.

# reset : valija on möödunud ja kui teil pole ühtegi sellele vastavat valijat , tagastatakse null .

querySelectorAll ()

Väga sarnane meetodiga querySelector () , kuid ühe erinevusega: see tagastab kõik läbitud CSS-i valijaga sobivad elemendid . Valijat peaks järgima ka CSS süntaksi . Juhul, kui teil pole ühtegi valijat , tagastatakse see null .

var myButtons = document.querySelector('#buttons');

myButtons : Meie muutuja nimi, mis näeb välja sarnane meie valijatega, on möödunud.

# nupud : valija on möödunud, kui teil pole ühtegi sellele vastavat valijat , tagastatakse null .

Need on mõned kõige sagedamini kasutatavad DOM-meetodid. Võite kasutada veel mitmeid meetodeid, näiteks createElement (), mis loob teie HTML-lehele uue elemendi, ja setAttribute (), mis võimaldab teil HTML-i elementidele uusi atribuute määrata. Saate neid iseseisvalt uurida.

Jällegi leiate kõik meetodid siit, vasakult küljelt meetoditest . Ma tõesti soovitan teil vaadata mõnda teist, sest teil võib vaja minna mõnda neist varsti.

Nüüd tutvume sündmustega - ilma nendeta ei saa me oma lehtedel animatsioone teha.

Sündmused

DOM-i elementidel on meetodid , nagu me just arutasime, kuid neil on ka sündmusi . Need sündmused on vastutavad selle eest, et meie lehel oleks interaktiivsus võimalik. Kuid siin on üks asi, mida te ei pruugi teada: sündmused on ka meetodid .

klõpsake

Üks enimkasutatavatest sündmustest on klikiüritus. Kui kasutaja klõpsab konkreetsel elemendil, saab ta mõne toimingu.

myStart.addEventListener('click', function(event) {
// Do something here.
}, false);

Parameetrid addEventListener () on:

  1. Soovitud sündmuse tüüp (antud juhul ' klõpsake ').
  2. Tagasihelistamisfunktsioon
  3. UseCapture vaikimisi on vale. See näitab, kas soovite sündmust "jäädvustada" või mitte.

valige

See sündmus on mõeldud siis, kui soovite midagi konkreetset elementi valides saata . Sel juhul me saame lähetamist lihtne valvas .

myStart.addEventListener('select', function(event) {
alert('Element selected!');
}, false);

Need on mõned kõige sagedamini kasutatavad sündmused. Loomulikult on meil palju muid sündmusi, mida saate kasutada, näiteks pukseerimissündmused - kui kasutaja hakkab mõnda elementi lohistama, saate teha mõne toimingu ja kui ta selle elemendi maha viskab, saate teha uue toimingu.

Nüüd näeme, kuidas saame DOM-ist läbida ja mõnda omadust kasutada.

DOM-ist läbimine

Võite DOM-ist läbida ja kasutada mõnda omadust, mida me nüüd näeme. Nende omaduste abil saate tagastada elemente, kommentaare, teksti ja nii edasi.

.lapsõlmed

See majutusasutus tagastab nodeList lapse sõlmede antud element. See tagastab teksti, kommentaare ja nii edasi. Seega, kui soovite seda kasutada, peaksite olema ettevaatlik.

var container = document.querySelector('.container');
var getContainerChilds = container.childNodes;

. esimeneLaps

See omadus tagastab antud elemendi esimese lapse.

var container = document.querySelector('.container');
var getFirstChild = container.firstChild;

.nodeNimi

See omadus tagastab antud elemendi nime. Sel juhul möödusime div-st , nii et see tagastab " div ".

var container = document.querySelector('.container');
var getName = container.nodeName;

.nodeValue

See omadus on spetsiifiline tekstide ja kommentaaride jaoks , kuna see tagastab või määrab praeguse sõlme väärtuse . Sel juhul, kuna me läbisime div-i, tagastatakse see null .

var container = document.querySelector('.container')
var getValue = container.nodeValue;

.nodeType

See omadus tagastab antud elemendi tüübi . Sel juhul tagastab see „ 1 “.

var container = document.querySelector('.container')
var getValue = container.nodeType;

Aga mida tähendab 1 ikkagi? Põhimõtteliselt on see antud elemendi nodeType . Sel juhul on see _ELEMENT_NODE_ ja tagastab nulli. Kui see oleks atribuut, tagastatakse see meile väärtusega 2 ja atribuudi väärtus.

Lisateavet nodeTypesi kohta leiate siit.

Elemendid

Need omadused tagastavad meile ülalkirjeldatute asemel ainult elemendid . Neid kasutatakse ja soovitatakse sagedamini, kuna need võivad tekitada vähem segadust ja neid on lihtsam mõista.

.parentNode

See omadus tagastab antud sõlme vanema.

var container = document.querySelector('.container')
var getParent = container.parentNode;

.firstElementChild

Tagastab antud elemendi esimese alamelemendi.

var container = document.querySelector('.container')
var getValue = container.firstElementChild;

.lastElementChild

Tagastab antud elemendi viimase alamelemendi.

var container = document.querySelector('.container')
var getValue = container.lastElementChild;

Need on mõned paljudest omadustest, mis DOM-il on. Teie jaoks on väga oluline teada DOM-i põhitõdesid, selle toimimist ning selle meetodeid ja omadusi, sest mõni päev võib teil seda vaja minna.

Järeldus

DOM pakub meile mitmeid olulisi API-sid fantastiliste ja uuenduslike rakenduste loomiseks. Kui saate selle põhitõdedest aru, saate luua uskumatuid asju. Kui soovite DOM-i kohta rohkem lugeda, võite klõpsata siin ja lugeda kõiki MDN-i dokumente.

? F ollow mind Twitteris!

F ollow mind GitHub!

Otsin kaugemat võimalust, nii et kui mul on mõnda neist hea meel kuulda, võtke minuga ühendust!