Traversierung mit parentElement

Ein Javascript Beispiel für Traversierung. Dabei geht darum, Eltern oder Kindelemente in einem Dom Baum zu finden.

Mit parentElement suchen wir das Elternelement eines Sliders (input type="range"). Von diesem Elternelement aus suchen wir nach einem output-Element und zwar mit parent.querySelector( 'output' ). Wie man sieht kann man die Selector Methoden auch auf anderen Elementen aufrufen als auf document. So bekommt man genau das output-Element welches das gleiche Elternelement hat wie der Slider.

Rot: 200

Grün: 100

HTML

<div class="slider-group">
        <label>Rot:</label>
        <input type="range" min="0" max="255" value="200">
        <output>200</output>
        </div>

Script

        // Wir lauschen auf alle Eingaben innerhalb des Dokuments
        document.addEventListener( 'input', ( e ) =>
        {
        // 1. Prüfen, ob das Event von einem Range-Slider kam
        if ( e.target.type === 'range' )
        {

        // 2. Vom Slider zum Eltern-Div hochgehen
        const parent = e.target.parentElement;

        // 3. Innerhalb dieses Divs das Output-Element finden
        const output = parent.querySelector( 'output' );

        // 4. Wert aktualisieren
        if ( output )
        {
        output.textContent = e.target.value;
        }
        }
        } );