HTML DOM alapok

A WEB böngésző végzi el a HTML oldal betöltést, értelmezést és DOM (Dokumentum Objektum Modell) fába rendezését eseménykapcsolattal.

A HTML oldalak objektumai DOM fa stukatúrában helyezkednek el
és a leíró adatuk mellet eseményeket képesek észlelni.

Ilyen esemény például a kattintás, a beviteli mezők manipulálása, oldalak betöltése,
oldalak elhagyása, egér- és billentyűzet események, stb.

A DOM definiálja az objektumaihoz a kiváltható eseményeket és előírja,
hogy az egyes eseménytípusok mely elemekre érvényesek és milyen körülmények között jönnek létre.

Ezeket az eseményeket a megfelelő (JS:javascript) szkript-függvényekkel kezelni is lehet,
ha már definiálva lettek az elemnél.

Néhány gyakran használt és kezelt esemény:

– Abort
A felhasználó megszakította az oldal letöltést.
Ha a letöltés alapvető az oldal használatához, ezt az eseményt figyelve figyelmeztethető a felhasználó a problémára.
Az eseménykezelő: onAbort().

– Blur
Az ablakra (Window) és minden űrlapelemre érvényes esemény akkor esik meg ha,
a felhasználó elveszi a beviteli fókuszt az elemről (tabulátor, vagy egér használatával).
Például:
– Ellenőrizhető vele az input helyessége, akár alapértelmezett adatra is cserélhető,
ha az nem helyes.
– Több megnyitott ablak esetén a lejátszás felfüggesztésére is használható (pl. video lejátszásánál,
ha a felhasználó más ablakra vált).
Az eseménykezelő: onBlur().

– Change
Beviteli mezőkre és legördülő mezőkre érvényes, módosításakor történik.
Használható akár a bevitel ellenőrzésére, vagy konzisztencia ellenőrzés futtatására
Az eseménykezelő: onChange().

– Click
Kattintásra érzékeny elemek (bevitelre szolgáló, illetve akciót kiváltó elemek esetén)
kattintásának észlelésére szolgál. Link aktiválása esetén is működik.
Egyes alkalmazások megkülönböztetik a DblClick és a RightClick eseményeket is.
Az eseménykezelő: onClick().

– Error
Letöltéskor fordulhat elő. A letöltési ellenőrző összeget hasonlítja össze az elvárttal,
és ennek eltérését jelzi.
Az eseménykezelő: onError().

– Focus
A beviteli elem fókuszba kerüléskor lép fel.
Kezelésekor érdemes összehangolni a Blur eseménnyel.
Az eseménykezelő: onFocus().

– KeyDown
Billentyű lenyomásakor jelentkezik, de csak a lenyomáskor!
A lenyomott billentyű lekérdezhető.
Az eseménykezelő: onKeyDown().

– KeyUp
Billentyű lenyomás utáni felengedése. A felengedett billentyű lekérdezhető.
Az eseménykezelő: onKeyUp().

– KeyPress
Ha a KeyDown, KeyUp események nem aktívak, akkor használható. A használt billentyű lekérdezhető.
Az eseménykezelő: onKeyPress().

– Load
A dokumentum teljes dokumentum betöltése után lép fel.
Az eseménykezelő: onLoad().

– Unload
Az oldal elhagyásakor lép fel.
Az eseménykezelő: onUnload().

– MouseDown
A baloldali egérgomb lenyomásakor aktivizálódik.
Okostelefonos alkalmazás esetén nem érdemes egéreseményt használni.
Az eseménykezelő: onMouseDown().

– MouseUp
A baloldali egérgomb felengedésekor aktivizálódik.
Okostelefonos alkalmazás esetén nem érdemes egéreseményt használni.
Az eseménykezelő: onMouseUp().

– MouseOver
Egérkurzorral az objektum felé állással kiemelhető egy-egy objektum fölösleges kattintgatás nélkül.
Az eseménykezelő: onMouseOver().

– MouseOut
Fellép, amikor az egér elkerül az objektumról.
Általában a MouseOver eseménnyel összhangban szokták használni.
Az eseménykezelő: onMouseOut().

– Move
Ablakok mozgatása esetén lép aktivizálódik.
Az eseménykezelő: onMove().

– Submit
Űrlap kitöltésének végső mozzanata. Ekkor még megerősítheti a felhasználó a szándékát: „Biztos benne?”.
Az eseménykezelő: onSubmit().

 

Az egyes DOM elemek tulajdonságai, azok lekérdezése, módosítása:

 

tulajdonság leírás
attributes[] Visszatérési értéke a NamedNodeMap tömb, amely a node összes attribútumát tömbként tartalmazza. attribútum név és értékpárokként.példa:

