JavaScript getElementBy és innerHTML használata (Szöveg írása HTML dokumentumba JS segítségével)
Ebben a leckében megtanuljuk azt, hogy hogyan írhatunk JavaScript segítségével szöveget egy HTML dokumentumba. Ennek mentén először bemutatjuk a getElementBy több különböző metódusát, illetve az innerHTML függvényt is. Majd ötvözzük ezt a két eljárást, hogy a címben említett feladatot megtudjuk oldani.
getElementBy
Először ismerkedjünk meg a getElementBy metódusokkal. A névből már leszűrhető, hogy egy elemet ér el valami alapján, amit a „By” szó után adunk meg.
Ezek a getElementBy metódusok érhetőek le a JavaScript-ben:
- getElementById()
- getElementsByClassName()
- getElementsByName()
- getElementsByTagName()
getElementById()
A leggyakrabban használt getElementBy metódus a getElementById(), ilyenkor az elemet ID alapján érjük el. Visszaadja azt az elemet, amelynek az ID-ja megegyezik az általunk megadott azonosítóval. Ha nem létezik a keresett ID, akkor null értékkel tér vissza.
Általában akkor használjuk, ha szeretnénk valamilyen adatot kinyerni egy elemből, illetve módosítani annak a tartalmát.
Az ID-nak egyedinek kell lennie, azonban ha a rendszer több ugyanazon ID-val rendelkező elemet talál, akkor az első találat értékét adja vissza.
Szintaxis
document.getElementById(AZONOSÍTÓ);
Code language: JavaScript (javascript)A document kulcsszóval azt adjuk meg, hogy erről a dokumentumról van szó, majd az „AZONOSÍÓ” helyére egy szöveget vár, amely a keresett elem azonosítója.
Példa
JavaScript kód
<body>
<p id="szoveg1">Ezt kérjük le.</p>
<p id="szoveg2">Ezzel nem foglalkozunk.</p>
<button onclick="szin()">Nyomd meg a működéshez.</button>
<script>
function szin() {
document.getElementById("szoveg1").style.backgroundColor = "yellow";
}
</script>
</body>
Code language: HTML, XML (xml)Eredmény
Ezt kérjük le.
Ezzel nem foglalkozunk.
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
A példában szerepel két p bekezdésünk, az egyiknek „szoveg1”, a másiknak „szoveg2” az azonosítója. A szkriptünkbe megadjuk, hogy keresse meg a dokumentum „szoveg1” id-val rendelkező elemét, majd megadjuk, hogy a stílusához szeretnék hozzányúlni, majd beállítjuk, hogy sárga legyen a háttérszín. És mindez egy gomb megnyomására történik meg.
getElementsByClassName()
Nem meglepő módon a „getElementsByClassName()” ugyanazt csinálja, mint az előző metódus, csak ez a megadott osztálynévnek megfelelő értékekkel tér vissza. Az előzőhöz képest még jelentős különbség, hogy egy osztálynak nem kell egyedinek lennie, így ez függvény egy tömbszerű objektummal tér vissza.
Szintaxis
document.getElementsByClassName(OSZTÁLYNÉV);
Code language: JavaScript (javascript)A document kulcsszóval azt adjuk meg, hogy erről a dokumentumról van szó, majd az „OSZTÁLYNÉV” helyére egy szöveget vár, amely a keresett elem azonosítója.
getElementsByName()
A „getElementsByName()” metódus azon elemek kollekciójával, gyűjteményével tér vissza, amelyek értéke megegyezik a „name” attribútummal.
Szintaktika
document.getElementsByName(NAME)
Code language: JavaScript (javascript)A document kulcsszóval azt adjuk meg, hogy erről a dokumentumról van szó, majd az „NAME” helyére egy szöveget vár, amely a keresett elem azonosítója.
getElementsByTagName()
Azon elemek gyűjteményével tér vissza, amelyek tag neve megegyezik az általunk megadottal.
Szintaktika
document.getElementsByName(TAGNÉV)
Code language: JavaScript (javascript)A document kulcsszóval azt adjuk meg, hogy erről a dokumentumról van szó, majd az „TAGNÉV” helyére egy szöveget vár, amely a keresett elem azonosítója.
innerHTML
Az innerHTML segítségével fogjuk valóra váltani a cikk címében említett dolgot, azaz szöveget írunk egy HTML dokumentumba a JavaScript segítségével.
Az „innerHTML„-t két dologra lehet használni:
Szintaktika
KeresettElem.innerHTML;
VAGY
KeresettElem.innerHTML = SZÖVEG;
Az első kód a HTML elem tartalmának lekérdezésében segít, ezt érdemes egyből kiíratnunk vagy eltárolnunk egy változóban, hogy később is feltudjuk használni. Vagy pedig azonnal végezhetünk vele valamilyen műveletet, vizsgálatot.
A második opció azok számára szükséges, akik szeretnék módosítani egy már létező HTML elem tartalmát. Ilyenkor a „SZÖVEG” helyére szükséges írnunk azt, amit szeretnénk beleíratni a keresett elembe. Fontos, hogy ebben az esetben alapértelmezetten felülíródik az elem eredeti tartalma az általunk beállított szöveggel.
A „KeresettElem” helyére a fent említett módszerekkel kell megadnunk azt, hogy melyik elemre gondolunk. Nézünk rá egy példát kicsit lentebb.
Példa
JavaScript kód
<body>
<p id="szoveg1">Ennek olvassuk ki a tartalmát.</p>
<p id="szoveg2">Ennek írjuk át a tartalmát.</p>
<button onclick="kiolvas()">Kiolvas.</button>
<button onclick="atir()">Átír.</button>
<script>
function kiolvas() {
alert(document.getElementById("szoveg1").innerHTML);
}
function atir() {
document.getElementById("szoveg2").innerHTML = "Erre írtam át a tartalmat.";
}
</script>
</body>
Code language: HTML, XML (xml)Eredmény
Ennek olvassuk ki a tartalmát.
Ennek írjuk át a tartalmát.
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Létrehoztunk két függvényt, a „kiolvas()” csak kiolvassa a tartalmat és egy alert()-be kiírja azt, míg az „atir()” a „szoveg2” tartalmát cseréli le az „Erre írtam át a tartalmat.” szövegre.
