如何使用Javascript替换特定的href链接？

Question

我会尝试重新表述问题，因为上次我的问题可能不够清晰... 我有一个包含许多链接图片的页面。我想使用javascript仅更改其中一张图片的链接（即标志）。我无法直接编辑“body”html，但可以将js放在“head”区域。

以下是html代码：

<div id="ctl00">
  <h1 class="logo">
  <a href="http://www.store.domain.co.nz" title="Menswear"><img src="/user/files/logo.png title="Menswear" alt="Menswear"></a>
  </h1>
</div>

我希望你能将HTML更改为：

<div id="ctl00">
    <h1 class="logo">
<a href="http://www.domain.co.nz" title="Menswear"><img src="/user/files/logo.png title="Menswear" alt="Menswear"></a>
</h1>
</div>

基本上，我想从URL中删除“.store”，但仅限于此实例，而不是页面上的所有URL。

- Rookie

Answer 1

检查DOM函数：

var x = document.getElementsByTagName("a")
for (i=0;i<x.length;++i) {
  if (x[i].getAttribute("href") == "http://www.this.link.co.nz") {
    x[i].setAttribute("href", "http://www.that.link.co.nz")
    x[i].setAttribute("title", "that link")
    x[i].replaceChild(
      document.createTextNode(
        "changed img:filename.jpg"
      ),
      x[i].firstChild
    )
  }
}

<p><a href="http://www.this.link.co.nz" title="this link">
    img:filename.jpg
</a>
</p>
<p><a href="http://www.this.link.co.nz" title="this link">
    img:filename.jpg
</a>
</p>

将x设置为包含所有a元素的数组。

- ikrabbe

---

谢谢... 嗯，这段代码会替换所有 http://www.this.link.co.nz 的实例，不是吗？我只想替换图像的一个链接实例（菜单中还有其他 http://www.this.link.co.nz 的实例，我不想更改它们）。 - Rookie

我理解你的问题是想要将所有href替换为相同的目标。您可以在元素上使用getElementsByTagName和querySelectorAll，以仅从文档子树中选择节点。要了解此内容，请研究http://www.w3.org/TR/DOM-Level-3-Core/core.html#i-Document中的文档和元素IDL及其描述。querySelector函数是扩展API的一部分。 - ikrabbe

也许我问错了问题...所以请耐心等待我重新表述... - Rookie

由于链接有多个实例，我只想更改图像链接的实例，因此我想使用JavaScript查找和替换HTML字符串{{link1：<img src =“/ filename.jpg”>}}为{{link2：<img src =“/ filename.jpg”>}}。 我是JavaScript新手，所以您的第二个回复超出了我的知识水平。 - Rookie

首先，学习IDL需要一些时间，但最终会有所帮助。你不能搜索文本，但如果你了解文档结构，你可以在循环中检查x[i]的子元素（例如x[i].firstChild.tagName=="img"）。但是你需要检查是否存在第一个子元素，否则javascript会产生错误。只需尝试这些函数并熟悉javascript控制台，例如google-chrome中的控制台。 - ikrabbe

Answer 2

一种方法是使用href值来查找锚点。

var a = document.querySelector('a[href="http://www.this.link.co.nz"]');
if (a) {
  a.setAttribute('href', 'http://www.that.link.co.nz')
}

<a href="http://www.this.link.co.nz" title="this link">
  <img src="/filename.jpg" />
</a>

- Arun P Johny

---

你如何设置这段代码片段？使用querySelectorAll返回所有匹配的元素。不过我仍然更喜欢使用元素和属性来工作。 - ikrabbe