js 获取li下的a标签

<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

<script>
  // 获取第一个<li>下的第一个<a>标签
  const firstLink = document.querySelector('li a');
  console.log(firstLink);

  // 获取所有<li>下的所有<a>标签
  const allLinks = document.querySelectorAll('li a');
  allLinks.forEach(link => {
    console.log(link);
  });
</script>

<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

<script>
  const listItems = document.getElementsByTagName('li');
  for (let i = 0; i < listItems.length; i++) {
    const links = listItems[i].getElementsByTagName('a');
    for (let j = 0; j < links.length; j++) {
      console.log(links[j]);
    }
  }
</script>

<ul>
  <li class="item"><a href="#" class="link">Link 1</a></li>
  <li class="item"><a href="#" class="link">Link 2</a></li>
  <li class="item"><a href="#" class="link">Link 3</a></li>
</ul>

<script>
  // 获取所有class为item的<li>下的class为link的<a>标签
  const links = document.getElementsByClassName('link');
  for (let i = 0; i < links.length; i++) {
    console.log(links[i]);
  }
</script>

document.addEventListener('DOMContentLoaded', function() {
  const links = document.querySelectorAll('li a');
  console.log(links);
});