Elemek kiválasztása

  • javascript-category
    Ciklusok
  • javascript-category
    Események
Elemek kiválasztása

Hogyan választhatunk ki elemeket, kérhetjük le az adataikat vagy módosíthatjuk.

Haszontalannak jelölve: 0
Hasznosnak jelölve: 0
Kulcsszavak: wannacode, kurzus, javascript, course, a javascript elemek kiválasztása, javascript select elements
Elérhető: Nem érhető el

Erre a folyamatra azért van szükség, mert ahhoz, hogy JavaScript segítségével az oldalon változtatásokat tudjunk végrehajtani különböző elemeken, vagy csak az értékeit le tudjuk kérni, ki kell tudjuk választani az adott elemeket.

Az elemek kiválasztására többféle képpen is lehetőségünk van:

  • Az elemeknek beállított ID alapján
  • Az elemeknek beállított osztályok alapján
  • Az elemek neve alapján
  • Az elemek tagja alapján
  • CSS selector alapján

Az elemek kiválasztása után lényegében bármit tudunk csinálni az adott elemekkel, megváltoztathatjuk a tulajdonságaikat, törölhetjük, átmásolhatjuk máshova, mozgathatjuk, lemásolhatjuk, stb.

Az elemeknek beállított ID alapján

Ennek a folyamatnak a segítségével egy és csak egy elemet tudunk lekérni, amelyiknek az ID-hoz beállított értéke egyenlő azzal amit mi keresünk. Ha véletlenül két ilyen létezne (normális körülmények között nem szerepelhet kétszer) akkor is csak az elsőre megtalált elemet fogja visszaadni.

Használata:

    
        <input type="text" id="keresett_ID" />

        <script type="text/javascript">
            var item = document.getElementById( "keresett_ID" );
        </script>

Ebben az esetben az item nevű változóba kerül be a kiválasztott elem, ha létezik az oldalon, majd a változón keresztül kérhetjük le az adatokat, tulajdonságokat vagy megváltoztathatjuk azokat:

    
        <script type="text/javascript">
            // lekérni az elem értékét
            var value = item.value;

            // megváltoztatni az értékét
            item.value = "2";
        </script>

Az elemeknek beállított osztályok alapján

Ennek a folyamatnak a segítségével egyszerre több elemet tudunk lekérni, amelyeknek a class tulajdonsághoz beállított értékei között szerepel amit mi keresünk. Ha több ilyen elem van, az egészet visszakapjuk, de ha csak egy van, akkor is listát fogunk kapni, amelynek egy eleme van.

Használata:

    
        <input type="text" class="keresett_CLASS egyéb_CLASS" />

        <script type="text/javascript">
            var items = document.getElementsByClassName( "keresett_CLASS" );
        </script>

Ebben az esetben az items nevű változóba kerül be egy lista a kiválasztott elemekkel, ha léteznek az oldalon, majd egy ciklus segítéségvel végigmehetünk a listán és az elemeket egyesével módosíthatjuk, stb.

    
        <script type="text/javascript">
            var i, item, value;

            // lekérni az elemek értékét
            for( i=0; i < items.length; i++ )
            {
                // egyesével kivesszük az elemeket, mindig az i. elemet
                item    = items[i]

                // majd kiolvassuk az értékét
                value   = item.value
            }
        </script>

Az elemek neve alapján

Ennek a folyamatnak a segítségével, hasonlóan az osztályokhoz, egyszerre több elemet tudunk lekérni, amelyeknek a name tulajdonsághoz beállított értéke egyenlő azzal amit mi keresünk. Ha több ilyen elem van, az egészet visszakapjuk, de ha csak egy van, akkor is listát fogunk kapni, amelynek egy eleme van.

Használata:

    
        <input type="text" name="keresett_NEV" />

        <script type="text/javascript">
            var items = document.getElementsByName( "keresett_NEV" );
        </script>

Majd az elemek feldolgozását ugyanúgy végezzük ahogy az osztályoknál is.

Az elemek tagja alapján

Ennek a folyamatnak a segítségével, hasonlóan az osztályokhoz, egyszerre több elemet tudunk lekérni, amelyek olyan típusú tagok, mint amit mi keresünk. Ha több ilyen elem van, az egészet visszakapjuk, de ha csak egy van, akkor is listát fogunk kapni, amelynek egy eleme van.

Bármilyen HTML tagra rákereshetünk, mint pl. input, a, img, p, stb.

Használata:

    
        <input type="text" />

        <script type="text/javascript">
            var items = document.getElementsByTagName( "input" );
        </script>

Majd az elemek feldolgozását ugyanúgy végezzük ahogy az osztályoknál is.

CSS selector alapján

Ennek a folyamatnak a segítségével, hasonlóan az osztályokhoz, egyszerre több elemet tudunk lekérni, amelyek olyan tulajdonságokkal rendelkeznek, mint amit mi keresünk egy adott CSS selector segítésgével. Ha több ilyen elem van, az egészet visszakapjuk, de ha csak egy van, akkor is listát fogunk kapni, amelynek egy eleme van.

Használata:

    
        <input type="checkbox" class="keresett_CLASS" id="keresett_ID" />

        <script type="text/javascript">
            // osztály alapján, de csak input
            var items = document.querySelectorAll( "input.keresett_CLASS" );

            // vagy ID alapján
            var items = document.querySelectorAll( "input#keresett_ID" );

            // vagy azok az inputok amelyiknek a típusa checkbox
            var items = document.querySelectorAll( "input[type='checkbox']" );
        </script>

Majd az elemek feldolgozását ugyanúgy végezzük ahogy az osztályoknál is.

Hasonló leckék