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

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

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

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

let elem = document.querySelector('#elem'); alert(elem.value); // выведет 'text'

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

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

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

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

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

Дан следующий код:

<img id="image" src="avatar.png"> let image = document.querySelector('#image'); console.log(image.src);

Переделайте приведенный выше код так, чтобы вместо введения переменной image использовалась цепочка.

Преимущества и недостатки цепочек

Не смотря на то, что цепочки сокращают код, в большинстве случаев введение переменной все-таки удобнее. Сравните два примера - сейчас я ввел переменную elem и могу записыва любое количество атрибутов, при этом querySelector вызывается только один раз:

let elem = document.querySelector('#elem'); elem.value = 'www'; elem.type = 'submit';

А сейчас я не ввожу новую переменную и поэтому мне приходится вызывать querySelector два раза:

document.querySelector('#elem').value = 'www'; document.querySelector('#elem').type = 'submit';

На мой взгляд, этот код стал сложнее, хотя и занимает на одну строчку меньше. Кроме того, если я захочу сменить значение id с elem на какое-то другое, мне придется делать это во многих местах, что не очень удобно.

Есть и еще проблема - нагрузка на браузер. Поиск элементов по странице, который делает метод querySelector, является довольно медленной операцией (и вообще любая работа с элементами страницы - это медленная операция - запомните это).

В нашем случае, если мы каждый раз используем querySelector, то браузер каждый раз будет обрабатывать HTML страницу и искать элемент с заданным id несколько раз (не важно, что id одинаковые - браузер проделает все действия несколько раз), совершая бесполезные операции, которые могут замедлить работу браузера.

Если же мы используем переменную elem - никакого поиска по странице не происходит (элемент уже найден и ссылка на него лежит в переменной).

Дан следующий код:

<img id="image" src="avatar.png" width="300" height="500"> console.log(document.querySelector('#image').src); console.log(document.querySelector('#image').width); console.log(document.querySelector('#image').height);

Укажите на недостатки данного кода. Исправьте их.