Tartalomjegyzék

DOM

DOM

Szerző: Sallai András
Copyright © 2011, Sallai András
Licenc: GNU Free Documentation License 1.3
Web: https://szit.hu

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.

<!DOCTYPE html>
<html lang="hu">
    <head>
        <meta charset="utf-8">
	<title></title>
    </head>
    <body>
	<h1>Teszt</h1>
	<p></p>
        <script src="script.js"></script>
    </body>
</html>

A DOM elérése

getElementById()
getElementsByClassName()
getElementsByTagName()
getElementsByName()
querySelector()
querySelectorAll()

getElementById

<p id="egy"></p>

var a = document.getElementById('egy');
a.innerHTML = 'működik';

getElementsByClassName

<p class="egy"></p>

var a = document.getElementsByClassName('egy');
a[0].innerHTML = 'működik';

getElementsByTagName

<p><p>

var a = document.getElementsByTagName('p');
a[0].innerHTML = 'működik';

getElementsByName

<input type="text" name="szam1">

var a = document.getElementsByName('szam1');
a[0].value = 'működik';

querySelector()

A querySelector() és a querySelectorAll() függvények újak a JavaScriptben. Régebbi böngészőkben nem működhetnek.

<p id="egy"></p>

var a = document.querySelector('#egy');
a.innerHTML = 'működik';

<p class="egy"></p>

var a = document.querySelector('.egy');
a.innerHTML = 'működik';

Ha több ilyen osztály is van akkor az elsőt választja ki.

Egy elem kiválasztása

    <p>a</p>
    <p>b</p>
    <p>c</p>

var a = document.querySelector('p');
a.innerHTML = 'működik';

Csak az első p elem tartalmát írja át.

Szülő gyermek jelölése

A querySelector() függvény igazi haszna a szülő-gyermek viszony jelölési lehetőség, ami kevesebb jelölő használatához vezet a HTML kódban.

    <div id="egy">
        <p>a</p>
    </div>
    <div id="ketto">
        <p>b</p>
    </div>

var a = document.querySelector('#ketto p');
a.innerHTML = 'működik';

querySelectorAll()

Egy tömböt ad vissza. Osztályok és elemek kiválasztásához.

<p class="egy"></p>
<p class="egy"></p>
<p class="egy"></p>

var a = document.querySelectorAll('.egy');
a[0].innerHTML = 'működik';

Kombinált megoldás

<form id="reg">
    <input type="text" name="e-mail">
    <input type="text" name="telefon">
    <input type="text" name="szuletes">
</form>
 
<button id="mehetGomb">Mehet</button>

var mehetGomb = document.querySelector('#mehetGomb');
var regAdatok = document.querySelector('#reg').querySelectorAll('input');
 
mehetGomb.addEventListener('click', function(){
    regAdatok.forEach(function(element){
        console.log(element.value);
    });
});

Egyszerűbben:

var mehetGomb = document.querySelector('#mehetGomb');
var regAdatok = document.querySelectorAll('#reg input');
 
mehetGomb.addEventListener('click', function(){
    regAdatok.forEach(function(element){
        console.log(element.value);
    });
});

Azonosító közvetlen elérése

A HTML lapon létrehozott azonosítók, elérhetők JavaScriptből csak a nevük alapján.

<div id="egy"></div>

egy.innerHTML = 'működik';

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

