Mi a dokumentumobjektum-modell, és miért kell tudni, hogyan kell használni.

Tehát tanulmányozta a HTML-t, létrehozta az első címkéit, megismerte a CSS-t, gyönyörű formákat, csodálatos gombokat, érzékeny oldalakat készített, és elkezdte megmutatni mindenkinek, milyen csodálatos ez az egész.

De aztán úgy dönt, hogy szeretne még egy lépést tenni a tanulásban, és elkezdte csodálkozni magában: „Hogyan adhatok animációt az oldalamhoz? Szeretném, ha ez a gomb animációt hozna létre az oldalamon, amikor rákattintottam! "

Nos, itt jön a DOM a probléma megoldására. Valószínűleg sokat hallott róla, de lehet, hogy még nem tudja, mi ez és milyen problémákat old meg. Szóval ássunk be.

Szóval, mi a DOM?

Ismered mindazt a fantasztikus animációt, amelyet látsz a közeledben, és arra gondolsz, hogy "Wow, bárcsak csinálhatnék valami hasonlót"? Mindezek az animációk a DOM manipulálásával készülnek. Most elmagyarázom neked, hogyan kezdheted el a manipulálást, és hűvösebbé tedd a weboldaladat.

A DOM (Document Object Model) egy felület, amely azt ábrázolja, hogy a böngésző miként olvassa el HTML és XML dokumentumait. Lehetővé teszi egy nyelv (JavaScript) kezelését, strukturálását és stílusát a webhelyén. Miután a böngésző elolvasta a HTML dokumentumot, létrehoz egy reprezentációs fát, az úgynevezett dokumentumobjektum modellt, és meghatározza, hogy az adott fa hogyan érhető el.

Előnyök

A DOM manipulálásával végtelen lehetőségeid vannak. Létrehozhat olyan alkalmazásokat, amelyek frissítés nélkül frissítik az oldal adatait. Ezenkívül létrehozhat olyan alkalmazásokat, amelyeket a felhasználó testreszabhat, majd frissítés nélkül megváltoztathatja az oldal elrendezését. Elemeket húzhat, áthelyezhet és törölhet.

Mint mondtam, végtelen lehetőségeid vannak - csak ki kell használnod a kreativitásodat.

A böngésző képviselete

A fenti képen láthatjuk a reprezentációs fát és azt, hogy hogyan hozza létre a böngésző. Ebben a példában négy fontos elem van, amelyeket sokat fog látni:

  1. Dokumentum : Az összes HTML dokumentumot kezeli .
  2. Elemek : A HTML-ben vagy XML-ben található összes címke DOM-elemmé alakul.
  3. Szöveg : A címkék összes tartalma.
  4. Attribútumok : Egy adott HTML elem összes attribútuma . A képen a class = ”hero” attribútum a < p> elem attribútuma .

A DOM manipulálása

Most eljutunk a legjobb részhez: elkezdjük manipulálni a DOM-ot. Először egy HTML elemet hozunk létre példaként, hogy megnézzünk néhány módszert és az események működését.

      Entendendo o DOM (Document Object Model) 

00:00:00

Start Stop Reset

Nagyon egyszerű, igaz? Most többet fogunk megtudni a DOM módszerekről: hogyan szerezzük be az elemeinket és hogyan kezdjünk manipulálni.

Mód

A DOM-nak nagyon sok módszere van. Ezek a kapcsolatok a csomópontjaink (elemeink) és az események között, amiről később többet megtudunk. Megmutatom a legfontosabb módszereket és azok használatát. Sokkal több módszer létezik, amelyeket nem fogok itt bemutatni, de itt mindegyik módszert megtekintheti.

getElementById ()

Ez a módszer az átadott névazonosítót tartalmazó elemet adja vissza . Mint tudjuk, az id-nek egyedinek kell lennie, ezért nagyon hasznos módszer csak a kívánt elem megszerzéséhez.

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

myStart : A változónév, amely hasonlít az azonosítónkhoz, átment

start : id átment. Ha pedig nincs azonosítónk ezzel a konkrét névvel, akkor az null értéket ad vissza .

getElementsByClassName ()

Ez a módszer adja vissza egy HTMLCollection mindazon elemeket tartalmazó egyedi neve osztály telt el.

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

myContainer : Az osztályunkhoz hasonlóan változó nevünk megfelelt.

.konténer : osztályunk átment. Abban az esetben, ha nincs egyetlen osztályunk sem az adott névvel, az null értéket ad vissza .

getElementsByTagName ()

Ez ugyanúgy működik, mint a fenti módszerek: egy HTMLCollection-t is ad vissza , de ezúttal egyetlen különbséggel: az összes elemet visszaadja a címke nevével.

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

gombok : Változónév, amely hasonlónak tűnik a címke nevünkhöz.

gomb : címke neve, amelyet meg akarunk szerezni.

querySelector ()

Visszaadja az első elemet , amelyen átment az adott CSS-választó . Csak ne feledje, hogy a választónak követnie kell a CSS szintaxist . Abban az esetben, ha nincs választója , az null értéket ad vissza .

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

resetButton : A váltónév, amely hasonlónak tűnik a választónkhoz, átment.

#reset : választó telt el, és ha nincs választó , hogy mérkőzést visszatér null .

