无论如何要更改没有id和jquery的链接href？答案

【问题标题】：Anyway to change href of link with no id and no jquery?无论如何要更改没有id和jquery的链接href？
【发布时间】：2011-07-10 09:39:13
【问题描述】：

我正在与客户合作，我只能使用 javascript（不要问为什么，因为我不知道）。他们没有 jquery 设置并且他们不想要它（我再次不知道为什么）

无论如何，页面上有一个链接，他们想在页面加载时将 href 更改为。下面是链接结构。

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

我想知道是否有任何方法可以使用上面链接的基本 javascript 更改页面加载时的 href？如果是这样，我将如何去做？

谢谢

【问题讨论】：

当然可以使用普通的 JavaScript，但是使用 jQueryso 会容易得多 - 除了获取链接（使用 getElementsByTagName() 并搜索结果数组），你会想要这样做 onDOMLoad 而不是 onload... 这需要额外的代码才能跨浏览器工作。 jQuery 或其他一些库会让这变得非常容易。
@Pekka 除了 domload，我认为没有特别需要 jQuery。
@Dave 您知道您希望更改的特定<a> 的独特特征吗？
@mplungjan 好吧，如果你想使用类名来获取链接，并且你想做到这一点，你必须实现 jQuery 的 .hasClass()，它适用于多个类（class="navigation checkout_link"），这也不是完全无关紧要的。但 OP 可能不需要那个
@Pekka 我同意你使用 JS 框架。使用框架提供的 .hasClass 和 ondomready 更容易，但我想像 OP 提到的特殊情况需要香草 JavaScript。但是，是的，ondomready 是更好的方法，但使用 JS 框架要容易得多

标签： javascript onload onload-event

【解决方案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");

最近更新的浏览器有一个类列表

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>

【讨论】：

感谢links 收藏，猜猜它比我建议的getElementsByTagName("a") 更有效:)
+1 很好，不知道document.links。两个注意事项：这将起作用onload，即当文档完全加载时（包括图像） - 这通常明显晚于加载 DOM 时；并且类名需要完全匹配，所以不允许多个类。如果你能忍受这些限制，这是一个非常有效的方法
true - 如果有更多，我们可以使用links[i].className.indexof("checkout_link")!=-1
@mplungjan 会给出误报，例如不过在checkout_link_bigger 上。 Here's 一个不错的正则表达式：new RegExp('\\b' + classname + '\\b');
我务实的一面建议只有一个类。或者我们可以删除 className 测试，只匹配我务实的一面 ALSO 告诉我的标题对于 Checkout 链接是唯一的

【解决方案2】：

您可以通过其类名获取对象，请查看此链接：http://snipplr.com/view/1696/get-elements-by-class-name/

然后用它来改变href。

【讨论】：

getElementsByTagName("*") IMO 过于宽泛，请改用getElementsByTagName("a")。

【解决方案3】：

这里是jsfiddle demo

你应该使用 ondomready 事件，但在 vanilla 中编写它有点棘手（建议使用 JavaScript 框架）。因此，作为替代方案（不是实现您想要做的事情的最佳方式），是使用窗口加载（根据您的要求）。在 JavaScript 中，我们附加了一个在窗口加载后更改 <a> 的 href 的函数：

html:

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

基于 JavaScript 的标题是唯一的，并且在 class 属性中还包含 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
            }
        }
    }

【讨论】：

可以，但我根本无法访问 html。所以我无法在链接中添加 id。 =/