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.
Teszt
===== A DOM elérése =====
* getElementById()
* getElementsByClassName()
* getElementsByTagName()
* getElementsByName()
* querySelector()
* querySelectorAll()
==== getElementById ====
var a = document.getElementById('egy');
a.innerHTML = 'működik';
==== getElementsByClassName ====
var a = document.getElementsByClassName('egy');
a[0].innerHTML = 'működik';
==== getElementsByTagName ====
var a = document.getElementsByTagName('p');
a[0].innerHTML = 'működik';
==== getElementsByName ====
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.
var a = document.querySelector('#egy');
a.innerHTML = 'működik';
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 ===
a
b
c
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.
a
b
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.
var a = document.querySelectorAll('.egy');
a[0].innerHTML = 'működik';
==== Kombinált megoldás ====
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.
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:
Lorem ipsum dolores sit amet.
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;
Lorem ipsum
bbbb
==== Tartalom cseréje ==== Az alábbi példában egy elem tartalmát változtatjuk meg.
Kattintásra változó szöveg
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.
Lorem ipsum
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:
link
Link céljának lekérése
link
aaaaa
==== Attribútum értékének változtatása ====
function mutat(kepaz) {
document.getElementById("imgnezo").src=kepaz;
}
![]()
===== 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 ====
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 =====
===== Függvény paraméter =====
function valt(az) {
az.style.backgroundColor="red";
}
Tartalom
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:
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:
text
===== Esemény azonosító alapján =====
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);
}
==== 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 =====
- alma
- körte
- barack
- szilva
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 ====
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');
}
}
...
...
===== Dokumentum módosítása =====
Üzenet
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 ====
- alma
- körte
- barack
- szilva
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 ====
Lista bejárása
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 ====
Lista
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