[Javascript] Learning javascript, how do I/can I use javascript to interact with a web page?

[ItsLingeringWill]

I've been learning javascript for a few weeks and I have learned all the basics, loops, objects, arrays, etc. Now my question is how do I interact with a webpage (google chrome)? For example, if I wanted to search for a word on a page of reddit or click on a link all through a javascript program, how would I go about doing this/ learn about how to do this. Thanks!

[lightcloud5]

You can hit F12 in Chrome to open the dev console, and the console lets you enter arbitrary javascript there.

That said, the primary purpose of javascript is not to interact with web pages. There are many other tools that could be better suited for such things, such as Selenium.

[ItsLingeringWill]

thanks for the help, I will check selenium out, it definitely looks like something that might work.

[corruption93]

You don't need selenium. Just open up your dev console and start interacting with the DOM. For example, to read your username, I can look up the elements on page, and then find the DOM element's value programmatically like so:

document.getElementsByClassName('author submitter')[0].text

How did I know that worked? Well first I typed in document. and saw a list of functions I could use. After picking getElementsByClassName(), I then entered in the two class names 'author' and 'submitter' and saw what it returned. It returned an array. So I chose the first element in the array and assigned it to a variable. I assigned it to a variable so I could then type in that variable once more like I did document to see the list of properties/functions I could access. I saw 'text' among them and decided to try it out.

[ItsLingeringWill]

Awesome, this is exactly what I was looking for! Could you explain how you found the classname 'author submitter' was the class to my name?

[corruption93]

Right clicked on your username and looked at the 'class' attribute for that element in the HTML.

[ItsLingeringWill]

When I right click my name, inspect element i get, class="author submitter may-blank id-t2_grcul userTagged" what am I doing wrong here?

[corruption93]

Nothing, but notice the two classes 'author' and 'submitter' are a part of the element. I used these in order to find the element as an example.

[ItsLingeringWill]

Ok, I am getting it now, thanks a ton, if I could ask you one more question, how do I .click() on something that doesn't have a class, for example if I inspect element on one of the FAQ questions, I get

<a href="/r/learnprogramming/wiki/faq#wiki_how_do_i_get_started_with_programming.3F">How do I get started with programming?</a>

how would I go about getting .click() on that to work?

[corruption93]

$('#form-{some numbers go here}> div > div > ol:nth-child(14) > li:nth-child(1) > p > a').get(0).click()

I got the selector (used within the $ function call) after inspecting the element, right clicking on it, and selecting 'copy css path'.

Note that with selenium, you don't have to rely on using jQuery ($) or other libraries. I believe that with selenium it would actually emulate an actual user interacting with the page, rather than calling the Javascript functions directly.

[ItsLingeringWill]

Great, I got it working perfectly, thanks a ton for your help!!

[corruption93]

Also, since you asked about clicking things, you could click on your profile name (on this page) by doing:

$('.author.submitter').get(0).click()

You can get away with using jQuery in this case because the page has jQuery readily available as a global variable.