WEBVTT

00:00.110 --> 00:06.110
So let's go ahead and select this element and get the output inside of a console tab.

00:06.680 --> 00:10.970
So open chrome developer tools and select the console tab.

00:11.450 --> 00:13.430
Then write out this code here.

00:14.180 --> 00:14.990
Const.

00:15.020 --> 00:22.220
A one element is equal to document dot query selector.

00:23.530 --> 00:26.050
And right in each one.

00:26.960 --> 00:30.950
And then let's see what the A1 element looks like.

00:30.980 --> 00:39.290
It is the HTML element that we selected using the H1 tag or element tag, so to say.

00:40.000 --> 00:47.170
Now remember that when we looked inside of this element with the select or inspect element feature,

00:47.290 --> 00:50.500
we could see that it was an H1 element.

00:50.890 --> 00:57.770
So using that, we can then select the element and then we can output the text via the console.

00:57.790 --> 01:04.030
So we can say text content and then we have the text content of this element.

01:05.400 --> 01:12.720
These things we can then use to execute inside of NodeJS so we can have a little script running on a

01:12.720 --> 01:18.570
server that goes to a page and then it selects the element and gets the text.

01:19.880 --> 01:24.950
But there is a easier way of getting elements than doing all of this.

01:25.800 --> 01:27.720
Let me show you how to do that.

01:27.840 --> 01:33.540
We use jQuery selectors instead of these vanilla JavaScript selectors.

01:34.160 --> 01:40.160
So jQuery is a library for JavaScript that was quite popular some years ago.

01:40.280 --> 01:47.660
Now it's not so popular because we have things like React and Angular for making web apps, but we can

01:47.660 --> 01:55.250
still use jQuery to select elements and it's quite handy to do that compared to using vanilla JavaScript

01:55.250 --> 01:56.180
selectors.

01:57.070 --> 02:03.010
So up here I have a little plugin that is injecting jQuery into a site.

02:03.280 --> 02:06.490
I do not have jQuery on this site already.

02:06.490 --> 02:09.970
Some pages already have jQuery in them.

02:11.110 --> 02:17.530
But you're going to come onto some sites that don't have jQuery installed already.

02:18.040 --> 02:22.690
So you can Google inject jQuery, Chrome.

02:23.840 --> 02:31.070
And then there's this first result I have here, and you can just install that jQuery inject.

02:31.610 --> 02:37.970
Then up here I get this little handy extension plug in here where I can just click on it.

02:37.970 --> 02:44.150
And now jQuery is injected into this page so I can use jQuery features.

02:44.360 --> 02:52.700
So that means I can simply type in a dollar sign and then put in my CSS selector, which is going to

02:52.700 --> 02:54.170
be H1.

02:54.650 --> 02:59.840
And then you can put in a dot text to get the text from this element.

03:00.500 --> 03:06.230
See how easy that is compared to all of this where we first select the element.

03:07.740 --> 03:10.140
And then we get the text content.

03:10.230 --> 03:18.240
So the equivalent in vanilla JavaScript would be to write Document.queryselector.

03:19.080 --> 03:21.870
Each one takes content.

03:22.860 --> 03:29.190
The point I'm trying to say here is that we're using jQuery because it makes things a lot easier for

03:29.190 --> 03:29.670
us.

03:29.940 --> 03:34.860
This is going to be a lot easier to use compared to the vanilla JavaScript.

03:36.720 --> 03:44.040
So with that being said, I hope you now got the jQuery plugin installed and you got this selection

03:44.040 --> 03:46.350
of the elements successfully working.