• Szerző: Sallai András
• Copyright © Sallai András, 2011, 2013, 2014, 2016, 2020
• Licenc: GNU Free Documentation License 1.3
• Web: http://szit.hu

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.

A következő mintában az onclick, az onchange és onfocus eseményeket tesztelheted:

Fókuszt a „Tab” billentyűvel lehet váltani.

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>

link

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");
}

IE böngészőben „logikusan”:

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');

window.onload = function () {
   //Az oldal betöltödése után fut le
};