JavaScript不是Jquery从包含特定文本的SPAN标签中读取下一个SPAN标签的值

Question

我有以下HTML，并且我需要在包含文本的特定标签之后读取下一个SPAN标签的SPAN标签值：-

<div data-component-id="ghkzq6qysz8y"
     class="component-inner-container status-green "
     data-component-status="operational"
     data-js-hook="">

   <span class="name">
      Address Validation
   </span>


  <span
    class="component-status "
    title=""
  >
    Operational
  </span>

我需要读取包含值“地址验证”的特定SPAN标签的组件状态的SPAN TAG值。我不能使用jQuery，这必须在JavaScript中完成。在jQuery中，我可以使用：

var apistatus =($('span:contains("Address Validation")').next('span').text());

有人可以用普通的JavaScript帮助我吗？

Answer 1

let spanValue = document.querySelector("span.name + span").innerText;

我们使用“ +”来选择特定元素的the next immediate sibling，在这种情况下，跨度是具有“名称”类的跨度的下一个同级。

Answer 2

var apistatus = document.getElementsByClassName("component-status")[0].innerText;