Kuidas DOM-i juhtida Javascriptiga

DOM võib kohati päris hirmutav olla. Ma mõtlen sellise lühendiga, et see kõlab pigem House DJ-na, kui liidesena, millega me saame manipuleerida!

Kuid ärge muretsege, mu sõbrad, ma ütlen teile, et saame seda teha! See on lihtsalt kontekstuaalsuse ja täideviimise küsimus. Kui see on lagundatud, siis teeme DOMi kohe.

See postitus hõlmab:

  1. Mis on DOM?
  2. Miks see oluline on?
  3. Kuidas seda JavaScripti abil rünnata!

Sukeldugem kohe sisse ja alustame vallutamist!

Dokumendiobjekti mudel - DOM

Mis on DOM?

Nagu eespool näha, on DOM dokumendiobjekti mudeli akronüüm. Dokumendiobjekti mudeli idee tuleneb DOM-i põhifunktsioonist: meie HTML-koodi visuaalse esituse loomisest. Tähendab, see, mida näeme oma veebilehtedel projitseerimas, pole mitte meie kodeeritud HTML, vaid selle kujutis.

Esitus koosneb dokumendist ja objektidest, mis seda elavad. Objektid on HTML-elemendid, mis on muudetud sõlmeobjektideks. Just neid sõlmi suuname hiljem dünaamiliste toimingute loomiseks ja nendega manipuleerime. Jälle muudab DOM selle esinduseks, nii et see ei mõjutaks ühtegi meie kodeeritud HTML-i.

Lihtne viis DOM-i välja mõelda on see, et meie HTML teisendab selle visuaalseks kujunduseks meie veebilehtede jaoks ja muutmiseks peame kasutama konkreetset DOM-i süntaksit.

Veel üks viis, kuidas mulle meeldib HTML / DOM-i suhe kontseptualiseerida, on kujutlus sellest ühena neist vanadest projektoritest, mis meil koolis oli:

Kas keegi neid mäletab?

Metafoor töötab nii:

  1. Projektorile asetatud poolläbipaistva paberi tükk on meie HTML.
  2. Projektor on meie brauser, mille eesmärk on muuta meie HTML DOM-i esinduseks.
  3. Kriiditahvli projektsioon on meie HTML-i DOM-esitus brauseris (meie veebileht).
  4. Kõik märkused, mida meie õpetaja teeb poolläbipaistvale lehele, üritavad meie DOM-i manipuleerida.

Olenemata sellest, kui palju märkmeid oma paberile teeme, ei muudeta meie esialgset teksti kunagi täielikult: see säilitab alati algse struktuuri ja vormingu. Kui me ei asenda proua O’Malley pastakat uuesti püsiva markeriga!

Kõik naljad, ma loodan, et see aitab DOM-i kontseptualiseerida.

Ülevaatamiseks:

  1. Kirjutame oma HTML-i
  2. Seejärel tõlgendatakse ja kuvatakse seda meie brauseri kaudu veebilehel. See esitus on DOM.
  3. Hiljem manipuleerime DOM-i esindusega, kuid see ei kahjusta meie kõva koodi HTML-i.

Päris lihtne, kui me selle kõik ära lammutame? Siiski peame natuke rohkem lõhkuma DOM-i esindamise mõningaid nüansse.

Nagu ma juba mainisin, kui DOM projitseerib meie HTML-i, on iga element sõlmedega esindatud. Sõnasõlm võib kõlada hirmutavalt, kuid see on lihtsalt meie elementide esindatud! Hiljem, kui me tahame oma sõlmpunktidega manipuleerida, muutuvad need sihtmärkideks.

Lõpuks tahan rõhutada, et DOM on tegelikult API. See pole mõeldud spetsiaalselt JavaScripti jaoks, vaid mitme kodeerimiskeele jaoks. Pidage seda meeles, kui hakkame rakendama, sest DOM-ilt saadud objektide sihtimisel, tagastamisel ja nendega manipuleerimisel võivad need tunduda teistsugused kui meie oleme harjunud.

