A "DOM" egy olyan kifejezés, amelyet sokat használnak a front-end web tervezésében és fejlesztésében. A "Document Object Model" rövidítése, és a weboldalak alapvető része.
Bármennyire is fontos a DOM, sokan nem értik. Valójában évekig programozhat weboldalakat anélkül, hogy sokat megtudna róla. De a front-end technológia fejlődésével a DOM megértése egyre fontosabbá válik.
A DOM szerződés megértése
Az objektum-orientált programozásban van egy interfésznek nevezett konstrukció. Egy felület nem csinál semmit önmagában. Ehelyett szerződést hoz létre. Azt mondja, hogy bármi mással kölcsönhatásba léphet, amennyiben betartja az interfészszerződés szabályait.
Az interfész birtokában a program bármely része ellenőrzött és kiszámítható módon kölcsönhatásba léphet a program bármely más részével. A felület azt is lehetővé teszi, hogy a program egyik része működjön együtt bármely más részével, még akkor is, ha nem tud semmit a felület másik oldalán lévő programrészről.
Az interfész olyan, mint egy elektromos aljzat a falában. A készüléknek nem kell tudnia, honnan származik az áram, amíg a feszültség megfelelő. A sarokban lévő transzformátornak nem kell tudnia, hogy mit működtet. Csak a megfelelő feszültséggel kell áramot küldenie a házába.
A DOM egy interfészréteg a weboldal és az azt létrehozó és módosító kód között. Amikor meglátogat egy webhelyet, látja, hogy a böngésző hogyan jeleníti meg a webhely DOM-ját. Amikor HTML-t ír, valójában a DOM API-ját (programozási felület) használja.
A DOM szabványt az úgynevezett szervezet tartja fenn a világháló konzorciumvagy W3C. Ők alkottak rendkívül részletes dokumentáció, amely meghatározza a DOM-ot alapértelmezett.
Ezen a ponton arra gondolhat, hogy nem túl jó munkát végeznek. Végül is olyan sok problémát okoz a böngészők közötti kompatibilitási problémák.
A probléma nem a standarddal van. Maguk a böngészők. Számos böngésző olyan funkciókat adott hozzá a DOM megvalósításhoz, amelyek nem felelnek meg a W3C szabványoknak. Néha ez a funkció népszerűvé válik, és beépül a DOM szabványba, és más böngészőket kényszerít felzárkózásra.
A másik probléma az, hogy egyesek továbbra is olyan böngészők régebbi verzióit használják, amelyekben nincs beépítve a legújabb DOM szabvány. És néha a böngészők nem megfelelően hajtják végre a szabványt.
Hogyan épül fel a DOM
Úgy gondolhat a DOM-ra, mint egy fára. A elem a törzs, és a benne lévő összes elem ág. Amikor HTML elemeket fészkel be egy szülő elem belsejébe, akkor tulajdonképpen ennek az ágnak az elágazásait hozza létre. Az egyes ágak megfelelő kifejezése a "csomópont".
A fa szerkezete logikai kapcsolatokat hoz létre a csomópontok között, például egy családfát. Minden csomópontnak lehet szülője és őse, amelyből elágazik. Testvéreik lehetnek. És a csomópontoknak lehetnek gyermekeik és leszármazottaik. Az ilyen kifejezésekkel való gondolkodás sokat segít, ha a JavaScriptet és a CSS-t használja a DOM-hoz való együttműködésre.
Hogyan hat a HTML a DOM-ra
A DOM úgy határozható meg, hogy létrehoz egy dokumentumobjektumot a dokumentum felületével. A HTML-kód a legközvetlenebb módja a dokumentum létrehozásának. A HTML segítségével egyszerűen meghatározhatja a dokumentumot a hagyományos programozás nélkül.
Ha most kezdi a HTML használatát, íme öt tipp a megismerkedéshez.
A HTML minden weboldal gerincét képezi. Ha még kezdő vagy, ismerkedj meg a HTML megértésének alapvető lépéseivel.
A HTML egyszerűbb és elnézőbb, mint a hagyományos programozási nyelvek. Ez megkönnyíti a DOM-tal való kapcsolattartást a kezdő webdesignerek számára.
Hogyan hat a CSS a DOM-ra
Miután a HTML strukturálta a DOM dokumentumot, a CSS meg tudja stílusozni azt a dokumentumot. Ehhez képesnek kell lennie a stilizálni kívánt elemek megtalálására. Ezt néhány módon teszi.
A dokumentum csomópontjaihoz úgy férhet hozzá, hogy az elemekre név szerint hivatkozik és. A CSS hivatkozással közvetlenül is hozzáférhet az elemekhez osztály és id nevek. Az osztály stílusát több elemre alkalmazzák, így egyszerre stílusozhatja őket. Ezzel szemben az id stílus csak egyetlen elemre alkalmazza a változásokat.
A családfaszerkezetet CSS-sel és a finomhangolással is elérheti a nagyobb ellenőrzés érdekében. A CSS-szelektorok lehetővé teszik több elem kiválasztását, és rengeteg trükköt adnak azok megtalálásához. Kereshet gyermekeket származásuk, osztálykombinációk és még sok más alapján.
Hogyan hat a JavaScript a DOM-mal
A JavaScript irányítja a legtöbbet a dokumentum felett, mert a JavaScript egy tényleges programozási nyelv, amely objektumokkal, folyamatszabályozással, változókkal stb. A DOM számos olyan felületet biztosít, amelyek lehetővé teszik a JavaScript számára a dokumentum, az elemek és más csomópontok manipulálását.
Összefüggő: Mi a JavaScript?
A JavaScript hozzáadhat és eltávolíthat csomópontokat, valamint megváltoztathatja a stílusukat. És a JavaScript figyelni tudja a dokumentum eseményeit, például az egérmutatót az elem fölé, a kattintást és a gombok megnyomását.
A JavaScript a CSS-hez hasonló módon kereshet és navigálhat a dokumentumfán. Képes elemeket találni azonosító és osztály szerint. És lekérheti a gyermek elemek listáját tömbként.
A webfejlesztés és a DOM jövője
Az internet a kezdetek óta sokat változott. Az első időkben a JavaScript-et leginkább speciális effektusokhoz és egyszerű adatmegjelenítésekhez használták. A legtöbb weboldal nem volt sokkal több, mint digitális prospektus. Az AJAX mindezt megváltoztatta.
Az AJAX lehetővé teszi a webhelyek számára, hogy menet közben frissítsék a szerverről megjelenített adatokat az oldal újratöltése nélkül. Az AJAX előtt minden adatváltozás csak az oldal újratöltésekor volt látható, vagy a felhasználó másik oldalra navigált.
Az AJAX után a webalkalmazások egyre népszerűbbek lettek. Az internet már nem egyszerű statikus weboldalak és néhány magas funkcionalitású alkalmazás, például az eBay gyűjteménye. Most az internet majdnem egy második operációs rendszer, tele nagyon funkcionális alkalmazásokkal.
A felhasználók elvárásainak növekedésével a technológiának lépést kell tartania. A JavaScript nem a legerősebb vagy leggyorsabb nyelv. Emellett számos olyan problémát is szenved, mint a lebegőpontos hibák, amelyek kevésbé kívánatosak a fejlesztők számára. Itt jön be a WebAssembly.
A WebAssembly a natív kód számos előnyét hozza a böngészőbe, beleértve a nagyobb sebességet és a jobb hardverelérést. Ez lehetővé teszi a programozók számára, hogy más nyelveket használjanak olyan webhelyek készítéséhez, mint a C ++ és a Rust.
De még a WebAssembly által nyújtott hatalmas fejlesztések ellenére is, a DOM továbbra is ott lesz, következetes felületet biztosítva a kód és a böngészőben megjelenített adatok között.
Csökkentse a szem megterhelését és növelje az akkumulátor élettartamát a Microsoft Outlook sötét módba kapcsolásával.
- Programozás
- HTML
- CSS
- Dokumentum objektum modell
Lee teljes munkaidős nomád és polihisztor, sok szenvedéllyel és érdeklődéssel. E szenvedélyek egy része a termelékenység, a személyes fejlődés és az írás körül forog.
Iratkozzon fel hírlevelünkre
Csatlakozzon hírlevelünkhöz, amely műszaki tippeket, véleményeket, ingyenes e-könyveket és exkluzív ajánlatokat tartalmaz!
Még egy lépés…!
Kérjük, erősítse meg e-mail címét az imént elküldött e-mailben.
