javascript - 使用子元素 ID 的已知*部分*获取已知父元素内的子元素

Question

假设(仅用于测试)我有以下代码:

<div class="p1">
  <div class="fortest">
    <span id="title1"></span>
    <span id="words1"></span>
  </div>
</div>
<div class="p2">
  <span id="title2"></span>
  <span id="words2"></span>
</div>

现在假设我在变量:var 节点中有“p1”div。我所知道的是 - 我的节点变量中有一个标题，它是一个 id 以“title”开头的元素。

我怎样才能:1)在我当前的 parent 中递归搜索这个 child 。2) 仅通过其ID substr(“标题”部分)进行搜索。3)当我找到它时，完成该功能。

如果可以的话，请给我展示一个实例:)谢谢!

Answer 1

您可以使用 querySelector 和 css 'starts-with' attribute selector为此:

var p1 = document.querySelector('.p1'),
    titleChild = p1.querySelector('[id^="title"]');