Okay, so now enough talking.
It's time to actually start trying to get some data from the website.
So we let's try and get the titles of the job first.
So instead of going into NodeJS and writing out our CSS selectors there and testing them out, it's
a lot easier to do it inside the Chrome browser first and test out if you can get the data you need
because if you do it inside Node JS first, then you have to start up the chromium browser every time
and then you go, okay, that didn't work.
Then you have to close down the browser and write some code and try and start up the browser again.
And it just takes longer time.
So let me show you how I debug or find out what CSS selectors to use directly inside the browser.
So inside the page here with all the listings, let's go and press F12 to open up the Chrome developer
tools.
And then in here let's press the expect tool to select elements on a page and see exactly where in the
page HTML it.
The element is located.
So now I have the selector enabled and I can click on the title here.
So if I click on that, I now get redirected to exactly where in the HTML the element is.
So now I can, now I can inspect the element and see how is it made up, what kind of attribute or classes
does it use?
So I can see here that the text content of this a HTML element is the job title.
And then there's a href attribute which is containing the link to the job description.
Then there's a data ID property, probably something that Craigslist is using internally.
When they are generating the page, it's not relevant to us right now.
And then there is a class attribute containing the result title and the A shorthand header link text
here.
So what we can do now is that we can select this element using the CSS class selector.
So we can use the result title here and try to select all the elements with this CSS class.
And using this, we can then extract all the job titles from this website.
So let's go ahead and I'm going to copy this result title CSS class here, just Ctrl C, just so we
have it in the clipboard here.
So I'm going to write out the jQuery CSS selector now.
So that's going to be a dollar sign and then a parenthesis, then a quote, and then I will put a dot
in front and then the result title.
Now the dot in front is because it is a CSS class, If it was a CSS or an ID, it would be a hashtag.
It was just an element, like an a element.
It would just be an A, But now because we're trying to target a CSS class, all these titles have the
CSS class of result title.
Then we have the dot in front.
And then we can say dot and then we are going to iterate through each of these elements and do something.
So we can say dot each and this each loop have a two arguments.
It has an index which is just the index where the element is in the array, and then we have the element
that is going to return.
So the element is just the well, you can call it jQuery element that you can then extract data from.
So we are going through each of these result titles and then we can say console log.
Then dollar sign again and then pass in the element instead and say dot text.
Then close all of the parenthesis and then when I press this, I will see all of the titles here.
So that's all of the job titles right there for us.
And now after fiddling around and we found out what kind of CSS selector we can use to get this property.
The job titles.
We're now going to move on to the NodeJS section where we put it inside of NodeJS and actually use it
to scrape the data using NodeJS.
So see you in the next section.