Цепочки методов и свойств в JavaScript

Пусть у нас есть инпут:

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

Давайте выведем на экран текст инпута:

javascriptlet elem = document.querySelector('#elem');
console.log(elem.value); // выведет 'text'

Как вы видите, мы сначала получаем элемент по его id, записываем этот элемент в переменную elem, а затем выводим на экран свойство value из этой переменной.

На самом деле можно не вводить переменную elem, а строить цепочку из точек таким образом:

javascriptconsole.log( document.querySelector('#elem').value ); // выведет 'text'

Таким же образом - цепочкой - можно производить и перезапись атрибутов:

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

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

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