Selle teadmine aitab meil ette valmistuda ainulaadsete objektide vastuvõtmiseks, nende teisendamiseks ja nende käsitsemiseks.

Miks see on oluline?

DOM on oluline, kuna pakub meile infrastruktuuri oma veebilehtedega manipuleerimiseks. See võimaldab meil kohandada ainulaadseid kasutajakogemusi või värskendada veebisisu dünaamiliselt!

Kui soovime, et meie veebisaiti tunnistataks kvaliteetseks veebileheks, vajame seda funktsiooni. DOM-i toimimisest ja sellest üle liikumise mõistmisel on palju vaja tagada, et meie veebisaidid oleksid huvitavad.

See ütles, et peame varustama end DOM-ile juurdepääsu ja sellega manipuleerimise vahenditega! Jätkake tööd ja leidke kõik, mida vajame DOM-i käivitamiseks.

DOM-i alustamine - sihtimine ja manipuleerimine.

Kui läheneme olukorrale, kus sooviksime manipuleerida oma veebilehel asuva objektiga, peaksime koheselt mõtlema kahele asjale:

  1. Kuidas seda objekti sihtida?
  2. Kuidas saavutada soovitud olek?

Kui me esitame endale need küsimused, saab DOM uskumatult juhitavaks. Esmalt elementide sihtimise õppimine ja muudatuste rakendamine annab meile põhilised tööriistad DOM-i õõtsutamiseks.

Kuidas sihtida

Millegagi manipuleerimiseks peab meil olema sellele juurdepääs. Javascriptis on meil saadaval mõned meetodid, mis seda täpselt teevad.

Need meetodid otsivad meie DOM-ist väärtust ja tagastavad seejärel seotud objekti. Need väärtused võivad olla sildid, klassid, ID-d, parentElements või õed-vennad. Kõik sõltub olukorrast, kus meile esitatakse.

Kui oleme objekti sihtinud, on kõige parem salvestada see muutujasse. Nii et kui meil on vaja seda eset uuesti sihtida, on meil see valmis minema!

See on mõttekas, kui näeme seda toimimas, kuid seni, kuni mõistame, et sihime objekti ja salvestame selle, oleme DOM-i manipuleerimisega teel.

Sihtimise alustamiseks peame õppima mõned meetodid. Siin on nimekiri parimatest meetoditest objektide sihtimiseks ja nende rakendamiseks.

GetElementBy meetodid

Need meetodid võimaldavad meil suunata oma lehe kindlale komponendile ja tagastada see meile tagasi. Need on konkreetsed viisid konkreetse sisu sihtimiseks.

1.) document.getElementByTagName ('sildi nimi');
See võimaldab meil dokumendi elemente nende sildinimede järgi sihtida. Näiteks võime sihtida valitud p, h1 või jaotise silti. Saame isegi pesastatud silte sihtida, kasutades meie CSS-i süntaksit: document.getElementByTagName ('sektsioon p');
2.) document.getElementById ('idname');
Sarnaselt meie ülaltoodud näitega, kuid see tagastab konkreetse objekti, mille ID-ga esile tõstame.
document.getElementById ('# heroHeader');
3.) document.getElementByClassName ('className');
Viimaseks aktsepteerib see meetod klassi nime ja tagastab konkreetse objekti või HTML-i kogu. Kui klassil on mitu sel moel nimetatud objekti, saadetakse meile HTML-i kogu. HTML-kogud on massiivsed nagu objektid, millega saame manipuleerida.
Nende meetodid võivad siiski olla piiravad, nii et Array.from () kasutamine nende kogude massiivideks teisendamiseks on hea viis selle probleemiga võitlemiseks.
document.getElementById ('. main-content');

Päringu valimise meetodid

Päringuvalijad on suurepärased, kuna erinevalt elementide valijatest võime olla sihitud paindlikult:

