javascript - 使用 Javascript 更改具有特定 ID 的所有 URL

Question

我有一个 html 代码来下载这样的文件:

<a class="wp-block-button__link has-background has-vivid-green-cyan-background-color" href="https://github.com/pbatard/rufus/releases/download/v3.5/rufus-3.5.exe" rel="nofollow noopener noreferrer">Download (Installer)</a>

<a class="wp-block-button__link has-background has-vivid-green-cyan-background-color" href="https://github.com/pbatard/rufus/releases/download/v3.5/rufus-3.5p.exe" rel="nofollow noopener noreferrer">Download (Portable)</a>

我希望 class="wp-block-button__link 标记中的所有 URL 都按如下方式更改:

<a class="wp-block-button__link has-background has-vivid-green-cyan-background-color" href="mydomain.com/get/?url=https://github.com/pbatard/rufus/releases/download/v3.5/rufus-3.5p.exe" rel="nofollow noopener noreferrer">Download (Portable)</a>

<a class="wp-block-button__link has-background has-vivid-green-cyan-background-color" href="mydomain.com/get/?url=https://github.com/pbatard/rufus/releases/download/v3.5/rufus-3.5.exe" rel="nofollow noopener noreferrer">Download (Installer)</a>

我目前正在使用 Javascript 更改它，如下所示:

let a = document.querySelector('.wp-block-button__link');
a.href = "mydomain.com/get/?url=" + a.href
console.log(a.outerHTML)

我现在使用的javascript代码只能更改一个URL，我想更改class="wp-block-button__link"标签中的所有URL。

如何使我使用的 JavaScript 代码更改标签 class="wp-block-button__link" 中的所有 URL，而不仅仅是一个 URL？

Answer 1

使用querySelectorAll和forEach:

let allLinks = document.querySelectorAll('.wp-block-button__link');
allLinks.forEach(a => {
    a.href = "mydomain.com/get/?url=" + a.href;
    console.log(a.outerHTML);
});