javascript - 如何在 JavaScript 中通过类名和 id 获取元素？

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()and返回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');

<p>这将导致div.classname.