let 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="
let 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) {
	let katkep = document.getElementById(kepaz);
	let katkepstilus = document.defaultView.getComputedStyle(katkep, "");	
	let 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:

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

let lista = document.getElementById('lista');
let elemCsomok = [];
 
for (let i = 0; i < lista.childNodes.length; i++) {
    if(lista.childNodes[i].nodeName == "LI") {
        elemCsomok.push(lista.childNodes[i]);
        console.log(lista.childNodes[i]);
    }
}

Lista gyártása

        <div id="beosztasok">
            <ul class="list-group"></ul>            
        </div>

app.js

var beosztasok = [
    { name: 'programozó' },
    { name: 'tesztelő'},
    { name: 'grafikus'}
];
 
const beoszDiv = document.querySelector('#beosztasok');
const beoszUl = beoszDiv.firstElementChild;
 
beosztasok.forEach( beosztas => {
    console.log(beosztas.name)
    const li = document.createElement('li');
    li.textContent = beosztas.name;
    li.className = 'list-group-item';
    beoszUl.appendChild(li);
})

Az Enter billentyű figyelése

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

let lista = document.getElementById('lista');
lista.before('előtte');
lista.after('utána');

Elem listához

let lista = document.getElementById('lista');
lista.before('előtte');
lista.after('utána');

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

let adGomb = document.getElementById('adGomb');
let lista = document.getElementById('lista');
adGomb.onclick = function() {
    let elemObj = document.getElementById('elem');
    let elem = elemObj.value;
 
    let liElem = document.createElement('li');
    liElem.appendChild(document.createTextNode(elem));
    lista.appendChild(liElem);
}

Elem listához 3

<div class="container">
    <h1>Lista</h1>
    <ul id="list" class="list-group"></ul>
</div>
<script src="app.js"></script>

app.js

const list = document.querySelector('#list');
books.forEach(book => {
    console.log(book.title);
    const li = document.createElement('li');
    li.textContent = book.title;
    li.className = 'list-group-item';
    list.appendChild(li);
});

Táblázat sorainak leképzeése

employees = [
    {name: "János", sal: 3800000},
    {name: "Béla",  sal: 3750000},
    {name: "Gábor", sal: 3240000},
    {name: "Iván",  sal: 3204000}
];
 
const table = document.querySelector('#list');
 
employees.forEach( dolgozo => {
	const tr document.createElement('tr');
	const tdName document.createElement('td'); 
	const tdSalary document.createElement('td'); 
 
	tdName.textContent = dolgozo.name;
	tdSalary.textContent = dolgozo.sal;
	tr.appendChild(td);
	table.appendChild(tr);
}

Újabb elem aktiválása

var oldAct = document.querySelector('.active');
oldAct.classList.remove('active');
 
var newAct = event.target;
newAct.classList.add('active');

Ha induláskor nincs aktív elem:

if(act !== null)
    act.classList.remove('active');

Függelék

Betöltődés figyelése

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

Képnézegető képcseréje

A this paraméter

let kep1 = document.getElementById('kep1');
let kep2 = document.getElementById('kep2');
let kep3 = document.getElementById('kep3');
let kep4 = document.getElementById('kep4');
let kep5 = document.getElementById('kep5');
let kep6 = document.getElementById('kep6');
 
kep1.style.backgroundImage = 'url(images/kep01.png)';
kep2.style.backgroundImage = 'url(images/kep02.png)';
kep3.style.backgroundImage = 'url(images/kep03.png)';
kep4.style.backgroundImage = 'url(images/kep04.png)';
kep5.style.backgroundImage = 'url(images/kep05.png)';
kep6.style.backgroundImage = 'url(images/kep05.png)';
 
kep1.onclick = function() { setImage(this); }
kep2.onclick = function() { setImage(this); }
kep3.onclick = function() { setImage(this); }
kep4.onclick = function() { setImage(this); }
kep5.onclick = function() { setImage(this); }
 
var setImage = function(kep) {    
    kep6.style.backgroundImage = kep.style.backgroundImage;
}

A this paraméter újra

let kep1 = document.getElementById('kep1');
let kep2 = document.getElementById('kep2');
let kep3 = document.getElementById('kep3');
let kep4 = document.getElementById('kep4');
let kep5 = document.getElementById('kep5');
let kep6 = document.getElementById('kep6');
 
kep1.style.backgroundImage = 'url(images/kep01.png)';
kep2.style.backgroundImage = 'url(images/kep02.png)';
kep3.style.backgroundImage = 'url(images/kep03.png)';
kep4.style.backgroundImage = 'url(images/kep04.png)';
kep5.style.backgroundImage = 'url(images/kep05.png)';
kep6.style.backgroundImage = 'url(images/kep05.png)';
 
kep1.addEventListener('click', function() { setImage(this); })
kep2.addEventListener('click', function() { setImage(this); })
kep3.addEventListener('click', function() { setImage(this); })
kep4.addEventListener('click', function() { setImage(this); })
kep5.addEventListener('click', function() { setImage(this); })
 
var setImage = function(kep) {    
    kep6.style.backgroundImage = kep.style.backgroundImage;
}

Ciklusokkal képek

let kepazo = ['kep1', 'kep2', 'kep3', 'kep4', 'kep5'];
let kepnevek = ['kep01.png', 'kep02.png', 'kep03.png',
    'kep04.png', 'kep05.png'];
let kepek = [];
 
for (let i=0; i<kepazo.length; i++) {
    kepek.push(document.getElementById(kepazo[i]));
}
 
for (let i=0; i<kepek.length; i++) {
    kepek[i].style.backgroundImage = 'url(images/' + 
        kepnevek[i] + ')';
}
 
for (let i=0; i<kepek.length; i++) {
    kepek[i].addEventListener('click', function() { 
        setImage(this); 
    });
}
 
var setImage = function(kep) {    
    kep6.style.backgroundImage = kep.style.backgroundImage;
}