Encadeamento de métodos e propriedades em JavaScript

Suponha que temos um input:

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

Vamos exibir o texto do input na tela:

javascriptlet elem = document.querySelector('#elem');
console.log(elem.value); // exibirá 'text'

Como você pode ver, primeiro obtemos o elemento pelo seu id, gravamos esse elemento na variável elem, e então exibimos na tela a propriedade value dessa variável.

Na verdade, não é necessário introduzir a variável elem, mas sim construir uma cadeia de pontos da seguinte forma:

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

Da mesma forma - em cadeia - também é possível reescrever atributos:

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

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

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