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

szit

Felhasználói eszközök

Eszközök a webhelyen

Tartalomjegyzék

DOM

A DOM

A DOM elérése

getElementById

getElementsByClassName

getElementsByTagName

getElementsByName

querySelector()

Egy elem kiválasztása

Szülő gyermek jelölése

querySelectorAll()

Kombinált megoldás

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

Stílus változtatása

A CSS tulajdonság JavaScriptben

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

Tulajdonság elérése

Doboz háttérszíne

Div háttérszíne újra

Dátum beszúrása divbe

Tartalom cseréje

Egér az elem felett

Villogó szöveg

Elem tulajdonságok (attribútum)

Elem tulajdonságának értéke

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

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

Stílusok kinyerése

Stílus lekérdezése

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

Képcsere

Függvény paraméter

Stíluslap cseréje

Osztályműveletek

Esemény azonosító alapján

Eseményt kiváltó egérgomb

Szintaxis

Használat

Azonosítók

Billentyűzet figyelése

Billentyűzet

Billentyűkód kiírása

Egér után billentyű

Lista bejárása

Lista gyártása

Az Enter billentyű figyelése

Dokumentum módosítása

Előtte, utána

Elem listához

Elem listához újra

Elem listához 3

Táblázat sorainak leképzeése

Újabb elem aktiválása

Függelék

Betöltődés figyelése

Képnézegető képcseréje

A this paraméter

A this paraméter újra

Ciklusokkal képek

Eszközök az oldalon