document.getElementById(“mydom”).attributes[0].name  //neve

document.getElementById(“mydom”).attributes[0].value  //értéke

 

childNodes[] A node összes gyermek-node-jait adja vissza. A “nodeName” and “nodeType” tulajdonságok is használhatóak.példa:

//<ul> node esetére var mylist=document.getElementById(“mylist”) for (i=0; i<mylist.childNodes.length; i++){ if (mylist.childNodes[i].nodeName==”LI”) //valamit lehet tenni a lista elemmel }

className A node CSS class attribútuma. Read/write.példa:

document.getElementById(“test”).className=”class1″ //a class1 osztály nevének hozzárendelés a node-hoz document.getElementById(“test”).className+=” class2″ //az osztály módosítása

clientWidth A böngészőablak hasznos (felhasználható) felületének szélessége a szegély, margó, csúszka (scrollbar) objektumokat nem tartalmazza.példa:

var pagewidth=document.body.clientWidth

clientHeight A böngészőablak hasznos (felhasználható) felületének magassága a szegély, margó, csúszka (scrollbar) objektumokat nem tartalmazza.
dir A szövegirány az objektumban. Értékei a “ltr” (left to right) vagy a “rtl” (right to left). Alapértelemzésben “ltr.” Read/writepélda:

document.getElementById(“mydiv”).dir=”rtl” //szövegirány megváltoztatása

firstChild A node első (legbaloldalibb) gyermek node-ja.
id A node id azonosítója. Praktikus megadni a könnyű elérhetőség érdekében. Read/write
innerHTML Miután az oldal teljesen betöltődött, a node belső tartamának elérésére/megváltoztatására szolgál. Read/write.
childNodes[] A node összes gyermek-node-jait adja vissza. A “nodeName” and “nodeType” tulajdonságok is használhatóak.
<p><b>Old paragraph text</b></p> <script type=”text/javascript”> window.onload=function(){ document.getElementsByTagName(“p”)[0].innerHTML=”<b>new paragraph text</b>” } </script>
lang A node nyelvi attribútuma. Többnyire a <body> alapnyelvének meghatározására, illetve az attól eltérő egyes node-ok nyelvének meghatározására használatos. Read/write.
lastChild A node utolsó (legjobboldalibb) gyermeke node-ja.
localName Egy XML node neve (hasonló, mint HTML DOM esetén a nodeName).
namespaceURI Egy XML node xmlns attribútumához rendelt URI string.
nextSibling A (jobbra) következő testvér node ugyanazon szülő esetén
nodeName A node neve (nagybetűvel).példa:

if (document.getElementById(“test”).firstChild.nodeName==”DIV”) alert(“Ez egy DIV objektum.”)

nodeType A node típusa. A node típusokról ld. bővebben: http://www.w3schools.com/dom/dom_nodetype.asppélda:

alert(document.getElementById(“adiv”).nodeType) //DIV esetén 1

nodeValue A node értéke (amennyiben van neki, egyébként null). Szöveget tartalmazó node esetén a visszatérő érték a text, míg a value. Document és element esetén null.A text, illetve value értéke lekérdezésére, módosítására használatos.

Read/write

példa:

<body> <div id=”test”>Old text</div> <script type=”text/javascript”>

if (document.getElementById(“test”).firstChild.nodeName==”#text”) document.getElementById(“test”).firstChild.nodeValue=”New text” </script>

offsetLeft A node-ot magába foglaló container objektum (pl. DIV or TABLE) bal oldali széléhez képesti relatív baloldali offset érték. A magába foglaló elemre az offsetParent attribútummal lehet hivatkozni.
offsetTop A node-ot magába foglaló container objektum (pl. DIV or TABLE) bal oldali széléhez képesti relatív felülről számított offset érték. A magába foglaló elemre az offsetParent attribútummal lehet hivatkozni.
offsetParent Egy elem offset container-je, azaz az őt magába foglaló objektum. Többnyire egy BODY, DIV, illetve TABLE.példa:

<body> <div id=”master” style=”position: relative”> <div id=”slave” style=”position: relative”>test</div> </div> <script type=”text/javascript”> alert(document.getElementById(“slave”).offsetParent.id) //alerts “master” </script>

offsetWidth Egy elem szélessége kerettel együtt.
offsetHeight Egy elem magassága kerettel együtt.
ownerDocument A node-ot tartalmazó document, mint node.
parentNode A szülő node.
prefix Az XML node nameSpace előtagja (xmlns), ha van ilyen. A namespace az azonos típusú node-ok megkülönböztetése miatt hasznos.példa:

<root> <h:table xmlns:h=”http://www.w3.org/TR/html4/”> <h:tr> <h:td>Apples</h:td> <h:td>Bananas</h:td>

</h:tr> </h:table> <f:table xmlns:f=”http://www.w3schools.com/furniture”> <f:name>African Coffee Table</f:name> <f:width>80</f:width> <f:length>120</f:length> </f:table> </root>

previousSibling Az előző (baloldali) testvér node), ha van ilyen, egyébként null.
scrollLeft Mennyire kellene balra scrollozni egy BODY, DIV, vagy textarea objektumban, hogy az elvileg látható és az aktuális baloldali él egybeessen.
scrollTop Mennyire kellene balra scrollozni egy BODY, DIV, vagy textarea objektumban, hogy az elvileg látható és az aktuális felső él egybeessen.példa:

<div id=”static” style=”width:150px; height:150px; position: absolute; border:1px solid yellow; left: 5px;”>vaalmi szöveg</div> <script type=”text/javascript”> setInterval(“document.getElementById(‘static’).style.top=document.body.scrollTop+10+’px'”, 50) </script>

scrollHeight Az objektum scrollozható magassága. Függőleges scrollbar (csúszka) hiányában értéke megegyezik a clientHeight-tel.
scrollWidth Az objektum scrollozható szélessége. Vízsztintes scrollbar (csúszka) hiányában értéke megegyezik a clientWidth-tel.
style Egy elem style objektumának elérésére, illetve egyes attribútumainak módosítására szolgál. Mókás dolgokra is alkalmas, ld. menekülő submit gombok. Read/write.példa:

document.getElementById(“test”).style.backgroundColor=”yellow”

tabIndex Az adott objektum tabulátorral való elérése értékének lekérdezésére/módosítására szolgál. Read/write.
tagName Egy HTML tag nevének lekérdezésére szolgál.példa:

<!DOCTYPE html>

<html>

<body><pp id=”demo” >Click the button to display the tag name of this element<br></pp>

<button onclick=”myFunction()”>Try it</button>

<script>

function myFunction()

{

var x=document.getElementById(“demo”);

x.innerHTML=x.tagName;

}

</script>

</body>

</html>

 document címének, title attribútumának lekérdezésére szolgál. Read/write
title A document címének, title attribútumának lekérdezésére szolgál. Read/write

 

 

 

 

A HTML DOM elemek eseményeinek kezelésére szolgáló leggyakrabban használt függvények:

 

metódus Leírás (visszatérési értéke)
getElementById() Az ID azonosítójú elemet adja vissza.Példa:

var element=document.getElementById(“intro”);

getElementsByTagName() Adott nevű node-ok listájáját tömbként (vektorként) adja vissza, az egyes elemek indexszel hivatkozhatóak (ld. még névtér használata).Példa:

var tagnames=document.getElementsByTagName(tagname)

getElementsByClassName() Az adott class attribútummal rendelkező node-ok tömbje.Példa:

elements = document.getElementsByClassName(names);

appendChild() Gyermek node hozzáadása az adott node-hoz.Példa:

document.getElementById(“myList”).appendChild(newListItem);

removeChild() Adott gyermek node eltávolítása.Példa:

var list=document.getElementById(“myList”); list.removeChild(list.childNodes[0]);

replaceChild() Gyermek node lecserélése.Példa:

document.getElementById(“myList”).replaceChild(new node,oldnode);

 

 

insertBefore() Adott gyermek node elé beszúr egy új gyermek node-ot.Példa:

var node=document.getElementById(“myList2”).lastChild; var list=document.getElementById(“myList1”); list.insertBefore(node,list.childNodes[0]);

createAttribute() Adott node-hoz újabb attribútumot rendel.Példa:

var att=document.createAttribute(“class”); att.value=”democlass”; document.getElementsByTagName(“H1”)[0].setAttributeNode(att);

createElement() Element node létrehozása.Példa:

var btn=document.createElement(“BUTTON”) var t=document.createTextNode(“CLICK ME”); btn.appendChild(t);

createTextNode() Text node létrehozása.Példa:

Ld. fent.

getAttribute() Adott node megnevezettt attribútuma.Példa:

document.getElementsByTagName(“a”)[0].getAttribute(“target”);

setAttribute() Adott node megvezetett attribútumának meghatározása, vagy megváltoztatása.Példa: (beviteli mező nyomógombbá változtatása)

document.getElementsByTagName(“INPUT”)[0].setAttribute(“type”,”button”);

 

 

A bejegyzés kategóriája: Informatika, Oktatás
Kiemelt szavak: , .
Közvetlen link.