Tanulságai javascript diy - 33. lecke
HARMADIK RÉSZ
33. Munka oldalak
DOM elemek
- nodeList objektum;
- tulajdonságok eléréséhez elemek;
- módszerek való hozzáférés az elemek;
- Egyes módszerek létrehozásának elemek.
Amikor dolgozik HTML, találkoztunk különböző gyűjteményekben: document.images. document.links. document.all stb Ezek a gyűjtemények nem tartoznak a DOM 3 interfészt, és egyfajta „primitivizmus” megmaradt a DOM 0.
Miért felhívni a figyelmet, hogy az?
Keverés ezeket a fogalmakat vezethet munkaszüneti vagy „görbe” szkripteket.
Az előnye, hogy DOM 3, hogy mi magunk is létrehozhatunk olyan gyűjtemény # 151; mennyire releváns és nem releváns integrálni.
objektum nodeList
Mindegyik elem egy csomópont nodeList tárgy - tárgy, amelynek számos tulajdonsággal.
El lehet képzelni, nodeList mint egy hash. Például az attribútum lista lehet tekinteni, mint egy sor „kulcsok” (attribútumneveknek :. igazítása szín, stb) és a „Value” (attribútum értékek :. Center fekete, stb)
Bizonyos esetekben, a munka az a tárgy tartalmának nodeList célszerű átalakítani a tartalom rendszeres tömbök. Például, azt szeretnénk, hogy egy sor az összes címkét, amelyek
.ChildNodes ingatlan elem
listáját adja vissza minden gyermek csomópontok.Állítsa be a „szűrő”, amely kiválasztja csak egy eleme csomópontok (NodeType == 1).
Építsd egy tömb, amely a címke nevét (nodeName).
var allBodyTags = new Array;
var elmBody = document.getElementsByTagName ( "test") [0];
for (var i = 0; i
// ha a fajta csomópont - elem
ha a (elmBody.childNodes [i] .nodeType == 1)
<
// növeljük a return array
// nevét elemek
allBodyTags = allBodyTags.concat (elmBody.childNodes [i] .nodeName);
>
>
Tulajdonságok elemeinek elérésére
Tulajdonságok alább csak a DOM elemeket. A HTML-ben úgy értelmezik segítségével címkéket.
(Megint emlékeztetni, hogy ez nem jelent egyet Ha összehasonlítjuk a tételt egy futópad, akkor címkék -. Ez a rajt és a cél az elemeket, amelyek nem rendelkeznek a záró címke, a fogalmak ugyanaz ..)
Néhány ilyen tulajdonságok állnak szöveges csomópontok, de beszélni róla egy külön fejezetet.
Mindegyik elem tulajdonságai, amelyek tükrözik a hely a DOM hierarchiában. Ezek lehetővé teszik, hogy navigáljon az összes elemet a fa. Íme néhány az egyes elemek tulajdonságait a kapcsolat:
Visszaadja a szülő elem. A rendszer a helyszínen HTML szülő elem maga a dokumentum, a fej és a test - HTML csomópont, stb
A szöveges csomópontok is támogatja ezt a funkciót.
A dokumentum csomópont, persze, ez a funkció nem áll fenn.
Lehetséges beruházások „matroshechnogo” típusú hozzáférés a „nagyapja” vagy „dédapja”:
Listája leszármazottai a csomópont (Nodelist objektum). Amikor dolgozik HTML, ez a funkció csak az elemek. Szöveg csomópontok és attribútum csomópont nincs gyermekük.
Csomópont - a szülő csomópontot.
N - utódok száma a listában.
Böngészők Netscape család érzékelik hiányosságokat a kód (üres sorokat vagy átlép egy másik vonal), mint a szöveges csomópontok.
Ebben a példában egy egyszerű dokumentumot:
A csomópont egy gyermeke dokumentumot: „html” elem.
Element „html” az ötletet két leszármazottai: elem „fej” és a „test” elem. De böngészők Netscape család minden gyermek 4: sortörés előtt
. megfelelően . sortörés előtt és ténylegesen . Ezt figyelembe kell venni, nézett egy listát childNodes a hurok.A természetben, mint ha van egy Normalizál () módszer. amely megoldja a problémát, de a HTML elemek nem reagálnak rá. Ezért csak azt tudom ajánlani „kézműves” módon.
Ez a módszer egy hátránya: az kizárja a forgalomból szöveges csomópont, nem csak a „bal”. Bár ez olyan, mint látni: talán mégis hasznos munkát, az elszámolási a búzát a pelyva, és így egyértelműbb szétválasztása az elemek és a szöveg csomópontok.
«# 133; normális gengszterek mindig megy körül”
Miért épít egy sor nevét elemek nevei (nodeName)?
NodeType mert mind egy egységet, és nodeValue. Ahogy emlékszem, - null. A tulajdon a megfelelő hosszúságú, normalizált kilátás.
Van egy másik módja, hogy megszabaduljon a kisüzemi ezt glitch: csak írni a HTML kódot egy hosszú sorban.
Pointerek a megfelelő elemeket childNodes listán (lásd. A fenti táblázatban).
.firstChild elem - az ugyanaz, mint a .childNodes [0].
.lastChild elem - az ugyanaz, mint a .childNodes elem [.childNodes.length-tag 1].
Lásd szülő eleme, amely egy „család» childNodes.
Ezeket a mutatókat fordult már, hogy magukat „a családtagok» childNodes.
Természetesen, hogy a childNodes [0] elérhető prevSibling,
míg a childNodes [childNodes.length-1] haszontalan nézni nextSibling.
A Netscape böngésző család a fenti okból néhány csomóval több, mint amire szüksége van. Ezért ezeket a tulajdonságokat nem mindig kényelmes.
Módszerek való hozzáférés az elemek
Ebben az áttekintésben a leckében megnézzük néhány alapvető módon vehető igénybe az elemek. Az első csoport a módszerek közé tartozik gyökérobjektum dokumentumot. amelyek közül néhány már használják.
Módszerek a második csoport lehet alkalmazni maguk az elemek.
módszer az objektum dokumentum
Ezzel a módszerrel már élvezte. Ő utal, hogy az elem az azonosítót, amely argumentumként (ne felejtsük el beállítani az azonosítót, ha az oldal vorstke).
Módszerrel minden elem
Listáját adja vissza a gyermek meghatározott elemeket az érv a tag nevét.
Ügyeljen arra, hogy a helyesírás a módszer neve is
Része a «Elements» van írva, többes számban, a bukovkoy «s» a végén.
elem - bármely DOM elemet.
Ha az argumentum a paraméter tartalmazza egy csillag, visszatér egy listát az összes gyermek elemekkel.
Ezt a módszert lehet alkalmazni, hogy maga a dokumentum, vagy bármely elemét. Például, akkor lehet alkalmazni, hogy az elem