Cómo obtener el DOM de una página web si tengo su URL usando JavaScript

Primero debes responder algunas preguntas:

  • ¿Cuál es el propósito de obtener ese DOM web?
  • ¿Dónde planeas hacer el trabajo? ¿Un guión dedicado? una página web front-end? ¿Un servidor?
  • ¿Qué quieres hacer con los datos obtenidos y procesados?

Es posible que JavaScript no sea la mejor alternativa para realizar la tarea, por lo que deberá considerar un marco, una biblioteca o un complemento.

Pensemos en un escenario simple: una sola página web que carga una URL remota ingresada en un control de entrada y raspa el DOM e imprime el texto de todas las etiquetas h1. Mi herramienta para esto sería claramente jquery . Tendrá que enfrentar algunas dificultades para lidiar con el intercambio de recursos de origen cruzado , ya que está cargando la URL externa desde un dominio diferente que puede provocar errores. Afortunadamente, puede usar herramientas de dominio cruzado como Any Origin, Whatever Origin, All Origins en lugar de buscar la URL de inmediato.

Una vez que cargue los datos de la url con $ .ge t en un objeto, puede usar todas las herramientas jquery (principalmente .find () ) para obtener la porción de datos que está buscando.

La desventaja es que está cargando todas las inclusiones (scripts, css, fuentes) que tienen poco uso para raspar e hinchar la RAM de su máquina local y navegador.

Trabajando en el lado del servidor, puede imitar el comportamiento de un navegador normal para no tener que lidiar con problemas de origen cruzado, y también puede buscar solo la parte html que le interesa. Si sigue usando javascript, limitado a un servidor sobre node.js, pero hay muchas alternativas más fáciles de alojar usando PHP y alguna biblioteca de análisis HTML como PHP Simple HTML DOM Parser .

Póngalo en un iframe y use el DOM del iframe.