Encadenamiento de métodos y propiedades en JavaScript

Supongamos que tenemos un input:

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

Mostremos el texto del input en pantalla:

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

Como puedes ver, primero obtenemos el elemento por su id, escribimos este elemento en la variable elem, y luego mostramos en pantalla la propiedad value de esta variable.

En realidad, no es necesario introducir la variable elem, sino que se puede construir una cadena de puntos de esta manera:

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

De la misma manera - en cadena - se puede realizar la reescritura de atributos:

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

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

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