A DOM és módszerei lehetővé teszik, a módosítandó elemek lekérdezését, kijelölését.

A DOM-elemek (xhtml jelölőelemk) elérései:

HTML fájl területén:


1. Tag, azaz jelölőelemek száma, a weblap készítőjétől függ. Objektum, azaz, terület beazonításra alkalmas tag, azaz, jelölőelem az, melyben tartalom helyezhető el.
   Tartalommal nem rendelkezők, például: <hr> <br> <wbr> jelölőelemek.


2. id azonosítóval csak egy tag, azaz, jelölőelem szerepelhet ugyanazon elnevezéssel.


3. class azonosítóval, tetszőleges számú tag, azaz, jelölőelem szerepelhet ugyanazon elnevezéssel.


4. Megjegyzés:
   Tetszőleges jelölőelemnek adhatunk id és class azonosítót. ( <div id="valami" class="valami"> <p id="paragraf" class="valami"> )
   Ekkor a class szerepe az alpstílusok meghatározása, id azonosítót feldolgozó programok alkalmazzák elem beazonosításra és manipulálásra.

---

• HTML tag, azaz, jelölőelemek lekérdezése:
  
  
  document.getElementsByTagName('tag-neve');
  
  
  • A 'tag-neve' helyére, a keresendő html jelölőelem nevét (betűjelét) kell beírni.
  • Fenti lekérdezés, visszaadja az összes olyan jelölőelem, azaz objektum listáját, melyet meghatároztunk.
  • JavaScript programunk, megkeresi az összes általunk kiválasztott jelölőelemet, és számozott tömb formátumban tárolja.
  
  

---

1. Első "p" tag, azaz, jelölőelem.

2. Második "p" tag, azaz, jelölőelem.

---

• Példa a <p> jelölőelemek lekérdezésére: document.getElementsByTagName('p')
  
  • Annak lekérdezése, hogy az általunk lekérdezett jelölőelem, mennyiszer szerepel weboldalunkon?
    var p_tagok = document.getElementsByTagName("P").length;
    // Kiíratjuk az eredményt.
    kiiratasi_hely = document.getElementById("id_azonosító");
    kiiratasi_hely.innerHTML = p_tagok;
    ----------- Program eredménye =
  
  
  • Az első <p> jelölőelem kijelölése. (A tömbök sorszámozása "0"-val kezdődik.)
    document.getElementsByTagName('p')[0];
  
  
  • Első <p> jelölőelem tartalmának lekérdezése:
    var p1tartalma = document.getElementsByTagName("P")[0].innerHTML;
    Lekérdezett tartalom kiíratása, második <p> tag területére:
    document.getElementsByTagName("p")[1].innerHTML = p1tartalma;
    Teszteléshez egérkurzort,
    mozgassuk ide!

---

Azon HTML jelölőelemk lekérdezésére, melyek id azonosítóval rendelkeznek:

• Visszaadja az általunk meghatározott, id attribútummal (egyedi azonosítóval) rendelkező elemet (mint objektumot).
• Szabály: Minden html fájlban, ugyanazon id vagy name azonosítóval, csak 1, azaz, egy jelölőelem rendelkezhet.
  Oka: Ha több helyen is szerepel ugyanazon id="egyedi-azonosítónév", akkor a külső vezérlő programok,
  (Mint például a JavaScript is) nem tudják egyértelműen és elkülönülten kezelni, a jelölőelemeket.

---

---

1. Példa a <p id="p4"> jelölőelem (objektum) beazonosítására:
   document.getElementById('p4') Teszteléshez egérkurzort,
   mozgassuk ide!


2. <p id="p4"> jelölőelem (objektum) tartalmának lekérdezése:
   document.getElementById('p4').innerHTML;


3. Beágyazott elemeknél, kijelölések egymásba ágyazhatók.
   Példa:
   Az id="teszt" azonosítóval rendelkező jelölőelemen területén található, második <p> jelölőelem beazonosítására.
   document.getElementById('teszt').getElementsByTagName('p')[1]; Teszteléshez egérkurzort,
   mozgassuk ide!

---

<p class="pclass"> Hatodik "p" tag. </p>

<p> Hetedik "p" tag. Kiválasztott class="pclass" elemek száma = <span id="class_tagok"></span> </p>

<p class="pclass"> Nyolcadik "p" tag. </p>

---

Csak azon <p> jelölőelemek lekérdezése, melyek meghatározott class osztályazonosítóval rendelkeznek:
Ezen lekérdezésnek, nincs JavaScript-analogonja.
Létrehozhatunk (definiálhatunk) saját getElementsByClassName() függvényt, adott class osztályú elemek kijelöésére.

• Példa:
  Azt keressük, hogy mennyi olyan <p> elem van, melyek azonosítója: class="pclass"

  <script language="JavaScript" type="text/javascript">
     var s=0;       // Elhelyezünk, azaz, definiálunk egy számlálót.
     var ClassTag = new Array;          // Létrehozunk egy tömböt, mely, csak a "megadott-class-névvel" rendelkező elemeket tárolja.
    
    pclass=document.getElementsByTagName("p");  // Megkeresünk minden <p> jelölőelemet.
    
    for (i=0 ; i<pclass.length;  i++)  	
      {  
        if (pclass[i].className!="pclass") {continue ;}    // Ciklus átugrása, ha className nem egyenlő "pclass" névvel.
  	  
           ClassTag[s]=tagelem[i];                                      // ClassTag tömbbe tároljuk a meghatározott class névvel rendelkező jelölőelemeket.  
           s++;                                                                  // Számlálót növeljük egyel, ha className egyenlő "pclass" névvel.
      }
  		
  // Kiíratjuk az eredményt.
             kiiratasi_hely = document.getElementById("class_tagok");
             kiiratasi_hely.innerHTML =  '  '+s+'  ';
  </script>
  

  Teszteléshez
  egérkurzort,
  mozgassuk ide!

---

Vissza a lap elejére