Как получить самый глубокий дочерний элемент в блоке с помощью js?

Question

[Мариана Марианова]

К примеру есть данный кусок кода:

<div class="box">
        <a href="#" class="link">
                <span>
                        <img src="logo.png" width="119" alt="">
                <span>
        </a>
</div>

Нужно в каждом блоке с классом box - найти самый глубокий дочерний элемент (в данном случае img).
Но содержимое каждого блока с классом box всегда разное и не всегда самый глубокий элемент - картинка.
Как это сделать?

Answer 1

[Дмитрий Лузанов]

Самых глубоких элементов может быть больше одного? Можно ли узнать, для чего вам это нужно? Возможно есть более изящный метод решения вашей задачи. А так, на вскидку, пробежаться рекурсивно по каждому узлу и найти максимально вложенный элемент.

Например так

Comments

[Мариана Марианова]

Больше одного элемента в моем случае не будет.
А нужно для того, чтобы самый глубокий элемент можно было обернуть в обертку.
Спасибо за ответ) буду пробовать

Answer 2

[tyzberd]

https://jsfiddle.net/ehL6wbs7/

Comments

[Мариана Марианова]

спасибо большое)

Answer 3

[ivanovSP]

https://codepen.io/geraldfullam/post/jquery-plugin...

Answer 4

[med1um]

На чистом JavaScript так:

var clickedElement = document.elementFromPoint(event.clientX, event.clientY);