Question

示例HTML：

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

嘿我试图使用JavaScript来定位锚标记并将其当前的“低质量”文本更改为“高质量”。

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

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

Answer 1

假设video-quality div只有一个锚点，那么你就不远了：

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";
}

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

请注意，通过执行此操作，您将删除span元素，因为span是锚点的后代。如果你想避免这种情况，只需将span个元素作为锚点的后代，就像你在div中寻找锚点一样。

FWIW，我建议使用一个合理的，以JavaScript浏览器为中心的库，如jQuery，YUI，Closure或any of several others。它们提供了实用功能的批次，并平滑了一些浏览器差异。但如果您更喜欢直接使用DOM，那也没关系。

Answer 2

如果您不需要传统支持（IE7-），您可以写：

document.querySelector('#video-quality a span').innerHTML = 'High Quality';

如果您需要遗留支持，我建议使用类似jQuery或类似的库，以便从一个广泛的API中选择更简单的DOM节点。

Answer 3

普通javascript：

var vid_id = document.getElementById('video-quality');
var span = vid_id.getElementsByTagName('span');
span[0].innerText='High Quality'

或者你可以使用jQuery：

$('#video-quality span').text('High Quality');

希望这会有所帮助。

Answer 4

简单是最好的。只需给span元素一个id，然后直接改变它。

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

然后脚本是：

document.getElementById('quality-setting').innerHTML="High Quality";

使用JavaScript更改锚文本

4 个答案: