getElementsByTagName()

Hier das Beispiel

siehe auch mit Javascript auf Elemente zugreifen werner-zenk Tutorials

---

Um auf ein ganz bestimmtes Tag anzusprechen, wird die Position oder Reihenfolge beginnend bei 0 in eckigen Klammern notiert. Siehe hierzu auch das Thema Array.
document.getElementsByTagName("button") [0] wäre demnach der erste Button <button> der Html Seite.

HTML

<ul>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li>List 4</li>
    <li>List 5</li>
    <li>List 6</li>
    <li>List 7</li>
    <li>List 8</li>
    <li>List 9</li>
    <li>List 10</li>
</ul>

<button>list1Color</button>
<button>listAllColor</button>
<button>listColor ab 4, 5 Stück</button>
<button>listColor ab 2, 4 Stück</button>

Javascript

<script>
      function firstListColor () { 
        document.getElementsByTagName("li")[0].style.backgroundColor = "#00aaff";
    }

    function allListColor () { 
    let elem = document.getElementsByTagName("li");
        for(let i=0; i < elem.length; i++){ 
            elem[i].style.backgroundColor = "#00ffaa";
        }
    }
    
    function listColor(start, amount, color){
        let elem = document.getElementsByTagName("li");
        let end = start + amount - 1;
        
        for(let i = --start; i < end; i++){ 
            elem[i].style.backgroundColor = color;
        }
    }

     function listColorCall(a,b,c){
         return function(){
             listColor(a,b,c);
         }      
     }
      
    let b1 = document.getElementsByTagName("button")[0];
    let b2 = document.getElementsByTagName("button")[1];
    let b3 = document.getElementsByTagName("button")[2];
    let b4 = document.getElementsByTagName("button")[3];
        
    b1.onclick = firstListColor;
    b2.onclick = allListColor;
    b3.onclick = listColorCall(4,5, "#f0aab0");
    b4.onclick = listColorCall(2,4, "#ffff99");
</script>

Erklärung

Mit document.getElementsByTagName("li") bekommt man ein Array mit allen li Elementen. Über den index kann auf einzelnen Elemente zugreifen. Um alle Elemente anzusprechen kann man die Array Eigenschaft length in einer for-Schleife nutzen.

listColor()

Die Funktion listColor(start, amount, color) hat 3 Parameter. Man kann damit eine bestimmte Anzahl von List Elementen ansprechen. Der erst Parameter bestimmt ab welchem Element eine Änderung vorgenommen werden soll. Da die Zählung nicht bei 0 sondern bei 1 beginnen soll, wird in der for-Schleife von dem Startwert einer abgezogen. Das minus minus steht vor der Variable start damit es vor dem Ausführen des Ausdrucks i = start einer abgezogen wird.

let i = --start;

Der zweite Parameter bestimmt wieviele Elemente ausgewählt werden sollen. Da in der for-Schleife der Index bestimmt werden muss, ab dem die Schleife stoppt, muss dieser Index erst ermittelt werden.

let end = start + amount - 1;

Der dritte Parameter bestimmt die Farbe

listColorCall()

Die Funktion listColorCall() wird benötigt, da man einem onclick Event nur einen Funktionsausdruck oder eine namenlose Funktion zuweisen kann. Da man hier jedoch ein paar Parameter zuweisen will, wurde diese Callback Funktion erstellt.

---

	nächste Seite
Javascript Tipps