How to make this code work without jQuery?

Question

Currently I have a code that looks like this:

$('a.guide-item[href="/"]').remove();
$('*[href="/"]').attr('href','/feed/subscriptions/u');

I need to make the file size smaller, but I don't know how to replicate the code in "vanilla" javascript. Please help!

Answer 1

Without supporting IE6/7, it's very simple.

var els = document.querySelectorAll('a.guide-item[href="/"]');

for (var i = 0; i < els.length; i++) {
    if (els[i].parentNode)
        els[i].parentNode.removeChild(els[i]);
}

els = document.querySelectorAll('*[href="/"]');

for (i = 0; i < els.length; i++) {
    els[i].setAttribute('href','/feed/subscriptions/u');
}

If you need to support IE6/7, it's still very simple, but it would be helpful to have a method that selects elements by class, or at least that tests for a class.

Not hard to find implementations of these on the web.

---

Here's a quick implementation that will support older IE.

var els = document.links,
    i = els.length;

while (i--) {
    if (els[i].getAttribute("href") !== "/")
        continue;

    if (els[i].className.indexOf("guide-item") !== -1) {
        els[i].parentNode.removeChild(els[i]);
    } else {
        els[i].setAttribute('href','/feed/subscriptions/u');
    }
}

It assumes that the .className won't have other classes where "guide-item" would be matched as a sub-pattern.