Łańcuchy metod i właściwości w JavaScript

Załóżmy, że mamy pole input:

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

Wyświetlmy na ekranie tekst z pola input:

javascriptlet elem = document.querySelector('#elem');
console.log(elem.value); // wyświetli 'text'

Jak widzisz, najpierw pobieramy element po jego id, zapisujemy ten element w zmiennej elem, a następnie wyświetlamy na ekranie właściwość value z tej zmiennej.

W rzeczywistości można nie wprowadzać zmiennej elem, ale budować łańcuch z kropek w ten sposób:

javascriptconsole.log( document.querySelector('#elem').value ); // wyświetli 'text'

W ten sam sposób - łańcuchem - można również wykonywać nadpisywanie atrybutów:

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

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

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