7

示例 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";
4

4 回答 4

7

假设video-quality divwill 中只有一个锚，那么您离我们不远了：

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

（如果您不需要支持 IE7 及更早版本，可以使用更短的方法，请参阅David 的回答了解更多信息。）

关键在于名称getElementsByTagName（注意复数）。它返回一个NodeList，而不是一个元素。ANodeList是（令人震惊！）匹配节点的列表，在本例中为匹配元素。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或其他任何一个。它们提供了许多实用功能，并消除了一些浏览器差异。但是，如果您更喜欢直接使用 DOM，那也没关系。

于 2012-11-07T23:32:55.380 回答
5

如果您不需要旧版支持（IE7-），您可以编写：

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

如果您确实需要旧版支持，我推荐使用 jQuery 或类似的库，以使从单一、广泛使用的 API 中选择 DOM 节点变得更加简单。

于 2012-11-07T23:44:06.940 回答
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');

希望这可以帮助。

于 2012-11-07T23:39:51.100 回答
1

简单是最好的。只需给 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";
于 2013-09-04T16:30:59.473 回答