A Dokumentum Objektum Modell (Document Object Model / DOM) egy platform- és nyelvfüggetlen standard objektummodell amely a HTML, XHTML, XML, valamint rokon formátumaiknak a szerkezetét és az objektumaikkal történő interakciókat modellezi.[1] A DOM egymással gyerek-szülő kapcsolatban álló objektumok rendszere. A dokumentum tartalmát, illetve a dokumentum valamennyi összetevőjét magában foglalja. A beépített objektumok kezelése böngészőnként eltérő lehet, továbbá plusz tulajdonságok is lehetnek különböző böngészők esetén. Mivel a DOM mindkét irányú navigációt támogatja (szülő és az előző testvér felé is) és lehetővé teszi a változtatást tetszőleges helyen, az implementációban pufferelni kell a beolvasott dokumentumot (vagy annak értelmezett részét). Ebből következik, hogy a DOM leginkább olyan alkalmazások kezelésére alkalmas, ahol ismételt és nem szekvenciális sorrendű hozzáférés történik a dokumentumhoz. Amennyiben egy alkalmazás szigorúan szekvenciális és egyszer futó, a SAX modell valószínűleg gyorsabb és kevesebb memóriát használ. A webböngészők rendszerint a DOM-hoz hasonló belső modellt használnak a dokumentumok (például egy HTML oldal) megjelenítéséhez. A DOM API-kat weboldalak, illetve egyes részeik JavaScript kódból történő vizsgálására, vagy módosítására is használják. Más szóval, a Dokumentum Objektum Modell az a mód, ahogyan a JavaScript látja a webböngésző állapotait és az általa megjelenített HTML oldalt.
Amikor egy böngésző megjelenít egy HTML oldalt, akkor legelőször betölti az oldalt a web-szerverről, majd értelmezi a jelöléseit (pl. HTML) és létrehozza a modellt a memóriában tárolt DOM formájában.
Minden dokumentum csomópontjai fa struktúrába vannak szervezve, ezt hívjuk DOM fának. A legfelső csomópont a DOM fában a Dokumentum (Document) objektum. Minden csomópont tetszőleges számú - nulla, vagy több - gyerekkel rendelkezhet.
Alább látható egy példa egy DOM fa felépítésére:
|-> Dokumentum (Document)
|-> Elem (Element) (pl. <html>)
|-> Elem (Element) (pl. <body>)
|-> Elem (Element) (pl. <div>)
|-> szöveges tartalom
|-> Horgony (Anchor)
|-> szöveges tartalom
|-> Űrlap (Form)
|-> Szövegdoboz (Text-box)
|-> Szövegmező (Text Area)
|-> Rádió gomb (Radio Button)
|-> Jelölőnégyzet (Check Box)
|-> Select
|-> Gomb
Tehát egy platform- és nyelvfüggetlen interfész, amely lehetővé teszi a programok és szkriptek számára, hogy dinamikusan elérjék és módosítsák adott dokumentumok tartalmát, struktúráját és kinézetét.
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">
Szöveg.
</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 Szöveg kezdetű bekezdést, a display tulajdonság, none értékre állításával.
Szöveg
Rejt
Doboz háttérszíne
this.style.backgroundColor='red';
position:relative;
width: 100px;
height: 100px;
left:50px;
top: 50px;
background-color:blue;
Szöveg
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';">
Szöveg
</div>
Szöveg
Dátum beszúrása divbe
<p id="az"></p>
<script type="text/javascript">
document.getElementById("az").innerHTML=Date();
</script>
Sat May 29 2021 05:46:36 GMT+0200 (közép-európai nyári idő)
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';"
>
Szöveg
</div>
Szöveg
Villogó szöveg
Nézd Firefoxban!
var str = "Szöveg";
document.write(str.blink());
Szöveg
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]);
}
}
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);
}
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');
kep1.style.backgroundImage = 'url(images/kep01.png)';
kep1.addEventListener('click', function() { setImage(this); })
var setImage = function(kep) {
kep1.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;
}
Nincsenek megjegyzések:
Megjegyzés küldése