使用 DOM 选择列表中项目的最后一个元素

Question

不使用 jQuery（因为我还没有开始那个部分），只使用一些好的旧 JavaScript/DOM，我怎么能选择列表中项目的最后一个元素。

例如，我有以下 HTML：

<section id="container">
  <ul>
    <li class="first">one</li>
    <li class="second">two</li>
    <li class="third">three</li>
  </ul>
  <ol>
    <li class="first">one</li>
    <li class="second">two</li>
    <li class="third">three</li>
  </ol>
</section>

我想选择这个项目并将它返回到 DOM: <li class="third">three</li>从ol列表中。我知道document.querySelector只选择文档中的第一个元素，即document.querySelector('li.third'). 我将如何做相反的事情并选择最后一个？

Answer 1

*:last-child如果您有混合的子元素，则可以使用。

console.log(document.querySelector('#container *:last-child .third').textContent);

<section id="container">
  <ul>
    <li class="first">one</li>
    <li class="second">two</li>
    <li class="third">three</li>
  </ul>
  <ol>
    <li class="first">one</li>
    <li class="second">two</li>
    <li class="third">three (here)</li>
  </ol>
</section>

您还可以通过以下任一方式获取最后一个孩子：

• #container *:last-child li:last-of-type 或者
• #container *:last-child li:last-child