如何使用javascript获取最后一个li元素？

Question

我正在尝试获取lilist 的最后一个元素。但它没有给出正确的输出。这是我的标记

<div class="abc">
    <ul>
      <li>1</li>
      <ul><li>1.1</li><li>1.2</li></ul>
      <li>2</li>
       <ul><li>2.1</li><li>2.2</li></ul>
      <li>3</li>
        <ul><li>3.1</li><li>3.2</li></ul>
    </ul>
  </div>

尝试这样

console.log(document.querySelector('.abc ul li:last-child').innerHTML)

输出元件

<li>1.2</li>

预期产出

 <li>3</li>

Answer 1

有2个问题

• 您的 HTML 无效，因为ul不是 的有效子级，ul因此嵌套的 HTML 实际上需要位于li

• 使用>修饰符仅在选择器中查找直系后代

console.log(document.querySelector('.abc>ul>li:last-child').innerHTML)

<div class="abc">
  <ul>
    <li>
      1
      <ul>
        <li>1.1</li>
        <li>1.2</li>
      </ul>
    </li>

    <li>
      2
      <ul>
        <li>2.1</li>
        <li>2.2</li>
      </ul>
    </li>

    <li>
      3
      <ul>
        <li>3.1</li>
        <li>3.2</li>
      </ul>
    </li>

  </ul>
</div>

如果您只想要文本（而不是嵌套的ul），您可以将该文本放入 a 中span并仅选择该文本

console.log(document.querySelector('.abc>ul>li:last-child span').innerHTML)

<div class="abc">
  <ul>
    <li>
      <span>1</span>
      <ul>
        <li>1.1</li>
        <li>1.2</li>
      </ul>
    </li>

    <li>
      <span>2</span>
      <ul>
        <li>2.1</li>
        <li>2.2</li>
      </ul>
    </li>

    <li>
      <span>3</span>
      <ul>
        <li>3.1</li>
        <li>3.2</li>
      </ul>
    </li>

  </ul>
</div>

如果您只想要文本（而不是嵌套的ul），您可以将该文本放入 a 中span并仅选择该文本