时间戳

首页 > 解决方案 > 使用javascript在li和ul和div标签内查找锚标签值

javascript - 使用javascript在li和ul和div标签内查找锚标签值

问题描述

我刚刚开始我的职业生涯。我有一个要求，即在 div、ul 和 li 标签内的锚标签内获取值。

<div class="abc">
    <ul><li><a>Test</a></li><li class="selected"><a>Test</a></li><ul>
</div>

我想获取使用javascript选择类的li标签下的锚标签值。层次结构从 div-ul-li 开始

我知道通过使用 document.getElementyId 来获取值，但这对我来说看起来很复杂

任何想法都会对我很有帮助。

标签： javascript

解决方案

如果我理解正确，您需要使用整个层次结构吗？

在这种情况下，querySelector是你的朋友。查询如下所示：

querySelector('div.abc > ul > li.selected > a').

详细的意思是：

  • div.abc为我们提供类的 divabc
  • >指的是 left to 元素的子元素>，所以我们指的是ul哪个是你的子节点div abc
  • 现在我们想要与作为子节点的div类一起使用，所以我们再次使用selectedul>
  • a最后但并非最不重要的一点是，我们想要访问div selected. 我们将再次使用>

var text = document.querySelector('div.abc > ul > li.selected > a').textContent;

console.log(text);
<div class="abc">
  <ul>
    <li><a>Test</a></li>
    <li class="selected"><a>Test</a></li>
  </ul>
</div>

推荐阅读