Cant получить контейнер выделенного текста (jsfiddle имеется)

Question

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

<div id='fooBar' contenteditable='true'>Hello <span class="test">World</span></div> 

Javascript Код:

var fooBar = document.getElementById('fooBar'); 

fooBar.addEventListener('click', function() { 
    console.log(window.getSelection().getRangeAt(0).commonAncestorContainer) 
}); 

Вопрос: Почему обыкновение это получить фактический контейнер названный тест? Я не могу понять, почему это не работает. Я даже пробовал его с помощью selection.anchorNode.parentElement. Ничего не работает. Теперь, глядя на внутреннюю архитектуру объекта, который я получаю из window.getSelection(), тогда я не вижу элемент span, указанный как свойство. Что я делаю не так?

https://jsfiddle.net/w7bfmLqd/1/

Answer 1

мне удалось получить эту работу с помощью этого:

var fooBar = document.getElementById('fooBar'); 

fooBar.addEventListener('click', function() { 
    console.log(window.getSelection().focusNode.parentElement); 
}); 

https://jsfiddle.net/w7bfmLqd/2/