通过 JavaScript 覆盖一个类答案

【问题标题】：Overwrite a class via JavaScript通过 JavaScript 覆盖一个类
【发布时间】：2014-01-03 23:18:46
【问题描述】：

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

我想更改“inkl. MwSt, Versandkosten gemäß Angaben”中的文本“inkl. MwSt, zzgl. Versandkosten”。并且 JS-Code 必须在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 也许有人可以帮助我。

【问题讨论】：

您使用的是“document.getElementById”，而您应该使用的是“document.getElementsByClass”
也许你误解了一些概念？ HTML 中的类是指 CSS 类，用于设置元素的样式。或者你的意思是你想用这样的类覆盖元素的内容？
你是对的，我想用 CSS 类 cc-product-infolink 覆盖元素的内容

标签： javascript html css content-management-system dom-manipulation

【解决方案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。

【讨论】：

@user3105045 因为在 HTML 中，链接之前有一个文本节点（回车和缩进制表符/空格）。我会帮你找到解决办法的。
在 jsFiddle Demo 中可以使用，但在网站上不可用。
@user3105045 好吧，不看就很难说。你不会把这个JS放在head里吧？
@user3105045 当然可以？为什么？通常你应该把你的脚本放在结束 body 标记之前。这种情况下的问题是，当你的脚本在 head 中运行时，DOM 还没有建立起来——所以任何操纵它的尝试都会失败。
因为这个名为 Jimdo 的 CMS 不允许 jS-Codes 出现在正文中，只允许在头部出现！