Despite the fact that the chains reduce the
code, in most cases the introduction of a
variable is still more convenient. Compare
the two examples - now I have entered the
variable elem
and I can write any
number of attributes, while querySelector
is called only once:
let elem = document.querySelector('#elem');
elem.value = 'www';
elem.type = 'submit';
And now I'm not introducing a new variable
and so I have to call querySelector
twice:
document.querySelector('#elem').value = 'www';
document.querySelector('#elem').type = 'submit';
In my opinion, this code has become more
complicated, although it takes one line
less. Also, if I want to change the value
of id
from 'elem'
to something
else, I have to do it in many places, which
is not very convenient.
There is also another problem - the load on
the browser. Searching for elements on the
page, which is done by the querySelector
method, is a rather slow operation (and in
general, any work with page elements is a
slow operation - remember this).
In our case, if we use querySelector
every time, then the browser will process
the HTML page each time and look for an
element with a given id
several
times (it doesn’t matter that id
are the same - the browser will do all the
actions several times), performing useless
operations that can slow down the browser.
If we use the variable elem
- no search
occurs on the page (the element has already
been found and the reference to it lies in
the variable).
Given the following code:
<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);
Point out the disadvantages of this code. Remove them.