Как правильно спарсить HTML, получив размеры элементов?

Question

[neonmind]

Стоит задача "альтернативного" рендеринга HTML - получили данные - отобразили по-своему.
То есть в простейшем случае нужно получить данные о всех элементах на странице - позиция, размер, шрифт (если это текст).
Как лучше подступиться к вопросу ?

Answer 1

[rPman]

рекурсивно пробегаете по всем элементам на странице (начиная с document, первый потомок node.firstChild перебираете nextSibiling), положение ноды на экране берете getBoundingClientRect() и если width или height равны нулю то это невидимый объект на экране.

Пример, вот этот модуль инжектится на страницу, перебирает все объекты и оценивает их видимость и даже отслеживает изменения по таймеру (идеологически неправильно, логичнее на хендлеры повесить колбек и отслеживать их), работает даже на слабых машинах с огромными страницами приемлемое время (сотни миллисекунд на десяток тысяч нод).

Answer 2

[Павел Корнилов]

Я бы вставлял в отдельный блок вне общего документа. А потом бы парсил из него обычными средствами JS

// Создаем временный блок
var _tmp = document.createElement('div');
// Помещаем в него нужный DOM
_tmp.appendChild(document.body.cloneNode(1));
// Парсим по своему усмотрению
alert(_tmp.querySelector('.answer__text').textContent);

Этот код можно проверить в консоли на этой странице.