DOM programozás: A weboldalak manipulálása kóddal

Közzététel: Támogatása segít fenntartani a webhely működését! Az ezen az oldalon javasolt szolgáltatások némelyikén referenciadíjat keresünk.


A dokumentumobjektum-modell vagy a DOM leírja, hogy egy HTML oldal minden eleme hogyan kapcsolódik maga a dokumentumhoz.

Lényegében minden HTML, XHTML vagy XML oldal, amelyet egyszer feltöltöttek az internetre, dokumentummá válik. A DOM ezeket a dokumentumokat fa struktúrának tekinti. Maga a dokumentum a legfelső struktúra, és az oldalon minden elem objektumként van ábrázolva.

Ez azt jelenti, hogy minden kép, minden bekezdés, minden címsor és így tovább egy különálló objektum, amelynek saját kapcsolata van a dokumentummal.

Azáltal, hogy egy adott elemet megnevezik, a webfejlesztők módosíthatják azt. Ez azt jelenti, hogy a webfejlesztők lekérhetik és beállíthatják tulajdonságaikat.

A DOM lehetővé teszi elemek vagy objektumok hozzáadását és eltávolítását. Végül lehetővé teszi a webfejlesztők számára, hogy rögzítsék és reagáljanak a felhasználó vagy a böngésző műveleteire, hatékonyan kezelve az eseményeket.

A DOM rövid története

A DOM története a böngészőháborúk napjaiban és az első szkriptnyelvek kiadásában nyúlik vissza.

Miután mind a Netscape Navigator, mind a Microsoft Internet Explorer kiadta saját JavaScript verzióit, a fejlesztők felfedezték egy felület szükségességét, amely lehetővé teszi az oldal elemeinek elérését a szkriptnyelvekkel.

Természetesen mindegyik böngészőnek megvan a saját módszere, de ez sok kompatibilitási problémát okozott, mivel a böngésző gyártói új funkciók hozzáadásával megpróbálták felülmúlni egymást..

Végül a W3C elkezdte az XML DOM specifikációjának kidolgozását, más néven 1. szintű DOM-ot, amelyet állítólag minden böngészőben hordozni kellett..

Azt is tervezték, hogy működjön minden olyan programozási nyelvnél, amely képes manipulálni az XML dokumentumokat. Ezt a specifikációt 1998 végén fogadták el szabványként. A jelenlegi verzió a DOM 4, a W3C ajánlása 2015-től.

A DOM két nézete

A DOM két részből áll; a mag és a HTML. A mag a HTML rész alapja, és azt a funkciót ábrázolja, amely az XML dokumentumokhoz szükséges a dokumentum szerkezetének, elemeinek és attribútumainak manipulálásához..

A HTML rész meghatározza az adott HTML elemeket és azok funkcionalitását. Mint ilyen, a DOM API-ként és objektumként is tekinthető.

DOM mint API

Alkalmazás-programozási felületként (API) használják mind HTML, mind XML dokumentumokhoz. Ez ad egy szabványos objektumkészletet, amelyet ezekben a dokumentumokban használnak, és modellként szolgál arra is, hogyan lehet ezeket az objektumokat kombinálni, elérni és manipulálni.

DOM mint objektum

A DOM objektummodellje arra a tényre utal, hogy a dokumentumokat és az elemeket objektumokként definiálják. Ebben az értelemben meghatározza:

  • A dokumentum ábrázolásához és manipulálásához használt interfészek és objektumok
  • Viselkedésük és tulajdonságuk
  • A kapcsolatok.

DOM felépítése

Szerkezetileg a DOM nagyon hasonlít az általa modellezett dokumentumra. A dokumentum minden elemét objektumnak vagy csomópontnak tekintik, amely hierarchikusan van elrendezve.

Minden csomópontnak van funkciója és azonosítója, és minden csomópontnak tetszőleges számú gyermekcsomópontja is lehet. A leggyakoribb csomópontok az elemek, a szöveg és az attribútumok.

Elem csomópontok

Az elemcsomópontok a HTML-kódban egyedi címkék vagy címkepárok. Lehetnek gyermekcsomópontok, amelyek lehetnek más elemek vagy szöveges csomópontok.

