javascript - Greasemonkey 脚本替换 href

Question

我的 html 看起来像这样

<a class="jx_ui_html_a" target="_blank" __jx__id="___$_2854__a"      href="https://www.kitty.com">
<div class="jx_ui_html_div path_title" __jx__id="___$_2854__path"></div>
</a>

和

我正在尝试找到一个greasemonkey脚本，它将href部分从ANYTHING更改为https://www.dog.com如果A类是jx_ui_html_a 所以结果应该是

<a class="jx_ui_html_a" target="_blank" __jx__id="___$_2854__a" href="https://www.dog.com">
<div class="jx_ui_html_div path_title" __jx__id="___$_2854__path"></div>
</a>

分别

<a class="jx_ui_html_a" target="_blank" __jx__id="___$_28254__a" href="https://www.dog.com">
<div class="jx_ui_html_div path_title" __jx__id="___$_28254__path"></div>
</a>

您能以任何方式帮助我吗？

Answer 1

下面是两行代码 - 第一行查询 DOM 以查找所有 a 标签 (document.querySelector('a') 并将其转换为数组(通过将其作为参数传递给 [].slice.call)，第二个在数组上运行 forEach 函数，该函数重新分配 href 属性数组中的每个 DOM 元素。

var anchors = [].slice.call(document.querySelectorAll('a');
anchors.forEach(function(element){
    element.href = "http://www.dog.com/"
});

没有 forEach 的情况相同:

var anchors = document.querySelectorAll('a');
for(var i=0;i<anchors.length;i++){
    anchors[i].href = "http://www.dog.com";
}

要将 anchors 的元素限制为仅具有特定类名的元素，请将其作为 querySelector 参数的一部分提供:

var anchors = document.querySelectorAll('a.jx_ui_html_a')

querySelector 和 querySelectorAll 选择元素的方式与应用 CSS 规则的渲染引擎相同。因此，您可以向它传递诸如 "p > a" (将返回作为 'p' 元素的直接后代的 'a' 元素)和 "div#container span" 的内容> (这将返回具有“container”id 的 div 内任何位置的 span 元素)。

querySelector 返回第一个匹配项，而 querySelectorAll 返回所有匹配元素的类似数组的列表。