通过JS获取倒数第二个HTML元素

Question

例如，我在聊天。

<div id="chat" style="transform: initial;" class="active selectable">
  <ul id="chat-messages" class="active">
    <li class="admin">
      <span>test1</span>
    </li>
    <li class="admin">
      <span>test2</span>
    </li>
    <li>
      <span class="nick">[10136] dimden: </span>
      <span>test3</span> 
    </li>
    <li>
</div>

我需要获得倒数第二个元素（test2）。 我如何在没有jQuery的情况下获取它。

Answer 1

您可以获得与document.querySelectorAll匹配的任何CSS选择器的元素列表。然后，您可以采用第length - 2个元素：

var list = document.querySelectorAll("#chat li");
var penultimate = list[list.length - 2];

实时示例：

var list = document.querySelectorAll("#chat li");
var penultimate = list[list.length - 2];
console.log(penultimate.textContent);

<div id="chat" style="transform: initial;" class="active selectable">
  <ul id="chat-messages" class="active">
    <li class="admin"><span>test1
</span></li>
    <li class="admin"><span>test2
</span></li>
    <li><span class="nick">[10136] dimden: </span><span>test3</span>
    </li>
  </ul><!-- this was <li>, I fixed it -->
</div>