Javascript, why only Document has the getElementById() method?

Question

The query is simple, because javascript only allows calling the getElementById() method at the root of the DOM tree? In other words? because only the object Document has the getElementById method().

The reason for my question is the impossibility of searching for a unique id element from any element.

The situation becomes even more curious when one discovers the querySelector() method that can be called in any element of the DOM tree, but with a huge limitation: IT DOES NOT ALLOW ALTERATION OF THE ELEMENTS.

so I wish that they could indicate me good materials to understand this phenomenon so contradictory.

Answer 1

"querySelector() that can be called in any element of the DOM tree, but with a huge limitation: IT DOES NOT ALLOW CHANGING THE ELEMENTS."

Based on what you’re saying?
querySelector applies a selector and returns the reference an elemetho, as well as getElementById, none of them changes anything, who changes are the following commands, which can change the properties of the element, see the example below:

document.getElementById("div1").style.backgroundColor = "yellow";
document.getElementById("div1").innerHTML = "ALGUMA COISA";

document.querySelector('#div2').style.backgroundColor = "cyan";
document.querySelector('#div2').innerHTML = "OUTRA COISA";


// aqui um select "a partir" de outro elemento, o primeiro input após o "div2"
document.querySelector('#div2 ~ input').value = "algum texto";

div {
    height: 100px;
    width: 100%;
    margin: 10px 0;
    border: solid 2px #000
}

<div id="div1"></div>
<input type="text" />
<div id="div2"></div>
<p>Paragrafo</p>
<input type="text" />
<input type="text" />
<input type="text" />

"because javascript only allows calling the getElementById() method at the root of the DOM tree?"
Because the GIFT who represents every page and the elements contained therein, then consultations are made from it, I suggest reading more about DOM: https://developer.mozilla.org/pt-PT/docs/Web/API/Document

"because only the object Document has the getElementById method()"
And where else could he be, if the DOM is responsible for organizing the entire Web document? The whole organization of the elements in the structure of the page is made from it, taking the link above, we have this definition that explains it well:

The Document interface represents any web page loaded on browser and serves as an entry point for a page content web, which is DOM tree. The DOM tree includes elements such as

and , among many others. This provides functionality globally for the document, such as getting the page URL and creating new elements in the document.

That is, the "Document" represents the starting point.

"the impossibility to search for a unique id element from any element"

This I did not understand well, how is comparing the getElementById with querySelector, I suppose you’re looking for an element by ID, if the ID is unique I don’t understand the idea of looking for an element from another location than the Document, which is the root of the DOM element tree.

If it is a search that is not from the ID ai it makes sense, but for this you can use the selectors of the querySelector, as in the example of the above code which, from the div with id "div2", selected the first input.

"so I wish that they could indicate me good materials to understand this phenomenon so contradictory."
It is not the goal of Stackoverflow PT provide materials, here we post answers to questions with specific problems and the more objectives the better, I hope the answer help, but as a reference I put the link with the documentation of Document which should help clarify further doubts.