javascript - 通过 JavaScript 覆盖类

Question

我想覆盖 class=cc-product-infolink 定义的一些文本，它是由 CMS 定义的，所以我必须通过 JS 更改此类中的文本。这是我第一次使用它，所以我写了一个小脚本，但它不起作用。为什么？

我想更改“inkl.MwSt, Versandkosten gemäß Angaben”中的文本“inkl.MwSt, zzgl.Versandkosten”。并且 JS 代码必须在 head 中工作，因为不可能将其放入 body 中。

这是我的 HTML 代码:

<div class="cc-product-infolink">
    <a class="cc-no-clickable-arrow" href="/j/shop/info/m/me6f40c3b0bd58b35" rel="nofollow">inkl. MwSt, zzgl. Versandkosten</a>
</div>

我的 JS 代码

    <script type="text/javascript">
    //<![CDATA[
var versand = document.getElementsByClassName('cc-product-infolink')[0];
versand.getElementsByTagName('a')[0].textContent += ' gemäß Angaben';
    //]]>
    </script>

它应该在这里工作:http://www.wonnemond.de/taschen/karl/#cc-m-product-8254989095 也许有人可以帮助我。

Answer 1

var versand = document.getElementsByClassName('cc-product-infolink')[0];
versand.getElementsByTagName('a')[0].textContent += ' gemäß Angaben';

• 一些注意事项:

  1. id 和 class 不同。顾名思义，getElementById 通过 id 属性检索元素。您的元素只有 class，因此 getElementsByClassName就是你所需要的。我猜你无法更改 HTML。

  2. textContent用于设置/获取 DOM 元素的文本内容。旧版 IE(IE8 及更早版本)使用 改为innerText。

  3. firstChild 不起作用，因为该链接不是该 div 的第一个子级。有一个文本节点，在链接之前包含换行符和一些缩进。使用 getElementsByTagName 你可以解决这个问题。

• 还有一个jsFiddle Demo .