Szöveges csomópontok

A szöveges csomópontok a HTML-címkék közötti tényleges tartalom. Általában van egy szülő csomópont és néha testvérek csomópontok, de nem rendelkezhetnek saját gyermek csomópontokkal.

Attribútum csomópontok

Az attribútumcsomók kissé különlegesek. Nincsenek szülő csomópont, gyermekek vagy testvér csomópontok, hanem ehelyett a HTML címkékben meghatározott attribútumokat képviselik, például a href attribútumot a címkékben vagy az src attribútumokat az img címkékben.

Új attribútum létrehozható a document.createAttribute () használatával, majd hozzárendelheti egy elem csomóponthoz és beállíthatja annak értékét. Az attribútumok hivatkozásának másik módja az elem attribútumainak közvetlen elérése a getAttribute () használatával és az setAttribute () módszer használatával az érték beállításához.

Az attribútumokról beszélve érdemes megemlíteni, hogy a HTML-címkékkel használt legtöbb attribútum viszonylag egyszerű, egyetlen értékből áll, amely egy adott tulajdonsághoz kapcsolódik, amely az adott címkéhez tartozik. Vannak azonban olyan stílusjellemzők is, amelyek összetettebbek lehetnek.

A stílusattribútumok a CSS segítségével kerülnek alkalmazásra. Használhatja stílusok alkalmazására az egyes címkékre, az adott típusú összes címkékre, vagy az osztályok használatával stílus attribútumokat is hozzárendelhet.

A dolgok további bonyolítása érdekében az adott elem stílusai örökölhetők ezen források bármelyikéből. Ezeket a stílusokat is manipulálhatja és megváltoztathatja, ha megváltoztatja a címke stílusatribútumát, vagy pedig a címke osztály attribútumait használja..

Ennek végrehajtása azonban megváltoztatja az elem összes stílusparaméterét, és bizonyos esetekben ez nem praktikus, különösen, ha csak egyetlen stílusparamétert akar megváltoztatni..

Szerencsére a stílusjellemzők különböznek a többi attribútumtól. Objektumokként vannak definiálva, és tulajdonságaik vannak minden lehetséges paraméterhez. Ezek a tulajdonságok ezután hozzáférhetők, frissíthetők és egyéb módon manipulálhatók.

A DOM használata

Mivel minden dokumentum objektum is, kiindulási pontként szolgál a benne található többi csomópont manipulálásához. Ezekre a gyermekcsomókra a következő módszerekkel lehet hozzáférni és manipulálni:

  • getElementById ()
  • getElementsByTagName ()
  • createElement ()
  • createAttribute ()
  • createTextNode ().

A csomópontokat dinamikusan is hozzáadhatja, frissítheti és eltávolíthatja a következő módszerekkel:

  • insertBefore ()
  • replaceChild ()
  • removeChild ()
  • AppendChild ()
  • cloneNode ().

A DOM közvetlenül kapcsolódik a HTML-hez, CSS-hez és JavaScript-hez, mivel tükrözi a szabványok által meghatározott címkéket és attribútumokat, valamint API-ként szolgál az ügyféloldali szkriptek készítéséhez.

Erőforrások

Az erőforrások következő listája részletes áttekintést nyújt a DOM-ról, és mind kezdőknek, mind haladó felhasználóknak egyaránt alkalmas. Ide tartozik egy referencialista, valamint források példákkal.

  • JavaScript és a DOM sorozat: ez egy nagyon részletes oktatóanyag-sorozat, amely nagyon részletesen leírja a JavaScript használatát a DOM kezelésére.
  • JavaScript DOM oktatóanyagok: interaktív oktatóanyagok sorozata, amelyek megtanítják a DOM elérését és a JavaScript használatát. A JavaScript előzetes ismerete feltételezhető, azonban érdemes megemlíteni, hogy nem használnak speciális könyvtárakat.
  • DOM csomópontok: a DOM csomópontok nagyon alapos áttekintése kezdőknek, akik szeretnék megismerni a DOM felépítését és mely csomópontokat tartalmaz.
  • JavaScript DOM – Gyakorlatok, gyakorlat, megoldás: különféle gyakorlatok sorozata, amely magában foglalja a DOM-ot, kezdve az egyszerű gyakorlattól a bonyolultabbig.
  • A W3C dokumentumobjektummodell (DOM): ez a W3C által kiadott útmutató bevezető és kezdőbarát áttekintést nyújt a DOM-ról, a történelemről és működéséről.
  • Bevezetés a DOM-hoz: a DOM rövid, fogalmi bevezetése, amelyet a Mozilla Developer Network közzétett, amely elmagyarázza, hogy miként nyújt struktúrát a HTML és XML dokumentumokhoz, és hogyan lehet hozzá hozzáférni.
  • W3C DOM4: a W3C legfrissebb DOM-ajánlása, amely 2015-től származik, amely a DOM áttekintését és részletes specifikációit tartalmazza.
  • DOM referencia: a Microsoft fejlesztői hálózatának közzétett praktikus referencialista, amely tartalmazza a tulajdonságokat, módszereket, eseményeket és egyebeket.