1.) document.querySelector ('sildinimi' || '#idName' || '.className');
querySelector () võimaldab meil sihtida mõnda väärtust, mille me sinna sisestame. Kui mitu nimetust on sama nimetusega, tagastab see esimese leitud objekti.
document.querySelector ('p');
document.querySelector ('# heroHeader');
document.querySelector ('. main-content');
2.) document.querySelectorAll ('sildinimi' || '#idName' || '.className');
querySelectorAll () nagu querySelector () võimaldab meil sisu sihtida samal viisil. Ühe objekti tagastamise asemel tagastab see aga kõik objektid, mis vastasid sildi- või klassinimele. Tagastamise korral tuleb see nodelisti kujul. Nagu meie HTMLCkollektsioonid, on sõlmpunktid massiivsed nagu objektid, millega saame manipuleerida. Jällegi, kui vajame juurdepääsu rohkematele meetoditele, saame teisendada, kasutades meetodit Array.from ().
document.querySelectorAll ('sektsioon p'); -> Tagastab jaotise siltide kõik p-sildid
document.querySelectorAll ('. teksti sisu'); -> Tagastab kõik klassi .teksti sisuga üksused.

Seal on palju seedimist, kuid teadke, et need kõik on mõeldud meie DOM-i elemendi sihtimiseks ja selle meile tagastamiseks. Ja mõnikord saame NodeListi või HTML-i kogumi massiivi-sarnase struktuurina. Kui see juhtub, mõelge juurutada forEach () meetod, et muudatusi rakendada selles loendis IGAS elemendis.

Samuti, kui kutsume esile päringu Selector või getElementBys, määrake see kindlasti kas const või let. See võimaldab meil oma koode kogu oma koodi jooksul uuesti kasutada.

Näide: const header = document.querySelector ('header');

Lihtne kraam, kuid oluline teada!

Stiili ja sisu manipuleerimine:

Nüüd, kui me teame, kuidas oma sisu suunata, alustame nendega manipuleerimist. Kolm suurt asja, mida me teha tahame, on objekti stiili kohandamine, teksti sisu muutmine või uue elemendi lisamine meie struktuuri.

Selleks peame mõtlema rohkem meetoditele ja väikesele CSS-ile!

Stiil

Objektide stiilimiseks saame teha kahte asja. Saame kasutada .style meetodit või luua klassi meie CSS-is ja selle JavaScripti kaudu määrata või ümber lülitada.

.stiil:

.Style'i kasutamisel saame sihtida objekti CSS-i stiile ja rakendada sellele kõiki CSS-i atribuute, mida me soovime. Kuid kui neid rakendatakse meie objektidele, rakendatakse neid ka rivistiilidena.

Selle, kuidas me oma koodis rakendame, määrame selle ühele meie sihitud objektidest. Oletame, et salvestasime oma päise sildi const-is ja tahame funktsiooni täitmisel tausta reguleerida. Kuidas me koodiksime, on see:

const päis = document.querySelector ('päis'); // 1
const backgroundChange = function () {// 2
  header.style.background = "roosa"; // 3
}
backgroundChange (); // 4

Jaotunud koodipakett näeb välja selline:

  1. Me määrame oma päise muutujale.
  2. Seejärel loome funktsiooni taustmuudatus.
  3. Me salvestame funktsiooni oma päise tausta reguleerimise.
  4. Kutsume funktsiooni lehe allosas.

Kui me tahaksime, et meie taust oleks kogu aeg roosa, mitte ainult funktsiooni kutsumisel, võime funktsiooni süntaksi lihtsalt kukutada ja käima panna:

const header = document.querySelector ('päis');
header.style.background = "roosa";

Seda tüüpi stiilide salvestamine funktsioonis pole aga halb mõte, kuna see "kaitseb" toimingut ja seda saab rakendada siis, kui otsustame selle käivitada.

Klassi lähenemine

Teine viis stiilide rakendamiseks on CSS-klassi loomine ja selle lisamine JavaScripti kaudu soovitud elemendile. See võib tunduda tobe, kuna me võime selle lihtsalt CSS-i abil määrata, kuid kui see on võimalik JS-iga dünaamiliselt värskendada, teenib see meid komponentide ehitamisel hästi!

1. samm: kirjutage mõni CSS.

