javascripthtmlajax

Pure JavaScript from console: extract links from page, emulate click to another page and do the same


  1. I'm curious if it is possible with pure (vanilla) JavaScript code, entered into the browser console, to extract all links this (first) page, then emulate a click to go to another page, extract links there and go to the third page. Extract links means to write them into console.

  2. The same question as 1 but link to go to another page makes just an ajax call to update the part of the page and does NOT actually go to another page.

P.S. All links belong to one domain.

Any ideas how can this be done based on pure javascript?

As example, if you go to Google and enter some word ("example"), you may then open the console and enter

var array = [];
var links = document.getElementsByTagName("cite");
for(var i=0; i<links.length; i++) {
    array.push(links[i].innerHTML);
};
console.log(array);

to display the array of URLs (with some text, but that's OK).

It is possible to repeat it 3 times from page 1 to page 3 automatically with pure JavaScript?

P.S. I should actually extract <a> tags in the code above, so <cite> tags I named "links". Sorry for confusion (that doesn't change the question).


Solution

  • If you want to write all the links into the console, you can use a more specific command

    FOR GOOGLES

    // Firstly, you get all the titles
    var allTitles = document.getElementById("ires").getElementsByTagName("h3");
    for(var getTitle of allTitles ) { // For each title, we get the link.
        console.log(getTitle.getElementsByTagName("a")[0].href) 
    }
    

    Then, you only need to simulate a click on the nav.

    var navLinks = document.getElementById("nav").getElementsByTagName("a");
    navLinks [navLinks.length-1].click() // Click on the "Next" button.
    

    FOR ALL SITES

    If you want to get all the links, just do the same command, grab the div ID you want id you only want some part of the page, then use getElementsByTagName("a")

    You can find out how to use XHR or other to make raw AJAX request

    Simple example found on Google :

    // jQuery
    $.get('//example.com', function (data) {
      // code
    })
    
    // Vanilla
    var httpRequest = new XMLHttpRequest()
    httpRequest.onreadystatechange = function (data) {
      // code
    }
    httpRequest.open('GET', url)
    httpRequest.send()