Könyvek

Ha inkább a könyvekből tanul, sok lehetőség van. A listán szereplő könyvek nagyon részletesen leírják a DOM-ot, annak működését és a dokumentumok manipulálását.

  • DOM szkriptek: Webdesign JavaScript-kel és a Document Object Model (2005), készítette Jeremy Keith: Ez a könyv gyors és egyszerű referenciát nyújt azok számára, akik nem kódszakértők, de gyorsan meg akarják tanulni, és ki akarják használni a JavaScript és a DOM előnyeit a hozzáadáshoz. a weboldalak funkcionalitása. Rengeteg példát tartalmaz, és útmutatást nyújt az olvasók számára több valós projekt kidolgozásában.
  • Dokumentumobjektum-modell (2002), Joe Marini: ennek a könyvnek a szerzője segít megtanulni a DOM fogalmait, kialakítását, elméletét és eredetét. A könyv egészében a DOM-ot fogja használni a dokumentum csomópontjainak és tartalmának ellenőrzésére, navigálására és manipulálására; ezután tanuljon olyan hasznos alkalmazások készítéséről, amelyeket könnyen átvihetők bármilyen DOM-kompatibilis megvalósításba újrakódolás nélkül.
  • DOM megvilágosodás: A JavaScript és a modern DOM (2013) feltárása, készítette Cody Lindley: e könyv segítségével megtanulja, hogyan lehet hatékonyabban kezelni a HTML-t a DOM könyvtár használata nélkül, a Document Object Model (DOM) szkriptelésével. Rengeteg könnyen emészthető példával a szerző teljes áttekintést nyújt a modern DOM-koncepciókról annak bemutatására, hogy a különféle csomópont-objektumok hogyan működnek.

Menj tovább és menj át a DOM-n

A DOM megértése az egyik alapvető fogalom minden törekvő webfejlesztő számára.

A legjobb az egészben, hogy a használat elindításához nincs semmilyen speciális eszköz. Csak egy szkriptre és a kívánt böngészőre van szüksége. Amint létrehoz egy szkriptet, és beilleszti azt a weboldalra, elkezdi használni a dokumentum vagy az ablakelemek API-ját a dokumentum különféle módon történő manipulálásához..

A fenti erőforrások szilárd kiindulópontként szolgálnak a DOM áthaladásához.

További olvasmányok és források

Több útmutató, oktatóanyag és infographics található a kódoláshoz és a weboldal fejlesztéshez:

  • Jó HTML összeállítása: ez egy jó bevezetés a jól formált HTML írásához és a HTML érvényesítő szoftver használatához.
  • CSS3 – Bevezetés, útmutatók és források: ez egy remek hely a weblapok elrendezésének megtanulására.
  • ASP.NET források: Ez az útmutató segítséget nyújt a Microsoft .NET keretrendszerének használatához weblapok készítéséhez.

HTML kezdőknek – Végső útmutató

Ha igazán szeretne HTML-t tanulni, akkor készítettünk egy könyv hosszú cikket, HTML kezdőknek – Végső útmutató.

És ez valóban a végső útmutató; az elejétől a mesterig elvisz.

HTML kezdőknek - Végső útmutató
HTML kezdőknek – Végső útmutató

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