Advantages and disadvantages of chains in JavaScript

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.