Как получить самый последний самый вложенный элемент?

Question

[LoveCodeandCoffe]

<div>
      <div>
        <div>
          <div></div>
          <div>2</div>
        </div>
      </div>
    </div>
  </div>

нужно получить самый последний самый вложенный элемент (<div>2</div>)

Answer 1

[0xD34F]

Рекурсия. Обходим дочерние элементы, смотрим уровень вложенности:

const walk = (el, level = 0) =>
  [...el.children].reduce((p, c) => {
    c = walk(c, level + 1);
    return p.level > c.level ? p : c;
  }, { el, level });

const getLastDeepestElement = root => walk(root).el;

Если же под последним самым вложенным подразумевается элемент, получаемый постоянным выбором последнего вложенного элемента, то тогда так:

const getDeepestLastElement = el =>
  el.lastElementChild
    ? getDeepestLastElement(el.lastElementChild)
    : el;

// или, без рекурсии
const getDeepestLastElement = el => Array
  .from(el.querySelectorAll('*'))
  .pop() || el;

Answer 2

[Александр Буки]

Используйте рекурсию, обходите все children у div

const mainDiv = document.getElementsByTagName('div')
    let lastDiv
    const finLastDiv = (el) => {
        if(el.children[el.children.length - 1]) {
           finLastDiv(el.children[el.children.length - 1])
        }
        else {
          lastDiv = el
        }
    }
    finLastDiv(mainDiv[0])
    console.log(lastDiv)
    console.log(lastDiv.innerHTML) // => 2

смотрите console

Answer 3

[profesor08]

Выбираешь элементы с помощью querySelectorAll, проходишь по ним, смотришь их потомков, если у потомков нет потомков, то выбираешь последнего.

А если структура не меняется, то вбей CSS селектор нужного элемента в document.querySelector("div div div ....")