Jelölőelemek beazonosítása TagName.1203

Minden TagName jelölőelem rendelkezik index-számmal. Első kiválasztott tag, indexe = " 0 "
Lekérdezékor eredményt, tömb formátumban kapjuk vissza.
Számuk lekérdezésekor, tömb elemeinek számát kapjuk eredményül.

1. Példa, összes kiválasztott TagName lekérdezésére:
var div_tag = document.getElementsByTagName("div");         Összes <div> tag, azaz, jelölőelemek lekérdezése.
var p_tag = document.getElementsByTagName("p");             Összes <p> tag, azaz, jelölőelemek lekérdezése.
var pre_tag = document.getElementsByTagName("pre");        Összes <pre> tag, azaz, jelölőelemek lekérdezése. 
var span_tag = document.getElementsByTagName("span");   Összes <span> tag, azaz, jelölőelemek lekérdezése.   

2. Példa, összes kiválasztott TagName számának lekérdezésére:
var p_tag_szama = document.getElementsByTagName("p").length;             Összes <p> tag, azaz, jelölőelem száma.

Az 1. példában már lekérdeztük a <p> tagokat, akkor számukat lekérdezhetjük így, is:
var p_tagok_szama = p_tag.length;

3. Példa, egy kiválasztott TagName beazonosítása, index értéke alapján:
var elso_div_tag = document.getElementsByTagName("div")[0];         Első <div> tag, azaz, jelölőelem beazonosítása.
var elso_p_tag = document.getElementsByTagName("p")[0];             Első <p> tag, azaz, jelölőelem beazonosítása.

Az 1. példában már lekérdeztük a <div> és <p> tagokat, akkor lekérdezhetjük így, is:
var elso_div_tag = div_tag[0];
var elso_p_tag = p_tag[0];

4. Példa, egy adott területen, összes kiválasztott TagName lekérdezésére.
Az  id="iddiv " azonosítóval rendelkező területen:
var iddiv_p_tag = document.getElementById("iddiv").getElementsByTagName('p').length;

A  class="classdiv" azonosítóval rendelkező területen, class azonosítóval több TagName, azaz, jelölőelem is rendelkezhet.
A class azonosítóval rendelkező TagName területeket, index értékük alapján, azonosítani kell:

var classdiv1_p_tag = document.getElementsByClassName("classdiv")[0].getElementsByTagName('p').length;
var classdiv2_p_tag = document.getElementsByClassName("classdiv")[1].getElementsByTagName('p').length;

<div id="szemlelteto">
<p> 1. "p" tag, azaz, jelölőelem. <span> "span" tag </span> </p>

<div id="iddiv">
     <p> 2. "p" tag, azaz, jelölőelem. <span> "span" tag </span> </p>
     <p> 3. "p" tag, azaz, jelölőelem.</p>
</div>

<p> 4. "p" tag, azaz, jelölőelem.</p>

<div class="classdiv">
     <p> 5. "p" tag, azaz, jelölőelem.</p>
     <p> 6. "p" tag, azaz, jelölőelem.</p>
     <p> 7. "p" tag, azaz, jelölőelem. <span> "span" tag </span> </p>
</div>

<div class="classdiv">
     <p> 8. "p" tag, azaz, jelölőelem.</p>
     <p> 9. "p" tag, azaz, jelölőelem.</p>
</div>

<p> 10. "p" tag, azaz, jelölőelem.</p>
</div>

<p> Összes "div" TagName száma: <span id="osszesDivtag"> </span> </p> 

<script type="text/javascript">
 var divtag=document.getElementsByTagName("div");
     db=divtag.length;
		// Kiíratjuk az eredményt.
           kiiratasi_hely = document.getElementById("osszesDivtag");
           kiiratasi_hely.innerHTML =  '  '+db+'  ';
</script>

Fenti programunk eredménye:
Összes "div" TagName száma:
Ebből:
- 4 db. A szemléltető területén van.
- 1 db. A tartalmi részt jelöli. Ez a szemléltetőnél, nem kerül kijelölésre.

<p> Összes TagName "p" száma: <span id="osszesPtag"> </span> </p> 

<script type="text/javascript">
 var ptag=document.getElementsByTagName("P");
     db=ptag.length;
		// Kiíratjuk az eredményt.
           kiiratasi_hely = document.getElementById("osszesPtag");
           kiiratasi_hely.innerHTML =  '  '+db+'  ';
</script>

Fenti programunk eredménye:
Összes TagName "p" száma:

<p> Összes TagName "p" száma: <span id="osszesPtagszama"> </span> </p> 

<script type="text/javascript">
    var P_szamlalo = 0;
    var ptag=document.getElementsByTagName("P");
         for ( var i=0; i<ptag.length; i++) 
           {
             P_szamlalo++;
             // Feladatot nem határozunk meg!
           }
		// Kiíratjuk az eredményt.
           kiiratasi_hely = document.getElementById("osszesPtagszama");
           kiiratasi_hely.innerHTML =  '  '+P_szamlalo+'  ';
</script>

Fenti programunk eredménye:
Összes TagName "p" száma:

<script language="JavaScript" type="text/javascript">
    var p01=document.getElementsByTagName('p')[1];
        p01.style.backgroundColor="yellow";
</script> 

<script language="JavaScript" type="text/javascript">
   var Bekezdesek = document.getElementsByTagName("p");
     for (i=0; i< Bekezdesek.length; i++) 
       {
         if(i>1 && i<4)
          {
            Bekezdesek[i].style.backgroundColor="white";
            Bekezdesek[i].style.color="red";
            Bekezdesek[i].style.fontSize="20px";
          }
       }
</script>

<script language="JavaScript" type="text/javascript">
    var elso_p=document.getElementsByTagName('p')[0].innerHTML;
	
	document.write("Az első <p> jelölőelem tartalma = " +elso_p);
</script> 

Fenti programunk eredménye:

<script language="JavaScript" type="text/javascript">
     var otodik_p=document.getElementsByTagName('p')[4];
	 var iras="  Ez egy új, teszt szöveg!";
         otodik_p.innerHTML += iras;
</script> 

<script language="JavaScript" type="text/javascript">

// 1. Kiolvassuk a meglévő tartalmat és változóhoz rendeljük.

     var p06=document.getElementsByTagName('p')[5].innerHTML;
	 
         eredeti_szoveg=p06;
		 
// 2. Elem beazonosítása, és a meglévő tartalom törlése.

     var p06=document.getElementsByTagName('p')[5];
         p06.innerHTML =" ";
		 
// 3. Az új szöveget, változóhoz rendeljük.

        uj_szoveg="Ez egy új teszt szöveg!  ";
		
		
// 4. Új szöveget + eredeti szöveget, változóhoz rendeljük, és kiíratjuk.

              uj_tartalom = uj_szoveg+eredeti_szoveg;
		
              p06.innerHTML = uj_tartalom;
</script>