How can I make a userscript that gets the href attribute contents of every element in a specified class?

Question

This is the html format of the webpage:

<ul id="all_items_container" >
<li class="first item" id="">
    <a class="item title_link" href="#942" title="blah blah" id="" >
        <span class="title" >blah blah</span>
    </a>
</li>
<li class="item " id="">
    <a class="item title_link" href="#846" title="blah blah blah" id="" >
        <span class="title" >blah blah blah</span>
    </a>
</li>
<li class="item " id="">
    <a class="item title_link" href="#745" title="blah blah blah blah" id="" >
        <span class="title" >blah blah blah blah</span>
    </a>
</li>

I need to be able to get all of the href attributes for the elements in the "item title_link" class and then take away the # sign, and then convert it into a url. For example, the first element in the "item title_link" class has an href value of "#942", I need to be able to convert that string into something like this "http://www.domainname.com/index/942/get".

I need to be able to create a script that can do that for all of the elements that are in that class and then navigate to each of the generated links. Here is the script that I have so far that doesn't work:

var itemLinks = document.getElementsByClassName("item title_link");
var itemLinksHRefs = itemLinks.href;
var actualItemHRefs = itemLinksHRefs.replace("#","");
var actualItemLinks = "http://www.domainname.com/index/"+actualItemHRefs+"/get";

window.location.href = actualItemLinks;

I know that my script is probably way off of the right way to do this but I am quite new to creating userscripts, so any help would be greatly appreciated.

EDIT: I need a way to make the script wait to start for 6 seconds, then get the hrefs values for all of the elements in the "item title_link" class and convert them into a list of urls, and then either have the script open all of those links in new tabs or be able to export those links to a text file in this format:

http://www.domainname.com/index/942/get
http://www.domainname.com/index/846/get
http://www.domainname.com/index/745/get

you can only "navigate" to the first link, after that the page's JS stops running... — dandavis, Jan 22 '14 at 04:33
a) you can only pass a single class to that method. Use `document.querySelectorAll('.item.title_link')` if you need both. b) you will need to iterate the collection, or extract the first element before accessing attributes. — Bergi, Jan 22 '14 at 04:35

Nik Terentyev · Accepted Answer · 2014-01-22T04:45:55.233

1

you are trying to set location to multiple links... and not .href, but .getAttribute('href');

var a,b,c,d, len;

a = document.getElementsByClassName("item title_link");
len = a.length;

for (var i = 0; i <= len - 1; i++) {
    b = a[i].getAttribute('href');
    c = b.replace("#", "");
    d = "http://www.domainname.com/index/" + c + "/get";
    console.log(d); //just to check them out
}

//window.location.href = d;
//or whatever you wanted to do with that...

edited Jan 22 '14 at 04:45

answered Jan 22 '14 at 04:40

Nik Terentyev

2,270
3
16
23

I forgot to mention that the links that the script would be navigating to have to be able to download files and when I use that script it does navigate to the correct urls, but it doesn't start downloading the file from each url. – INeedTogepi Jan 22 '14 at 04:52
Use a function from the first answer here for each of your links: http://stackoverflow.com/questions/3749231/download-file-using-javascript-jquery – Nik Terentyev Jan 22 '14 at 04:55
Could you give me an example of how I could use the function in the link that you posted. Like I said before, I'm not very familiar with javascript yet. – INeedTogepi Jan 22 '14 at 05:08
Just put the function in your file and add a line downloadURL(d); right below d = ... – Nik Terentyev Jan 22 '14 at 05:34
When the webpage loads it takes a few seconds for the "title title_link" class elements to load. Is there any way that I can delay the loop for 6 seconds? I need to be able to delay the whole loop from starting because it takes about 4 seconds for the elements to load. – INeedTogepi Jan 22 '14 at 17:10
I just realized that in order for the script to work, I need the whole script to be delayed by 6 seconds. – INeedTogepi Jan 22 '14 at 17:19
just use `window.onload=function(){SomeJavaScriptCode};` for your script to start after the page will be loaded – Nik Terentyev Jan 23 '14 at 02:25
the part of the page that takes some time to load is a flash element, so I'm not sure that that method would work. – INeedTogepi Jan 31 '14 at 21:52
`setTimeout(function(){AllTheJavaScriptCodeFromAbove},6000);` – Nik Terentyev Feb 03 '14 at 03:56

score 1 · Answer 2 · answered Jan 22 '14 at 04:40

document.getElementsByClassName

Returns an array of all child elements which have any of the given class names. When called on the document object, the complete document is searched, including the root node. You may also call getElementsByClassName() on any element; it will return only elements which are descendants of the specified root element with the given class names.

And,

window.location.href is a property that will tell you the current URL location of the browser. Setting the property to something different will redirect the page

window.location.href = actualItemLinks; // will redirect your page immediately when you assign some url to it

Probably what you are looking for is,

var elements = document.getElementsByClassName("item title_link"); // Get all elements that have both the 'item' and 'title_link' classes.It will return node list of elements.

var itemLinksHRefs = elements[0].href; // pick first hyperlinks href attr.

var actualItemHRefs = itemLinksHRefs.replace("#","");

var actualItemLinks = "http://www.domainname.com/index/" + actualItemHRefs + "/get";

window.location.href = actualItemLinks;

How can I make a userscript that gets the href attribute contents of every element in a specified class?

2 Answers2

document.getElementsByClassName