Now, let's comment out this code here
and let's write this again,
but let's now use these query functionalities.
We know that we want to
get access to this anchor element in the end
and one way of doing that would be to give it an id,
"external-link" for example,
the id text of course, is up to you.
And now we've got a function in JavaScript,
which we can use to get access to that element by id.
It's a function, or to be precise, a method
that exists on the document object.
There, we have the getElementById
method
written like this,
and you should make sure you write it correctly.
If you add a typo in there, then it won't work.
Of course, using auto-completion is your safest bet
of avoiding typos.
Now, getElementById is a method,
hence we execute it like this,
and it's a method that wants a parameter
and the parameter should be the id for which you're looking.
So it should be a string, hence we need quotes,
and then in there the id which we added on an element,
in this case, "external-link".
And then this will look for an element with that ID
and if it finds it, it gives us access to that element,
it returns that element.
And we learned about return statements in functions before.
This essentially is a built-in function, a built-in method,
that does return this element we're looking for by its id.
So this function will return this element object,
in our case here, this anchor element object,
and since that's the case, we can add a dot here
because we know that this here returns an object.
So now with that dot here, we dive into that returned object
and do something with it.
Alternatively, we can, of course,
also store this returned object in a variable,
and here I'll quickly store it in a variable,
"anchorElement" could be a fitting name,
and then we can access anchorElement dot something
in a new line.
That's totally up to you.
We can do it in the same line or store it in a variable
and then do it in a new line.
The latter approach has the advantage of avoiding
overly long lines and therefore,
it tends to lead to cleaner, easier to read code.
So I personally prefer splitting this across two lines
and using a variable here.
Of course, we must use a variable
if we ever want to use this anchor element again
anywhere else in our code.
Then we should always store it in a variable.
Otherwise, if we would want to use it again later
in other parts of our code, we would have to re-fetch it.
We would have to rerun this, getElementById command.
So if that's our plan,
storing it in a variable and only running this command once
will be a bit more efficient.
Either way, we are operating
on that element that is returned by getElementById.
And since we know that this is an anchor element,
we can access the href property as we did it up here
and assign our new value as we did it up here.
So just assign a new value.
And that's simply a quicker and more secure way
of getting access to a specific element by its id.
This is how we can search for a certain element in our DOM,
in our HTML code, so to say,
and then do something with it.