使用 JavaScript 更改锚文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13280116/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing anchor text with JavaScript
提问by Travis
Example HTML:
示例 HTML：
<div id="video-quality" style="">
<a class="low bttn" href="">
<span>Low Quality</span>
</a>
</div>
Hey im trying to use JavaScript to target an anchor tag and change it's current text of "Low Quality" to "High Quality".
嘿，我正在尝试使用 JavaScript 来定位锚标记并将其当前文本“低质量”更改为“高质量”。
I don't really know JavaScript very well, but this is what I have come up with. But it's obviously not working:
我真的不太了解 JavaScript，但这是我想出的。但它显然不起作用：
var vid_id=document.getElementById('video-quality');
var anchor=vid_id.getElementsByTagName('a');
anchor.innerHTML="High Quality";
回答by T.J. Crowder
Assuming the video-qualitydivwill only ever have oneanchor in it, you're not far off:
假设里面video-qualitydiv只有一个锚点，你就离得不远了：
var vid_id=document.getElementById('video-quality');
var anchor=vid_id.getElementsByTagName('a');
anchor[0].innerHTML="High Quality";
// ^^^-- change here
(There's a shorter way if you don't need to support IE7 and earlier, see David's answerfor more.)
（如果您不需要支持 IE7 及更早版本，则有一种更短的方法，请参阅David 的答案以了解更多信息。）
The key was in the name getElementsByTagName(note the plural). It returns a NodeList, not an element. A NodeListis (shockingly!) a list of matching nodes, in this case matching elements. innerHTMLis a property of individual elements, so we have to index into the NodeListto access a specific element. The code above assumes there is at least one matching element, and updates its HTML. If you want to be more defensive:
关键在于名称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";
}
That allows for the possibility there are no matching anchors.
这允许没有匹配的锚点的可能性。
Note that by doing this, you're removing the spanelement, since the spanis a descendant of the anchor. If you wanted to avoid that, just look for spanelements as descendants of the anchor, exactly as you've looked for anchors in the div.
请注意，通过这样做，您将删除span元素，因为span是锚的后代。如果您想避免这种情况，只需查找span作为锚点后代的元素，就像您在div.
FWIW, I'd recommend using a reasonable JavaScript browser-focussed library like jQuery, YUI, Closure, or any of several others. They provide a lotof utility functionality, and smooth over some browser differences. But if you prefer using the DOM directly, that's fine too.
FWIW，我建议使用合理的 JavaScript 以浏览器为中心的库，如jQuery、YUI、Closure或其他几个库中的任何一个。它们提供了许多实用功能，并平滑了一些浏览器差异。但如果您更喜欢直接使用 DOM，那也没关系。
回答by David Hellsing
If you don't need legacy support (IE7-), you can write:
如果您不需要旧版支持（IE7-），您可以编写：
document.querySelector('#video-quality a span').innerHTML = 'High Quality';
If you DO need legacy support, I recommend a library like jQuery or similar to make selecting DOM nodes much simpler from a singe, wide-spread API.
如果您确实需要遗留支持，我推荐一个像 jQuery 或类似的库，以便从单一的、广泛传播的 API 中选择 DOM 节点变得更加简单。
回答by nepjua
Plain javascript:
普通的javascript：
var vid_id = document.getElementById('video-quality');
var span = vid_id.getElementsByTagName('span');
span[0].innerText='High Quality'
Or you can just use jQuery:
或者你可以只使用 jQuery：
$('#video-quality span').text('High Quality');
hope this helps.
希望这可以帮助。
回答by webstuff
Simple is best. Just give the span element an id and then alter it directly.
简单是最好的。只需给 span 元素一个 id，然后直接更改它。
<div id="video-quality" style="">
<a class="low bttn" href="">
<span id="quality-setting">Low Quality</span>
</a>
</div>
then script is:
然后脚本是：
document.getElementById('quality-setting').innerHTML="High Quality";