Esiteks peame looma CSS-klassi, mida rakendame hiljem oma eesmärgi jaoks. Selles näites pangem midagi kaduma! Selleks lülitame kuva blokeerimise peale ühele.

Meie CSS-kood:

.vanish {
   kuva: puudub;
}

CSS-i kirjutamine on meie jaoks vana müts, nüüd aga uute asjade juurde.

Meie JS kood:

Sihime oma p silte ja pangem meie tekst kaduma!

const pTags = document.querySelectorAll ('p');
pTags.forEach (funktsioon (p) {
  p.classList.add ('kaduma')
})

Niipea kui meie leht laaditakse, kaovad kõik meie p-sildid! Nagu varemgi, saame selle koodi funktsiooni salvestada, et vältida selle ilmumist lehe laadimisel.

Samuti vaadake, kuidas forEach () siin rakendatakse? Kuna kasutasime querySelectorAll (), saime Nodelist. Meie loendi igale elemendile õige klassi määramiseks pidime oma nimekirja läbi vaatama ja iga eraldi määrama. ForEach () meetod pakub selle saavutamiseks lihtsat viisi, kuid sama võime teha ka silmusklassika jaoks.

Lõpuks kasutasime meetodeid .classList ja .add. .add on ainulaadne .classList meetodi osas, kuna see juhendab meie eesmärki see klass lisama. Samuti võime antud klassinime eemaldamiseks või aktiveerimiseks kasutada atribuute nagu .remove () või .toggle ()!

Meie arsenalis olevate .style () ja .classList abil peaksime olema võimelised JS-is lahendama kõiki stiiliprobleeme!

Sisu kohandamine

Kaks taktikat, mida siin arutame, on meie teksti sisu kohandamine ja uute elementide sisestamine DOM-i.

Teksti sisu

Meie teksti sisu kohandamine järgib .style () -ga sarnast ülesehitust. Esmalt peame oma sisu sihtima, siis saame kohandada nende teksti sisu, rakendades .textContent.

const headerTitle = document.querySelector ('. main-title');
headerTitle.textContent = "Matt'i Lambda minutid."

Kasutades textContent, määrame oma .main-pealkirja teksti ümber selleks, et lugeda meie äsja määratud Matt'i Lambda minutit. Päris lihtne ja vinge, eks?

Meie sisu lisamine

Üksuste lisamiseks meie DOM-i peame midagi looma, suunama asukoha selle paigutamiseks, lisama sisu ja seejärel sinna asetama. Näitame, et loome uue lõigu, mis paigutatakse meie põhisisu.

1. samm: looge lõik:

const newParagraph = document.createElement ("p");

Elemendi loomiseks kasutame .createElement ().

2. samm: sihtkoha asukoht:

const location = document.querySelector ('. main-content');

Me teame seda ülalt, lihtne värk nüüd!

3. samm: lisage sisu meie uude elementi.

Nüüd, kui me teame, kuidas lisada .textContent (), teeme seda meie uuele p:

newParagraph.textContent = "Õppisime just seda tegema: WOOHOO!"

4. samm: lisage meie asukoht:

Saame selle saavutamiseks kasutada mõnda meetodit, kuid see sõltub sellest, kuhu me oma põhisisus uut p-d tahame. Sel juhul soovime selle lisada oma sisu lõppu, nii et kasutame selleks appendChild () meetodit.

asukoht.appendChild (newParagraph);

Vioola! Lisasime oma uue sisu põhisisu! Kui soovite rohkem teada saada, kuidas loodud üksusi DOM-i paigutada, vaadake mõnda uut meetodit siit ja siit! Neid pole vaja meelde jätta, kuid see aitab teil leida uusi viise DOM-i manipuleerimiseks.

Tõmba otsad kokku

Seal on teil inimesed, sissejuhatus DOM-i manipuleerimisse! Loodan, et hakkate neid uusi meetodeid katsetama ja näete, milliseid toredaid asju saate DOM-iga segades saavutada!

Kui teil on küsimusi või kommentaare, võtke minuga ühendust Twitteris või siin minu väljaande lehel.

Nagu ikka, õnnelik kodeerimine!