Ez a dokumentum egy előző változata!
A DOM a Document Object Model, magyarul Dokumentum Objektum Modell. Az XML, HTML és XHTML dokumentumok szerkezetének modellezése.
A DOM modell ábrázolt dokumentumszerkezet egy fastruktúrát eredményez.
<section> <article> <p><i></i></p> <p></p> </article> </section>
A JavaScript kiváló eszköz DOM elemeinek elérésére. A most következő leírás, ezt hivatott bemutatni. Ha valamely bemutató-minta nem működik az oldalon, akkor töltsd újra a weboldalt (Ctrl+R). Lesz néhány olyan elem is amely csak Firefoxban működik.
Minden elemhez egy eseményt köthetünk, amelyre egy JavaScript kóddal reagálhatunk. Az alábbi táblázat azokat az eseményeket tartalmazza, amelyekhez eseményeket köthetünk.
Tulajdonság | Az esemény bekövetkezése |
---|---|
onblur | az elem elveszti a fókuszt |
onchange | egy mező elhagyja a fókuszt és a tartalma megváltozik (onblur felülírja) |
onclick | egérkattintások az objektumon |
ondblclick | dupla-kattintás egy objektumon |
onerror | egy lap vagy egy kép betöltésekor hiba keletkezik |
onfocus | egy elem megkapja a fókuszt |
onkeydown | egy billentyűt lenyomtak |
onkeypress | egy billentyűt lenyomtak vagy felengedtek |
onkeyup | egy billentyűt elengedtek |
onload | egy oldal vagy egy kép letöltése végetért |
onmousedown | az egérgobot lenyomták |
onmousemove | az egér mozog |
onmouseout | az egér elhagyja az elemet |
onmouseover | az egér egy elem felett mozog |
onmouseup | az egérgombot felengedték |
onresize | az ablak átméretezése |
onselect | a szöveg ki lett jelölve |
onunload | az oldal lehagyása, például ablak bezárása |
A következő mintában az onclick, az onchange és onfocus eseményeket tesztelheted:
Fókuszt a „Tab” billentyűvel lehet váltani.
Tulajdonság | Az esemény bekövetkezése |
---|---|
onsubmit | Űrlap elküldése |
A JavaScript tulajdonságnevekben nem szerepelhetnek kötőjelek. Azért ha van egy olyan tulajdonság mint a
background-color
akkor azt így írjuk:
backgroundColor
Egy tulajdonság nevében az első kezdőbetű mindig kicsi, a szókezdő betűk pedig nagyok.
var div = document.getElementById("elso"); div.style.backgroundColor="#00f"; div.style.width="200px"; div.style.color="#fff"; div.style.height="100px"; div.style.paddingLeft="50px"; div.style.paddingTop="50px"; div.style.fontFamily="Verdana"; div.style.fontSize="2em"; div.style.border="3px dashed #ff0"; div.style.position="absolute"; div.style.left="200px"; div.style.top="100px"; div.style.textDecoration="underline"; div.style.backgroundImage = "url('ujkep.jpg')"; div.style.backgroundImage ="url(images/"+kepnev+")"; //Ha a kepnev egy változó div.style.backgroundRepeat = "no-repeat"; div.style.background.size = "200px 300px";
A CSS tulajdonságokat a style mezőn keresztül érjük el.
Adott egy ilyen div:
<div id="egy"> Lorem ipsum dolores sit amet. </div>
Szeretnénk megváltoztatni a div#egy elem stílusát. Ezt a következő kóddal tehetjük meg:
function removeElement() { document.getElementById("egy").style.display="none"; }
Esetünkben a display tulajdonságot állítjuk none értékre.
A következő példában a nyomgómra kattintva elrejtjük a Lorem ipsum kezdetű bekezdést, a display tulajdonság, none értékre állításával.
this.style.backgroundColor='red';
position:relative; width: 100px; height: 100px; left:50px; top: 50px; background-color:blue;
A példában kattintásra meg akarom változtatni a div tartalmának háttérszínét:
<div onclick="this.style.backgroundColor='red';"> Lorem ipsum </div>
<p id="az"></p> <script type="text/javascript"> document.getElementById("az").innerHTML=Date(); </script>
bbbb
Az alábbi példában egy elem tartalmát változtatjuk meg.
<p onclick="this.innerHTML='Új szöveg';">Kattintásra változó szöveg</p>
Kattintásra változó szöveg
Lehet más elem tartalmát is:
document.getElementById("az").innerHTML="Új szöveg";
Kattintásra másik szöveg változik
Másik elem tartalma
A példában ha a div dobozra viszem az egeret, annak színe kékre vált. Ha az egeret lehúzom róla, akkor pirosra.
<div onMouseOut="this.style.backgroundColor='red';" onMOuseOver="this.style.backgroundColor='blue';" > Lorem ipsum </div>
Nézd Firefoxban!
var str = "Szöveg"; document.write(str.blink());
Egy attribútum értékének kinyerése:
<a href="http://szit.hu" id="test">link</a> <div onClick=" var m = document.getElementById('test').getAttribute('href'); alert(m); "> Link céljának lekérése </div>
Ha Kattintunk a „Link címének lekérése” szövegre az egy sorral feljebb lévő link célját kapjuk egy párbeszédablakban.
Egy osztály alapján állítok be egy tulajdonságot.
<script type="text/javascript"> function csinal() { var p = document.getElementsByTagName("p"); for (var i=0; i<p.length; i++) if(p[i].getAttribute('class') == 'elso') p[i].style.backgroundColor="red"; } </script>
<p class="elso" onclick="csinal()"> aaaaa </p>
function mutat(kepaz) { document.getElementById("imgnezo").src=kepaz; }
<div id="kep1" onclick="mutat('kep001.jpg')"><img src="kep001.jpg"></div> <div id="kep2" onclick="mutat('kep002.jpg')"><img src="kep002.jpg"></div> <div id="kep3" onclick="mutat('kep003.jpg')"><img src="kep003.jpg"></div> <div id="kep4" onclick="mutat('kep004.jpg')"><img src="kep004.jpg"></div> <div id="kep5" onclick="mutat('kep005.jpg')"><img src="kep005.jpg"></div> <div id="nezo"><img id="imgnezo" src=""></div>
Így csak az inline beállított stílusokat tudjuk lekérdezni:
function leker() { var cim = document.getElementById("cim1"); alert(cim.style.backgroundColor); }
Az internal és external stílusok értékeinek lekérdezése:
function leker() { var cim = document.getElementById("cim1"); var t = document.defaultView.getComputedStyle(cim, "") alert(t.backgroundColor); }
<div id="kep1" onclick="mutat('kep1')"></div> <div id="kep2" onclick="mutat('kep2')"></div> <div id="kep3" onclick="mutat('kep3')"></div> <div id="kep4" onclick="mutat('kep4')"></div> <div id="kep5" onclick="mutat('kep5')"></div> <div id="nezo"></div>
function mutat(kepaz) { var katkep = document.getElementById(kepaz); var katkepstilus = document.defaultView.getComputedStyle(katkep, ""); var kepnezo = document.getElementById("nezo"); kepnezo.style.backgroundImage = katkepstilus.backgroundImage; kepnezo.style.backgroundSize = "210px 210px"; }
<img src="w3javascript1.png" alt="" onmouseover="this.src='kep001.png';" onmouseout="this.src='kep002.png';" >
function valt(az) { az.style.backgroundColor="red"; }
<div onclick="valt(this)"> Tartalom </div>
Amikor paraméterként a „this” szót állítom be, akkor a „this” azt az objektumot jelenti, amely az eseményt kiváltotta. Esetünkben a „Tartalom” szöveget tartalmazó „div” elem. Fentebb a javascript kódban paraméterként már „az”-ként hivatkozok erre az objektumra.
Valahol egy HTML oldal fejlécében:
<link rel="stylesheet" href="kek.css" id="ss" />
JavaScript kód amely lecseréli:
document.getElementById('ss').href = 'piros.css';
Osztály cseréje:
function csere() { document.getElementById("szoveg"). setAttribute("class", "animator"); }
Ha nem volt osztály, akkor is jó.
Osztály hozzáadása:
function beallit() { document.getElementById("szoveg"). className = "animator"; }
Új osztály hozzáadása a meglévő osztály megtartásával:
function ad() { document.getElementById("szoveg"). className += "animator"; }
Az eredmény ilyen lesz:
<div id="szoveg" class="eredeti_osztaly animator">text</div>
<button id="minButton">Mehet</button>
Névtelen függvénnyel:
document.getElementById("minButton").onclick = function(){ alert("Működik"); };
Nevesített függvénnyel:
document.getElementById("minButton").onclick = minButtonClick; function minButtonClick(){ alert("Működik"); };
Változóként:
var minButtonClick = function(){ alert("Működik"); }; document.getElementById("minButton").onclick = minButtonClick;
A függvényváltozó legyen előbb mint ahol meghívjuk.
event.button=0|1|2
function gomb(esemeny) { if(esemeny.button == 0) alert("Első"); else alert("Más gomb"); }
0 | bal egérgomb |
1 | középső egérgomb |
2 | jobb egérgomb |
IE böngészőben „logikusan”:
1 | bal egérgomb |
4 | középső egérgomb |
2 | jobb egérgomb |
window.onload = function() { document.addEventListener('keydown', function(event) { alert('Egy billentyűt lenyomtak.'); }, false); }
function ez(e) { if(e.which) alert(e.which); }
<form> <input type="text" onkeydown="ez(event)" /> </form>
var lastDownTarget; var canvas; window.onload = function() { vaszon = document.getElementById('vaszon'); document.addEventListener('mousedown', function(event) { lastDownTarget = event.target; alert('Egér lenyomva.'); }, false); document.addEventListener('keydown', function(event) { if(lastDownTarget == vaszon) { alert('Billentyűzet lenyomva.'); } }, false); }
<ul id="lista"> <li>alma</li> <li>körte</li> <li>barack</li> <li>szilva</li> </ul>
var lista = document.getElementById('lista'); var elemCsomok = []; for (var i = 0; i < lista.childNodes.length; i++) { if(lista.childNodes[i].nodeName == "LI") { elemCsomok.push(lista.childNodes[i]); console.log(lista.childNodes[i]); } }
var todoObj = document.getElementById('todo'); gomb.onclick = function() { console.log('Ez történik kattintásra'); }; todoObj.onkeydown = function(key) { if(key.which==13) { console.log('Ez történik Enter billentyűre'); } }
... <label for="todo"></label> <input type="text" id="todo"> ...
<div class="uzenet"> Üzenet </div>
let div = document.createElement('div'); div.className = "uzenet"; div.innerHTML = "Üzenet";
Hozzáfűzés:
let div = document.createElement('div'); div.className = "uzenet"; div.innerHTML = "Üzenet"; document.body.append(div);
<ul id="lista"> <li>alma</li> <li>körte</li> <li>barack</li> <li>szilva</li> </ul>
var lista = document.getElementById('lista'); lista.before('előtte'); lista.after('utána');
var lista = document.getElementById('lista'); lista.before('előtte'); lista.after('utána');
var lista = document.getElementById('lista'); lista.before('előtte'); lista.after('utána'); let elem = document.createElement('li'); elem.innerHTML = 'banán'; lista.append(elem);
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>Lista bejárása</h1> <input type='text' id='elem'> <button id="adGomb">Hozzáad</button> <ul id="lista"> </ul> <script src="script.js" charset="utf-8"></script> </body> </html>
var adGomb = document.getElementById('adGomb'); var lista = document.getElementById('lista'); adGomb.onclick = function() { var elemObj = document.getElementById('elem'); var elem = elemObj.value; var liElem = document.createElement('li'); liElem.appendChild(document.createTextNode(elem)); lista.appendChild(liElem); }
window.onload = function () { //Az oldal betöltödése után fut le };