如何在JavaScript中按類名然后按id使用get元素？

Question

我最終要做的是在div中找到一個具有已知類名的鏈接並進行更改。 我堅持正確獲取鏈接的內容，無法弄清楚我的錯誤。 使用getElementsByClassName和getElementsByTagName似乎可以分別工作，但是當我一起使用它們時將不工作。 我以前從未使用過jquery，所以我不喜歡那條路線。

這是代碼：

<div class="test">
<a href="http://www.google.com">LINK</a></div>
<button onclick="myFunction()">Test it</button>

<script>
function myFunction()
{
var x=document.getElementsByClassName("test");
x.getElementsByTagName("a")[0].innerHTML="Hello World";
document.write(x[0]);
};

</script>

Answer 1

在兼容的瀏覽器中，您可以簡單地使用document.querySelector() ：

var x = document.querySelector('.test > a');
x.innerHTML = 'Hello world';

document.querySelector返回單個元素（唯一元素，或多個元素中的第一個），而不是nodeList / collection（由getElementsByTagName()和getElementsByClassName() ）。

順便說一下，使用jQuery：

$('.test > a').html('Hello world'); // sets the innerHTML of the returned elements 

要么：

$('.test > a').text('Hello world'); // sets the text of the returned elements 

Answer 2

使用查詢選擇器語法，如下所示：

var x = document.querySelector('div.classname > p');

這將導致div.classname中的所有<p>元素。