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 /集合（由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');

这将导致<p>中的所有div.classname元素。

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

2 个答案: