Menetelmä- ja ominaisuusketjut JavaScriptissä

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

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

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

javascriptlet 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:

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

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

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

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

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