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

Question

[LoveCodeandCoffe]

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

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

Answer 1

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

Используйте рекурсию, обходите все 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 2

[0xD34F]

Рекурсия есть:

const getLastDeepestElement = function(el) {
  return this(el, 0)[0];
}.bind(function get(el, level) {
  return [...el.children].reduce((p, c) => (
    c = get(c, -~level),
    p[1] > c[1] ? p : c
  ), [ el, level ]);
});

Рекурсии нет:

function getLastDeepestElement(el) {
  let result = [ el, 0 ];

  for (const stack = [ result ]; stack.length;) {
    const n = stack.pop();
    result = n[1] > result[1] ? n : result;
    stack.push(...Array.from(n[0].children, m => [ m, n[1] + 1 ]));
  }

  return result[0];
}

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

Рекурсия есть:

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

Рекурсии нет:

const getDeepestLastElement = el => Array
  .from(el.querySelectorAll('*'))
  .pop() || el;

// или

function getDeepestLastElement(el) {
  for (let c; (c = el.children).length; el = c[~-c.length]) ;
  return el;
}

Answer 3

[profesor08]

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

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