Now getElementById is one very convenient
and good way of getting access to an element
by a unique identifier, by its ID.
But it's not the only way of getting access to an element.
An alternative is another utility function,
which you have built into JavaScript.
And that's the querySelector method,
which is also part of this document object.
So you see this document object is rather important,
just like getElementById, this is a method.
So we execute it like this with parentheses,
but unlike ID,
this does not want an ID as a parameter,
but instead it wants a CSS selector.
So as we would have used it in CSS code
As a string, but then any selector of our choice.
So we can use a tag selector here,
a clause selector or an ID selector.
So I could also select this element by ID by
writing this appropriate CSS ID selector,
which is #external-id
That's how we would select an element by ID in CSS.
And that's the kind of parameter value querySelector wants.
And now this will look for an element like this.
So here I then also again, get my anchor element.
And then here I can change this to yet another address.
For example, to our own homepage academind.com.
Now this is an alternative to getElementById.
And when you have alternatives,
the obvious question is always which alternative
where which approach is better.
Now the short answer is there is no better or worse approach
you can use either of the two.
but there is a key difference, actually.
getElementById as the name suggests is
really focused on getting elements by ID.
So it's a great way of getting a specific element
if you added an ID to it in your HTML code,
which you as the developer can always do.
querySelector on the other hand, wants any CSS selector.
it doesn't have to be the ID selector.
So here I could, alternatively also select my anchor tag
by not using the ID here,
but the "a" CSS selector, the type selector.
So selecting by HTML type.
Just as we can write CSS rules like this,
where we then for example,
change the color of all anchor elements.
That's what we can do in CSS.
And that's what we can do with querySelector.
And this will then select the first, important,
the first anchor element it finds on your page.
If you have multiple anchor elements
in different places of your HTML code,
querySelector will always give you the first element
that matches this selector condition.
But it's the extra flexibility compared to getElementById
that could be useful.
You can also have more complex selectors in here like "p a"
So selecting the first anchor element that sits
inside of a paragraph.
Just what you can do in CSS as well,
selecting anchor elements and paragraphs.
That's how you can do it here with the important difference
that this will always select the first matching element,
not all matching elements.
If you want to match all elements,
then you have querySelectorAll.
This will then not return a single element,
but all matching elements.
So it will return an array instead of a single object.
Here I want a single element,
so querySelector is what I want to use here.
And for the moment, that's it.
It already was a lot of new knowledge
with the drilling we can do
with those different utility functions.
But these are core mechanisms of selecting content
off your page and of working with JavaScript and the dom.
I can only encourage you that you do
play around with this console here in the dev tools
to find out what's inside the body here.
To drill into this body and use console.dir
to get that object view here.
So to say,
where you can really find out which properties
you have in there
and how you could use these properties to
navigate around between elements
or to access or change their content.
Play around with that,
because we'll do that a lot throughout the course,
but it definitely also won't hurt
if you play around a little bit with that first.