更改鏈接文本的子節點（父節點ID），而jQuery的

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> 

感謝您的幫助！我可以使用文本（），但我不能使用任何外部庫的特定項目我工作，所以它需要是原生的JavaScript。

Answer 1

你可以這樣做：

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

因爲firstChild你的情況將通過格式化添加的div內的文本節點。因此，您可以使用firstElementChild來獲取元素，並使用innerHTML，與textcontent相比，該元素具有更強的交叉瀏覽器支持。

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