querySelectorAll ()

Nagyon hasonló a querySelector () metódushoz, de egyetlen különbséggel: az összes elemet visszaadja, amely megfelel a CSS-választóval . A választónak követnie kell a CSS-szintaxist is . Abban az esetben, ha nincs választója , az null értéket ad vissza .

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

myButtons : A változónév, amely hasonlít a kiválasztóinkra, megfelelt.

#Buttons : választó telt el, ha nincs szelektor , amely megegyezik visszatér null .

Ezek a leggyakrabban használt DOM módszerek. Számos további módszer használható, például a createElement (), amely új elemet hoz létre a HTML-oldalán, és a setAttribute (), amely lehetővé teszi új attribútumok beállítását a HTML elemek számára. Ön is felfedezheti őket.

Ismét megtalálja az összes metódust itt, a bal oldalon, a Metódusokban . Nagyon ajánlom, hogy vessen egy pillantást a többiekre, mert hamarosan szüksége lehet valamelyikre.

Most megismerkedünk az Eseményekkel - végül is nélkülük nem készíthetünk animációkat az oldalainkon.

Események

A DOM elemeknek vannak módszereik , amint az imént tárgyaltuk, de vannak eseményeik is . Ezek az események felelősek azért, hogy oldalunkon interaktivitás legyen lehetséges. De itt van egy dolog, amit nem tudhat: az események is módszerek .

kattintson

Az egyik leggyakrabban használt esemény a kattintási esemény. Amikor a felhasználó rákattint egy adott elemre, akkor végrehajt valamilyen műveletet.

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

Az addEventListener () paraméterek a következők:

  1. A kívánt esemény típusa (ebben az esetben „ kattintson ”).
  2. Visszahívási funkció
  3. A useCapture alapértelmezés szerint hamis. Jelzi, hogy szeretné-e „rögzíteni” az eseményt.

válassza

Ez az esemény arra szolgál, ha valamit el akar küldeni , ha egy adott elem ki van jelölve. Ebben az esetben fogunk elszállítást egy egyszerű figyelmeztetés .

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

Ezek a leggyakrabban használt események. Természetesen sok más esemény is használható, például a fogd és vidd események - amikor a felhasználó elkezdi húzni valamelyik elemet, akkor végezhet valamilyen műveletet, és amikor ezt az elemet eldobja, akkor újabb műveletet hajthat végre.

Most meglátjuk, hogyan léphetjük át a DOM-ot és használhatunk néhány tulajdonságot.

Áthaladás a DOM-on

Átlépheti a DOM-ot, és használhat néhány tulajdonságot, amelyeket most látni fogunk. Ezekkel a tulajdonságokkal visszaadhat elemeket, megjegyzéseket, szövegeket és így tovább.

.childNodes

Ez a tulajdonság adja vissza nodeList gyermek csomópontok az adott elem. Visszaadja a szöveget, a megjegyzéseket stb. Tehát, ha használni szeretné, legyen óvatos.

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

.első gyerek

Ez a tulajdonság az adott elem első gyermekét adja vissza.

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

.nodeName

Ez a tulajdonság az adott elem nevét adja vissza. Ebben az esetben elhaladtunk egy div-vel , így visszaadja a „ div ” -t.

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

.nodeValue

Ez a tulajdonság a szövegekre és a megjegyzésekre vonatkozik , mivel visszaadja vagy beállítja az aktuális csomópont értékét . Ebben az esetben, mivel átestünk egy div-n, null értéket ad vissza .

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

.nodeType

Ez a tulajdonság az adott elem típusát adja vissza . Ebben az esetben „ 1 ” -et ad vissza .

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

De mit is jelent az „ 1 ”? Alapvetően az adott elem nodeType . Ebben az esetben ez egy _ELEMENT_NODE_, és null értéket ad vissza. Ha ez egy attribútum lenne, akkor „ 2 ” -ként kapnánk vissza nekünk és az attribútum értékének.

A nodeTypes-ről itt olvashat bővebben .

Elemek

Ezek a tulajdonságok a fentiek helyett csak elemeket adnak vissza hozzánk . Gyakrabban használják és ajánlják őket, mert kevesebb zavart okozhatnak és könnyebben érthetők.

.parentNode

Ez a tulajdonság a megadott csomópont szülőjét adja vissza.

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

.firstElementChild

Visszaadja az adott elem első gyermek elemét.

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

.lastElementChild

Visszaadja az adott elem utolsó gyermek elemét.

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

Ezek egyike a DOM számos tulajdonságának. Nagyon fontos, hogy ismerje a DOM alapjait, működését, módszereit és tulajdonságait, mert valamikor szüksége lehet rá.

Következtetés

A DOM számos fontos API-t biztosít számunkra fantasztikus és innovatív alkalmazások létrehozásához. Ha megértette az alapjait, hihetetlen dolgokat hozhat létre. Ha többet szeretne megtudni a DOM-ról, ide kattintva elolvashatja az összes MDN-dokumentumot.

? F ollow me on Twitter!

F ollow rám GitHubról!

Távoli lehetőséget keresek, ezért ha van olyan, akit szívesen hallanék róla, kérem lépjen kapcsolatba velem!