javascript - 使用 JavaScript 更改 anchor 文本

Question

示例 HTML:

<div id="video-quality" style="">
<a class="low bttn" href="">
<span>Low Quality</span>
</a>
</div>

嘿，我正在尝试使用 JavaScript 定位 anchor 标记并将其当前的“低质量”文本更改为“高质量”。

我不太了解 JavaScript，但这就是我想出的。但它显然不起作用:

var vid_id=document.getElementById('video-quality');
var anchor=vid_id.getElementsByTagName('a');
anchor.innerHTML="High Quality";

Answer 1

假设 video-quality div 只会有 一个 anchor ，你离得不远了:

var vid_id=document.getElementById('video-quality');
var anchor=vid_id.getElementsByTagName('a');
anchor[0].innerHTML="High Quality";
//    ^^^-- change here

(如果您不需要支持 IE7 和更早版本，还有更短的方法，请参阅 David's answer 了解更多信息。)

关键在名称 getElementsByTagName 中(注意复数形式)。它返回 NodeList ，不是一个元素。 NodeList 是(令人震惊的!)匹配节点的列表，在本例中匹配元素。 innerHTML 是单个元素的属性，因此我们必须索引到 NodeList 才能访问特定元素。上面的代码假定至少有一个匹配元素，并更新它的 HTML。如果您想更具防御性:

var vid_id=document.getElementById('video-quality');
var anchors=vid_id.getElementsByTagName('a');
if (anchors[0]) {
    anchors[0].innerHTML="High Quality";
}

这允许没有匹配 anchor 的可能性。

请注意，这样做会删除 span 元素，因为 span 是 anchor 的后代。如果您想避免这种情况，只需查找 span 元素作为 anchor 的后代，就像您在 div 中查找 anchor 一样。

---

FWIW，我建议使用合理的以 JavaScript 浏览器为中心的库，例如 jQuery , YUI , Closure , 或 any of several others .它们提供了很多实用功能，并消除了一些浏览器差异。但如果您更喜欢直接使用 DOM，那也很好。