在没有jquery的情况下更改子节点（父节点具有ID​​）中的链接文本

Question

我了解如何更改具有ID的节点的链接文本，如下所示：

<div>
    <a id="Link1" href="foo">ABCD</a>
</div>

<script type="text/javascript">
document.getElementById("Link1").firstChild.textContent = "WXYZ";
</script>

但是当节点没有ID但是父div有什么问题时，你如何解决同样的问题呢？或换句话说，为什么这不起作用？

<div id="Link2">
    <a href="foo">ABCD</a>
</div>

<script type="text/javascript">
document.getElementById("Link2").firstChild.firstChild.textContent = "WXYZ";
</script>

感谢您的帮助!!!

PS - 我可以使用text（）在jquery中完成这项工作，但是我不能使用任何外部库来处理我正在处理的特定项目，所以它需要是原生的javascript。

Answer 1

你可以这样做：

document.getElementById("Link2").firstElementChild.innerHTML = "WXYZ"; //Or
//document.getElementById("Link2").getElementsByTagName("a")[0].innerHTML = "WXYZ";

因为您的案例中的firstChild将是格式化添加的div内的文本节点。因此，您可以使用firstElementChild来获取元素，并使用innerHTML，与textcontent相比，它具有更多的crossbrowser支持。

Answer 2

JavaScript：

document.getElementById('Link2')
    .getElementsByTagName('a')[0].innerText = 'WXYZ';

Answer 3

您可以使用本机JavaScript以多种方式选择元素，这里有几种方法可以执行此操作：

document.querySelector("#Link2 a").innerText = "Foobar";
document.getElementById("Link2").firstChild.innerText = "Foobar";
document.getElementById("Link2").childNodes[0].innerText = "Foobar";

或（从第一个回答）：

document.getElementById('Link2').getElementsByTagName('a')[0].innerText = "Foobar";