Menetelmä- ja ominaisuusketjut JavaScriptissä

Oletetaan, että meillä on syötekenttä:

<input id="elem" value="text">

Luodaan syötekentän teksti näytölle:

let elem = document.querySelector('#elem');
console.log(elem.value); // tulostaa 'text'

Kuten näet, saamme ensin elementin sen id:n perusteella, tallennamme tämän elementin muuttujaan elem ja sitten luomme näytölle ominaisuuden value tästä muuttujasta.

Itse asiassa muuttujaa elem ei tarvitse ottaa käyttöön, vaan ketju voidaan rakentaa pisteillä näin:

console.log( document.querySelector('#elem').value ); // tulostaa 'text'

Samalla tavalla - ketjuna - attribuutteja voidaan myös kirjoittaa uudelleen:

document.querySelector('#elem').value = 'www';

Annettu seuraava koodi:

<img id="image" src="avatar.png">

let image = document.querySelector('#image');
console.log(image.src);

Muunna yllä oleva koodi siten, että muuttujan image käyttöönoton sijaan käytetään ketjua.