Получить координаты текстового узла

[милт]

Есть например DIV на котором расположено несколько текстовых узлов. Как можно получить координаты этих узлов?

[Aetae]

Через getClientRects или range и getClientRects.

[милт]

Aetae, можете привести пример как это сделать? Допустим если в консоль браузера вставить код

text=document.getElementById('post_message_473080').firstChild;
alert(text.textContent);

то alert() выдаст текст верхнего сообщения на этой странице. Что надо написать чтобы получить координаты того текстового узла?

[Aetae]

var text = document.getElementById('post_message_473080').firstChild;
var range = document.createRange();
range.selectNode(text);
var rect = range.getBoundingClientRect();
range.detach();
alert(
    'top: ' + rect.top + 
    '\nleft: ' + rect.left 
);

[милт]

Спасибо, работает. Но появился ещё один вопрос. Как у объекта Range узнать координаты граничных точек setStart и setEnd? Ведь текстовый узел не всегда имеет прямоугольную форму, например когда места не хватает и текст переносится на второю строку.

[Aetae]

var text = document.getElementById('post_message_475649').firstChild;
var range = document.createRange();
range.selectNode(text);
var rects = range.getClientRects(); //большой прямоугольник из маленьких состоит
[].forEach.call(rects, ({top, left, width, height}) => document.body.insertAdjacentHTML(
  'beforeend', 
  `<div style="
    top: ${top}px;
    left: ${left}px;
    width: ${width}px;
    height: ${height}px;
    position: fixed;
    outline:1px dotted rgba(0,0,255,0.5);
  "></div>`
));
range.detach();

[милт]

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

[Aetae]

милт, на этой странице запустите код в консоли когда ваш предыдущий(#5) коммент будет в области видимости.)
По сути rects - псевдомассив объектов, содержащих координаты (top, left, width, height, right, bottom) прямоугольников по одному на каждую строчку текста.
Остальное - просто рисование в es6 стиле.)