=====

Question

我正在处理一个小的javascript，它会改变某个页面的外观并且这样做我必须更改HTML的某些部分（这意味着它不能通过CSS更改）。到目前为止，我设法找到的唯一解决方案是javascript中的函数replace（）。然而，直接更改innerHTML似乎是一个非常不幸的解决方案，即使它是我所知道的最快的方式。

这是原始的html：

<div data-sigil="touchable" class="_52x6 touchable">
  <a href="/messages/?ref=bookmarks&amp;app_id=217974574879787" class="_5lut _5luu">
    <div class="_52x3">
      <i class="_5i9c img" style="background-image: url(https://static.xx.fbcdn.net/rsrc.php/v2/yH/r/d3XxBNxqXrK.png);"></i>
    </div>
    <div class="_52x7">Messages</div>
    <div class="_55fj hiddenElem">
      <span>0</span>
      <span class="_55fk">new</span>
    </div>
  </a>
</div>

我想更改link中的background-image: url(link);以加载不同的图片而不是原始图片。然后我想将Messages中的<div class="_52x7">Messages</div>更改为Mail。

有什么问题？这些元素没有唯一的ID，因此无法使用getElementById()来查找它们，如果我在整个html中替换这些字符串，它将破坏页面上的所有链接和脚本。（因为innerHTML的工作原理）

有没有办法替换上面提到的字符串？（我不能使用jQuery，所有的类在html中很常见，所以我也不能使用getElementsByClassName（），除非我循环遍历所有这些类，但这看起来很漂亮我不幸的解决方案）

Answer 1

您的班级名称只出现一次吗？

即。标记中的i元素是文档中唯一具有类_5i9c的元素吗？

如果是这样，getElementsByClassName就是您所需要的：

getElementsByClassName('_5i9c')[0].style.backgroundImage = 'url(different-image.png)';
getElementsByClassName('_52x7')[0].innerHTML = 'Mail';

=====

<强>校正：

我最后错过了你的详细信息，说明你的班级名称在你的整个文件中反复分发。

因此，我建议改为：

var selectedDivs = getElementsByClassName('_52x7');

for (var i = 0; i < selectedDivs.length; i++) {
if (selectedDivs[i].innerHTML === 'Message') {
selectedDivs[i].innerHTML = 'Mail';
}
}

使用javascript在html中替换安全的innerHMTL

1 个答案:

=====