So then when we work with the Dom and we're adding, removing or changing content on a web page, there's
a couple of steps involved.
Now the first step is to decide which element on the page.
We want to either add some content to or remove content from or change in some way and then reach into
the Dom and get a reference on that element.
So that's the first step.
And this action of reaching in and selecting elements is known as querying the Dom.
So once we've done that first step, then we're in a position to carry out the next step, which is
the part we actually do something with that element like change its content.
So for now we're just going to focus on the first step reaching into the Dom and getting a handle or
a reference on certain elements and nodes so that we can do something with them later.
First of all, let me take you to the index page and we can see a few different elements on this page.
So we're going to try querying the Dom for these different elements so we can see we have £0.03 tags
right here, one with a class of error.
Now say for example, I want to reach in and grab this P tag right here and get a reference on that
element.
So the first thing we're going to do is store our reference to this element in some kind of variable.
So I'm going to create a constant and I'm going to call it para for paragraph and set it equal to something.
Now remember, we use the document object whenever we want to do something with the web page.
So I'm going to say document first of all, then I'm going to use a method on that document object called
query selector.
So this, in my eyes, along with another query selector method I'll show you in a minute, is the best
way to actually grab an element from the Dom or query the dom.
So all we do is place a CSS selector in here as a string to whatever element we want.
Now, if you need a refresher on CSS selectors, then check out my YouTube series on CSS.
I'll leave the link attached to this lecture, but essentially, if we want to grab the first p tag
right here, we can just say we want P and that is going to grab that tag.
Now what this does is it goes into the document and it goes from top to bottom and it grabs the first
p tag, it comes across and then it ignores the rest of them.
Okay, So this is okay if you want to grab the first p tag.
Now what I'm going to do is just log this to the console.
Console dot log para oops para and save it.
And let's view this.
So now we can see this p tag.
So now we have a reference to this paragraph tag inside this constant.
And then later on we can do things with that paragraph tag like change the style of it or delete it
or change the content, etcetera.
Okay, so imagine now we wanted to get something else.
Imagine we wanted to get this P tag right here.
How would we do that?
Well, we can't use this selector P because that gets the first one it finds.
But we can use the class selector because this has a class of error.
So in CSS, the way we do that is by saying dot because this is a class, then the class name error.
So if I save this now, it's going to get a reference to that paragraph here in this thing right here
and then we'll log in that to the console.
So save it and check this out in a browser.
And now we can see we have this thing over here.
Now, what if I go to the index page and down here I add another div, give this a class of error and
then say this is another error.
Now imagine I want to get this thing right here.
Well, what can we use?
We can't use the error class because that will just grab the first error it comes across, which is
this and ignore the rest.
So we can't use a div because it would come across the first div which is right here.
So we have to combine these.
We want a div which is an error and the way we create a CSS selector for that is by saying div dot error.
This gets us a div with a class of error and that's unique.
There's only one div on the page with a class of error.
So if we save this now and come over to the browser, we can see now we have this div again.
If you need a refresher on CSS selectors, make sure you check out my CSS playlist on YouTube.
The link is attached to this lecture, but you always have the browser to help you out.
If you're not sure what a selector is, you can come to the browser and if you wanted to get a selector
for something, you could right click it, inspect it, then inside the elements tab highlight the element
you want a selector for.
Right click it, go to copy and go to copy selector and that gets us a unique CSS selector for that
element.
So if I now go over here and paste that inside here, that would get the H1 and you can see we're looking
for the body and then the first H1 child.
So save it and let's go to the console and we can see we get that H1.
Okay.
All right then.
So that is the query selector right here.
Now, what if we wanted to grab multiple elements?
We don't just want to go in and grab one particular tag.
For example, we want to go in and grab all of them and do something with all of them.
Well, we can do that using another version of the query selector.
Very similar.
It's called query selector all so I could say const Paris plural and set that equal to documents dot
query selector all and then we pass in the CSS selector.
Well we just want the P tags.
So that is going to go into the document and it's going to get a reference to all of the P tags and
it's going to store it as a collection inside the Paris constant.
So now if I console dot log Paris and save this, we can see this over here and it's a node list and
we can see these three different things in it, P, P and P error.
So these £0.03 tags, it's gone in, got a reference to all of those and it stored them in a single
node list.
Now this node list looks very much like an array, but it's not an array.
We can't use all the array methods on a node list, but we can do some things with it, like an array.
We can use square bracket notation to select a single element from that node list.
So for example, I could say console dot log Paris zero to get the very first element, save that and
we can see the first P.
If I do two, it's going to get the third one.
Remember, this is because JavaScript is zero based.
We start at zero, then one, then two and we can see we get the third one right there.
Okay.
Now much like an array we can also use for each.
So I could say something like.
Like Paris for each.
And then we'll take each paragraph.
That's the singular.
That's what I'm calling it.
This is an arrow function with this.
Parameter.
So it cycles through the node list.
And for each individual node we get access to that inside the callback function and we can just say
console, dot, log the power and let's put our semicolons on, save it.
And down here we can see it cycles through them and we get each one logged to the console.
The last one is logged twice because we also have this down here.
Okay.
So we can use for each on node lists as well, which are basically just a group of elements, a group
of nodes.
Okay.
So let's do another example.
I'm going to say const errors is now equal to documents, dot query selector and we want all and then
we want the errors.
So dot error.
So anything with a class of error that's this p tag and this div tag.
So we want both of those in a node list.
So let me save and save over here.
And what we're going to do is log out the errors this time, save it and preview and now we can see
we have a node list with two items P error and div error as well.
So now we've got both of those.
So these two methods query selector to get a single element and query selector, all to get several
elements.
They in my opinion are the two best methods to select elements from the HTML document.
But there are other ways too which can be useful at times.
And we're going to have a look at those in the very next lecture.
