如何在Vanilla JavaScript中执行$（'。div a'）？

Question

就像标题所说的那样，我正在寻找一种快速的方法来编写关于jQuery代码$('.div a')的＆＃34; plain＆＃34; JavaScript的。我知道我们可以getElementsByClassName找到.div，但如何找到它包含的链接呢？

Answer 1

浏览器有a native method来完成此操作：

document.querySelectorAll( ".div a" );

您只能使用querySelector检索第一个匹配。

Answer 2

不使用querySelector或querySelectorAll

的替代方法

＆＃13;

＆＃13;

document.getElementsByClassName('div')[0].getElementsByTagName('a')[0].style.color = 'red';

＆＃13;

<div class="div">
  <a href="javascript:void(0)">Link 1</a>
  <a href="javascript:void(0)">Link 2</a>
  <a href="javascript:void(0)">Link 3</a>
</div>

＆＃13;

＆＃13;

＆＃13;

要选择所有链接，

＆＃13;

＆＃13;

var links = document.getElementsByClassName('div')[0].getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
  links[i].style.color = 'red';
}

＆＃13;

<div class="div">
  <a href="javascript:void(0)">Link 1</a>
  <a href="javascript:void(0)">Link 2</a>
  <a href="javascript:void(0)">Link 3</a>
</div>

＆＃13;

＆＃13;

＆＃13;