A class azonosítók keresése.1207

<p class="paragrafus">1. Almás pite.</p>
<p class="paragrafus">2. Dió.</p>
<p>3. Eper.</p>
<p class="paragrafus">4. Körte.</p>
<p>5. Répa.</p>
<p>6. Retek.</p>
<p class="paragrafus">7. Linkek:<br />
    <a href="#link" class="linkek"> 1. Első link</a>
    <a href="#link" class="linkek"> 2. Második link</a>
    <a href="#link" class="linkek"> 3. Harmadik link</a>
    <a href="#link" class="linkek"> 4. Negyedik link</a>
</p>

<script type="text/javascript">
var p_jeloloelemek=document.getElementsByTagName("P").length;
document.write("<b>A programot megelőzően található p elemek száma= </b>" + p_jeloloelemek);
</script>

A for ciklussal is meghatározhatjuk, a kiválasztott elemek számát.

<script type="text/javascript">
    var ptag=document.getElementsByTagName("P");
         for ( var i=0; i<ptag.length; i++) 
           {
             // Feladatot nem határozunk meg!
           }
	document.write("A programot megelőzően található p elemek száma= " + i);
	document.write("<br />");
</script>

<script language="JavaScript" type="text/javascript">
  var s=0;     // Definiálunk egy számlálót.
  pclass=document.getElementsByTagName("p");   // Megkeresünk minden p elemet.
  
     for (i=0 ; i<pclass.length;  i++)  	
       {
         // Ciklus átugrása ha, className nem egyenlő paragrafus névvel.
         if (pclass[i].className!="paragrafus") {continue ;}
           // Számlálót növeljuk egyel, ha a className egyenlő "paragrafus" névvel.
           s++;
       }

// Kiíratjuk az eredményt.	   
document.write('A <p class="paragrafus"> elemek száma= ' + s);
</script> 

<script language="JavaScript" type="text/javascript">
pc=document.getElementsByTagName("p");   // Megkeresünk minden p elemet.
 for (i=0 ; i<pc.length;  i++)  	
  {   // Ciklus átugrása, ha a className nem egyenlő "paragrafus".
   if (pc[i].className!="paragrafus") {continue ;} 
	 
   // Tulajdonság megváltoztatása azon p elemeknél, melyek azonosítója: class="paragrafus.
          pc[i].style.backgroundColor="white";     // Fehér háttér.
          pc[i].style.color="red";                         // Piros betű.
          pc[i].style.fontSize="20px";                  // Betűméret 20px.
  }
</script> 

<script language="JavaScript" type="text/javascript">
var a=0;                                             // Definiálunk egy számlálót.
var tomb= new Array();                        // Előkészítünk egy tömböt
 pt=document.getElementsByTagName("p");  // Megkeresünk minden p elemet.
/* 
Kiválogatjuk a class="paragrafus" azonosítóval rendelkező elemeket, és  
az előkészített tömbbe íratjuk az értékeket.
*/

  for (i=0 ; i<pt.length;  i++)  	
   {
          if (pt[i].className!="paragrafus") {continue ;}
          tomb[a]=pt[i];
          a++;
   }
   
tombhossz = tomb.length;
document.write("<b>A tömbben tárolt elemek száma= </b>" + tombhossz);
/* 
Tulajdonság meghatározása:
A tomb[2]szám, a 3. <p class="paragrafus"> elemnek felel meg.
*/
        tomb[2].style.backgroundColor="yellow";
        tomb[2].style.color="red";
        tomb[2].style.fontSize="20px";
</script> 

<script language="JavaScript" type="text/javascript">
    var x=0; y=0;
    var x_tomb= new Array();   
    var y_tomb= new Array();	 
 paragrafus=document.getElementsByTagName("p");  // Megkeresünk minden p elemet.
 
// A "p" jelölőelemek szelektálása.
  for (i=0; i<paragrafus.length;  i++)  	
    {
        if (paragrafus[i].className!="paragrafus") {x_tomb[x]=paragrafus[i]; x++;}
        else{y_tomb[y]=paragrafus[i]; y++;}
    }
x_tombhossz = x_tomb.length;
y_tombhossz = y_tomb.length;

document.write("Az x_ tömbben tárolt  azonosító nélküli <p> elemek száma= " + x_tombhossz);
document.write('<br />Az y_tömbben tárolt <p class="paragrafus"> elemek száma= ' + y_tombhossz);
/*
Megkerestünk minden p elemet, melyek programunk előtt helyezkednek el.
Mostantól tetszőleges p elem vagy elemek tulajdonságát megváltoztathatjuk,
a tömbök elemszámának meghatározásával.
A tömb elemek sorszámozása, 0-val kezdődik. 
Példa: y_tomb[2], a 3. <p class="paragrafus"> elemnek felel meg.
*/

// Egy p elem kijelölése, és stílusának megváltoztatása.
        x_tomb[0].style.backgroundColor="yellow";   // Sárga háttér.
        x_tomb[0].style.color="red";                         // Piros betű.
        x_tomb[0].style.fontSize="20px";

// Több p elem kijelölése, egységes stílus megjelenésre.			
 for (i=0; i < x_tombhossz;  i++)  	
  {	
      if(i>0 && i<3)
       { 
         x_tomb[i].style.backgroundColor="green";   // Zöld háttér.
         x_tomb[i].style.color="white";                     // Fehér betű.
         x_tomb[i].style.fontSize="20px";
       }
  }
</script>