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