В любом случае, изменить href ссылки без идентификатора и без jquery?

Question

Я работаю с клиентом, и мне разрешено использовать только javascript (не спрашивайте почему, поскольку я понятия не имею).У них нет настройки jquery, и они не хотят этого (опять же, я понятия не имею, почему)

В любом случае на странице есть ссылка, на которую они хотят изменить ссылку при загрузке страницы.Ниже приведена структура ссылок.

<a class="checkout_link" title="Checkout" href="current_url">Checkout</a>

Мне было интересно, есть ли способ изменить href при загрузке страницы, используя базовый javascript для ссылки выше?Если так, то как бы я поступил?

Спасибо

Answer 1

window.onload=function() {
  var links = document.links; // or document.getElementsByTagName("a");
  for (var i=0, n=links.length;i<n;i++) {
    if (links[i].className==="checkout_link" && links[i].title==="Checkout") {
      links[i].href="someotherurl.html";
      break; // remove this line if there are more than one checkout link
    }
  }
}

Обновление, чтобы включить больше способов получить по ссылке (ссылкам)

document.querySelector("a.checkout_link"); // if no more than one
document.querySelectorAll("a.checkout_link"); // if more than one

, чтобы быть еще более избирательным:

document.querySelector("a[title='Checkout'].checkout_link"); 

Наконец, более новые браузеры имеют classList

if (links[i].classList.contains("checkout_link") ...

window.onload = function() {
  alert(document.querySelector("a[title='Checkout 2'].checkout_link").href);
}

<a href="x.html" class="checkout_link" title="Checkout 1" />Checkout 1</a>
<a href="y.html" class="checkout_link" title="Checkout 2" />Checkout 2</a>

Answer 2

вы можете получить объект по имени класса, проверьте эту ссылку: http://snipplr.com/view/1696/get-elements-by-class-name/

, а затем используйте его для изменения href.

Answer 3

Вот демоверсия jsfiddle

Вы должны использовать событие ondomready, но это довольно сложно, когда дело доходит до его кодирования в vanilla (предложите использовать JavaScript-фреймворк).Таким образом, в качестве альтернативы (не лучший способ добиться того, что вы пытаетесь сделать), используйте загрузку окна (в зависимости от ваших требований).В JavaScript мы прикрепляем функцию, которая изменяет href <a> после загрузки окна:

html:

<a class="checkout_link" title="Checkout" href="current_url">Checkout</a>

JavaScript основан на уникальности заголовка и также содержит checkout_link в классеатрибут:

    window.onload = function() {
        var tochange = document.getElementsByTagName('a');
        for (var i = 0; i < tochange.length; i++) {
            //checks for title match and also class name containment
            if (tochange[i].title == 'Checkout' && tochange[i].className.match('(^|\\s+)checkout_link(\\s+|$)')) {
                tochange[i].href = "http://www.google.com";
                break;  //break out of for loop once we find the element
            }
        }
    }