Egyedi id azonosítók lekérdezése.1205
document.getElementById('id')
Visszaadja a megadott id attribútummal rendelkező elemek (mint objektumok) listáját.
Szabály: Minden html fájlban, ugyanazon id azonosítóval, csak 1, azaz, egy jelölőelem rendelkezhet.
Oka: Külső vezérlő programok, (mint például a JavaScript is) nem tudják egyértelműen és elkülönülten kezelni az eseményeket, és jelölőelemeket.
Első példánkban felrúgjuk a szabályt:
Az első kettő "p" jelölőelemnek, egyforma id azonosítót, stílusként 16px betűméretet, és sárga háttérszínt határozunk meg, majd teszteljük, hogy mi történik.
<p id="p01">Alma</p> <p id="p01">Dió.</p>
Fenti programunk így jelenik meg:
Megjelenésük mért eltérő, megtudjuk a következő programunkból.
Alma.
Dió.
A következő JS programunkkal, rákeresünk az id="p01" azonosítóval rendelkező elemekre, és megváltoztatjuk stílusukat.
A CSS fájlban sárga háttérszínt határoztunk meg mindkettőnek, és így jelennek meg mindaddig, még JS programunkkal más háttérszínt, nem határozunk meg.
JS programunk, melyiket azonosította egyértelműen?
Határozzunk meg, az id="p01" azonosítóval rendelkezőknek:
- Fehér háttérszínt: style.backgroundColor="white";
- Piros betűket: style.color="red";
- És 28px betűméretet: style.fontSize="28px";
Keressük meg, az id="p01" azonosítóval rendelkező jelölőelemeket, és írassuk ki darabszámukat (db).
Kettő darab ilyen elemünk van, programunk egyértelműnek, csak egyet jelez, és azt, melyet elsőnek megtalált.
<script type="text/javascript"> var id=document.getElementById('p01'); for ( var i=1; i<id.length; i++) { // Feladatot nem határozunk meg, csak számlálunk! } document.write('A <p id="p01"> elemek száma= </b>' + i); // Változtassuk meg, a p01 id azonosítóval rendelkező jelölőelemek tulajdonságát: id.style.fontSize="28px"; id.style.color="red"; id.style.backgroundColor="white"; </script>
Teszt programunkból is kiderül, hogy egyértelmű azonosításra, minden jelölőelemnek más és más elnevezésű, id azonosítóval kell rendelkeznie.
Böngészőnkben, frissítsük az oldalt többször is.
- Egyértelmű stílus meghatározás, csak az első id="p01" azonosítóval rendelkező jelölőelemnél figyelhető meg.
- Másodikra, nem vonatkoznak egyértelműen, a JS stílus meghatározások.
- Betűméret és betűszín váltakozhat, a háttérszín nem, marad a CSS fájlban meghatározott stílus.
Elhelyezün 8 db. <li> elemet oldalunkon.
- 3 db. nincs beágyazva egyetlen más elembe sem.
- 5 db. a <div id="listas_elemek"> div szakaszban található.
<ul>
<li> Külső li elem01. </li>
<li> Külső li elem02. </li>
<li> Külső li elem03. </li>
</ul>
<div id="listas_elemek">
<ol>
<li> 1. Beágyazott li elem. </li>
<li> 2. Beágyazott li elem. </li>
<li> 3. Beágyazott li elem. </li>
<li> 4. Beágyazott li elem. </li>
<li> 5. Beágyazott li elem. </li>
</ol>
</div>
Fenti peogramunk így jelenik meg:
- Külső li elem01.
- Külső li elem02.
- Külső li elem03.
- Beágyazott li elem.
- Beágyazott li elem.
- Beágyazott li elem.
- Beágyazott li elem.
- Beágyazott li elem.
Kérdezzük le:
<div id="listas_elemek"> div szakaszban, mennyi <li> elem van?
Az elemek keresése témakörben alkalmazott document.getElementsByTagName("....."); utasítással, oldalunkon található bármely jelölőelem típus listáját lekérdezhetjük.
Így lekérdezett elmetípust a program, tömb formátumban, sorszámozva tárolja.
Példa: Az első elem = tomb[0]
Most kérdezzük le, hogy a <div id="listas_elemek"> div szakaszban mennyi <li> elem van?
<script type="text/javascript">
var id = document.getElementById('listas_elemek');
var li_elemek = id.getElementsByTagName('li');
for (var i=0; i<li_elemek.length; i++)
{
// kód, azaz mit csináljon programunk. Jelenleg semmit, csak számol.
}
document.write('A <div id="listas_elemek"> területen található, <li> elemek száma= ' + i);
</script>
Fenti kódot megírhatjuk rövidebben is!
<script type="text/javascript">
var li_elemek=document.getElementById('listas_elemek').getElementsByTagName('li').length;
document.write('<div id="listas_elemek"> területen található, <li> elemek száma = ' + li_elemek);
</script>
Navigációs linkek (hivatkozások) keresése, beazonosítása:
Program megegyezik azzal a példával, ahol a <li> elemeket kerestettük meg.
Eltérés annyi, hogy most, egy tömbbe gyűjtjük és tároljuk az adatokat.
Tömbelemek sorszámozása 0-val kezdődik. Példa: a_tomb[2], a 3. <a> elemnek felel meg.
Példa:
Div szakasz, egyedi azonosítója: id="nav_linkek"
A div szakaszban, 6 darab navigációs linket helyezünk el, melyek szintén egyedi azonosítóval rendelkeznek.
<div id="nav_linkek">
<a href="#link" id="nav01"> 1. hivatkozási link.</a> <a href="#link" id="nav02"> 2. hivatkozási link.</a> <a href="#link" id="nav03"> 3. hivatkozási link.</a> <a href="#link" id="nav04"> 4. hivatkozási link.</a> <a href="#link" id="nav05"> 5. hivatkozási link.</a> <a href="#link" id="nav06"> 6. hivatkozási link.</a> </div>
Fenti programunk, így jelenik meg:
(A 3. és a 6. link, mért rendelkezik más tulajdonsággal, megtudhatjuk a következő programokból.)
Navigációs linkek <a> keresése a <div id="nav_linkek"> területén!
<script type="text/javascript">
var a=0;
var a_tomb= new Array();
var nav=document.getElementById('nav_linkek').getElementsByTagName('a');
for (var i=0; i<nav.length; i++)
{
a_tomb[a]=nav[i];
a++;
}
linkek_szama = a_tomb.length;
document.write('A <div id="nav_linkek"> területen található, <a> elemek száma= ' + linkek_szama);
// A 3.<a> hivatkozási link, új tulajdonságának meghatározása.
a_tomb[2].style.backgroundColor="blue"; // Kék háttérszín.
a_tomb[2].style.color="white"; // Fehér betűszín.
a_tomb[2].style.fontSize="18px"; // Betűméret 18px.
</script>
Jelen esetben a html fájl megírásakor, nem csak a div szakasz kapott egyedi id azonosítót,
a linkek is egyedi id azonosítóval rendelkeznek.
Ebben az esetben egyenes ágon is, rákérdezhetünk bármelyik egyedi id azonosítóval rendelkező jelölőelemre.
A sárga háttérszínnel kiemelt részre, írjuk be azon jelölőelem egyedi azonosító nevét, melyet be akarunk, azonosítani.
Példa:
Keressük meg a 6. <a> elemet, és határozzunk meg, új tulajdonságokat.
<script type="text/javascript"> var beazonositott=document.getElementById('nav06') beazonositott.style.backgroundColor="white"; // Fehér háttérszín. beazonositott.style.color="blue"; // Kék betűszín. beazonositott.style.fontSize="18px"; // Betűméret 18px. // Meglévő szöveg után, beíratjuk a következő szöveget,(" --- utolsó teszt link") beazonositott.innerHTML +=" --- utolsó teszt link"; </script>