Document Object Model (DOM) je stromová štruktúra webovej stránky tak, ako ju má v pamäti načítanú web prehliadač. Je to vlastne pole, ktoré všetky komponenty stránky obsahuje.
Aby sme pochopili DOM, vytvorme si html súbor udalosti.html
Kód:
<!DOCTYPE html>
<html lang="sk">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/udalosti.js"></script>
<title>DOM a udalosti v JS</title>
</head>
<body>
<h2>element: podnadpis <h2></h2> s textom: Document Object Model (DOM)</h2>
<p>element: odstavec <p></p></p>
<button>element: tlačítko <button></button></button><br><br>
<table>element: table <table></table></table>
<p>---------------------------------------------------------------------------------------------------------------</p>
<h2>element: 2. podnadpis <h2></h2> s textom: Document Object Model (DOM)</h2>
<p>element: 2. odstavec <p></p></p>
<button>element: 2. tlačítko <button></button></button><br><br>
<table>element: 2. table <table></table></table>
</body>
</html>
Súbor style.css môžete nechať prázdny.
Príloha:
obr1.PNG [ 16.29 KiB | Zobrazené 4839 krát ]
Teraz si necháme všetky komponenty DOM vypísať do konzoly. Do scriptu udalosti.js napíšeme:
Kód:
$(function() {
console.log($('*')); // hviezdička pracuje ako náhrada všetkých komponentov v poli
});
Po spustení stránky a stlačení F12 sa nám ukáže obsah poľa.
Po rozkliknutí vidieť očíslované komponenty DOM.
Príloha:
obr2.PNG [ 7.52 KiB | Zobrazené 4839 krát ]
Výber komponentov DOM je teda jednoduchý.
Keď namiesto hviezdičky zadám konkrétnu komponentu, vyberie sa mi tá.
Vyskúšajme si button, ale použijeme na ňom udalosť click, ktorú poznáme z minulých lekcií.
Kód:
$(function() {
$('button').click(function() {
alert("klikol som na tlačítko");
});
});
Po spustení vidíte, že klik na obidva tlačítka robí to isté.
Čo vtedy keď chceme, aby po klike na dolné tlačítko bola iná reakcia?
Je to jednoduché.
Selektor $('') berie druh komponentu a ak ich je viac, berie všetky.
Seletor $('#') berie id komponentu a je jedno aký je to druh.
Príklad.
Pridáme v html kóde prvému tlačítku id:
Kód:
<button id="tlc1Button">element: 2. tlačítko <button></button></button>
a druhému id="tlc2Button"
(dobrým zvykom je id nazývať druhom komponentu.
Potom ho v jQuery voláme:
Kód:
Seletor $('# tlc2Button ')
(Môžu sa používať aj normálne úvodzovky, ale také alebo také tam musia byť, je to sila zvyku.)
Upravme si script:
Kód:
$(function() {
$('#tlc1Button').click(function() {
alert("klikol som na horné tlačítko");
});
$('#tlc2Button').click(function() {
alert("klikol som na spodné tlačítko");
});
});
Vyskúšajte si to.
Keď si teraz necháte vypísať obsah DOM, uvidíte tam aj id obidvoch buttonov.
Z toho jasne vyplýva, že všetkým komponentom DOM, s ktorými chceme nejakým spôsobom manipulovať, je potrebné prideliť id.
Pod manipuláciou rozumieme napríklad zmena obsahu (textu), css selektoru, atribútov, animácia a pod.
Na všetky zmeny je najlepšie nájsť si postup cez strýčka google. (najlepšie v angličtine, ak ju neovládate, použite google prekladač)
Ešte si povieme niečo o udalostiach.
Udalostí môže byť na stránke veľmi veľa. Ako príklad uvediem klik na komponentu (nemusí to byť len tlačítko), dvojklik, nabehnutie myšou na komponentu, odídenie myšou z komponentu, zmena obsahu input políčka atď.
Použitie je najlepšie si nájsť na nete.
Všetky druhy udalostí nájdete tu:
http://api.jquery.com/category/events/Nabudúce budeme hovoriť o vytváraní komponentov na stránke, ich mazanie a pridávaní a odoberaní css tried, id a podobne.
_________________
kódy píšem na platforme: linux Ubuntu 12.04 (Geany, Code::Blocks), WinXP (Code::Blocks, PsPad editor),
Skype: libcokamo, ICQ: 56312279
Ak treba, napíš mi na
libcosenior@gmail.com. To mám v mobile a stále po ruke.