Пусть у нас есть инпут:
<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);
Укажите на недостатки данного кода. Исправьте их.