Выберите последний элемент элемента в списке с помощью 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

Answer 2

Для того, чтобы получить свой предмет, вам нужно правильно выбрать. Это означает, что вам нужно указать c, если вы хотите выбрать .third

Последовательность для выбора #container -> ol -> (либо li:last-child, либо li.third)

document.querySelector("#container > ol > li.third");

Answer 3

Вы можете использовать document.querySelector ('ol li: last-child')