@neonmind

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

Стоит задача "альтернативного" рендеринга HTML - получили данные - отобразили по-своему.
То есть в простейшем случае нужно получить данные о всех элементах на странице - позиция, размер, шрифт (если это текст).
Как лучше подступиться к вопросу ?
  • Вопрос задан
  • 68 просмотров
Решения вопроса 1
@rPman
рекурсивно пробегаете по всем элементам на странице (начиная с document, первый потомок node.firstChild перебираете nextSibiling), положение ноды на экране берете getBoundingClientRect() и если width или height равны нулю то это невидимый объект на экране.

Пример, вот этот модуль инжектится на страницу, перебирает все объекты и оценивает их видимость и даже отслеживает изменения по таймеру (идеологически неправильно, логичнее на хендлеры повесить колбек и отслеживать их), работает даже на слабых машинах с огромными страницами приемлемое время (сотни миллисекунд на десяток тысяч нод).
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
locky_yotun
@locky_yotun
Я видел некоторый джаваскрипт
const result = Array.prototype.reduce.call(document.querySelectorAll('*'), (map, el) => map.set(el, getComputedStyle(el)), new Map)
Ответ написан
KorniloFF
@KorniloFF
Ищу работу по font-end / JS
Я бы вставлял в отдельный блок вне общего документа. А потом бы парсил из него обычными средствами JS
// Создаем временный блок
var _tmp = document.createElement('div');
// Помещаем в него нужный DOM
_tmp.appendChild(document.body.cloneNode(1));
// Парсим по своему усмотрению
alert(_tmp.querySelector('.answer__text').textContent);

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы