Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:javascript:javascript_dom

< JavaScript

DOM

  • Szerző: Sallai András
  • Copyright © Sallai András, 2011, 2013, 2014, 2016, 2020
  • Licenc: GNU Free Documentation License 1.3

A DOM

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.

Események

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:

doboz

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

Tulajdonság Az esemény bekövetkezése
onsubmit Űrlap elküldése

Stílus változtatása

A CSS tulajdonság JavaScriptben

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.

Példa a tulajdonságok megadására

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

Tulajdonság elérése

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.

Lorem ipsum dolores sit amet.

Doboz háttérszíne

this.style.backgroundColor='red';
  position:relative; 
  width: 100px; 
  height: 100px; 
  left:50px; 
  top: 50px; 
  background-color:blue;

Lorem ipsum






Div háttérszíne újra

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>

Lorem ipsum

Dátum beszúrása divbe

<p id="az"></p>
 
<script type="text/javascript">
document.getElementById("az").innerHTML=Date();
</script>

bbbb

Tartalom cseréje

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

Egér az elem felett

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>

Lorem ipsum

Villogó szöveg

Nézd Firefoxban!

var str = "Szöveg";
document.write(str.blink());

Elem tulajdonságok (attribútum)

Elem tulajdonságának értéke

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

Link céljának lekérése

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.

Elem Tulajdonság alapján CSS tulajdonság állítása

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>

Attribútum értékének változtatása

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>

Stílusok kinyerése

Stílus lekérdezése

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

Stílus lekérdezés és tárolás

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

Képcsere

<img src="w3javascript1.png" alt="" 
	onmouseover="this.src='kep001.png';"
	onmouseout="this.src='kep002.png';"
	>

Függvény paraméter

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.

Stíluslap cseréje

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ályműveletek

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>

Esemény azonosító alapján

<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.

Eseményt kiváltó egérgomb

Szintaxis

event.button=0|1|2

Használat

function gomb(esemeny)
{
	if(esemeny.button == 0)
	    alert("Első");
	else
	    alert("Más gomb");
}

Azonosítók

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

Billentyűzet figyelése

Billentyűzet

window.onload = function() {
    document.addEventListener('keydown', function(event) {
            alert('Egy billentyűt lenyomtak.');
    }, false);
}

Billentyűkód kiírása

function ez(e)
{
	if(e.which)
		alert(e.which);
}
<form>
<input type="text" onkeydown="ez(event)" />
</form>

Egér után billentyű

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

Lista bejárása

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

Az Enter billentyű figyelése

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">
...

Dokumentum módosítása

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

Előtte, utána

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

Elem listához

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

Elem listához újra

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

Függelék

Betöltődés figyelése

window.onload = function () {
   //Az oldal betöltödése után fut le
};
oktatas/web/javascript/javascript_dom.txt · Utolsó módosítás: 2020/03/01 00:22 szerkesztette: admin