7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. PHP

Análisis de HTML Con PHP Usando DiDOM

Read Time: 8 mins

Spanish (Español) translation by Jean Perez (you can also view the original English article)

Cada ahora y entonces, los desarrolladores necesitan raspar las páginas web para obtener información de un sitio Web. Por ejemplo, supongamos que está trabajando en un proyecto personal donde tienes que conseguir información geográfica sobre las capitales de los países de la Wikipedia. Entrar en esto manualmente toma mucho tiempo. Sin embargo, lo puede hacer muy rápidamente por raspado de la página de Wikipedia con la ayuda de PHP. También será capaz de analizar automáticamente el código HTML para obtener información específica en lugar de ir por el marcado todo manualmente.

En este tutorial vamos a aprender acerca de un analizador HTML rápido y fácil de usar llamado DiDOM. Comenzar con el proceso de instalación y luego aprender a extraer información de diferentes elementos en una página web utilizando diferentes tipos de selectores como etiquetas, clases, etcetera.

Instalación y uso

Usted puede instalar fácilmente DiDOM en su directorio de proyecto ejecutando el siguiente comando:

Una vez que ha ejecutado el comando anterior, usted será capaz de carga HTML de una cadena, un archivo local o una página web. Aquí está un ejemplo:

Cuando usted decide analizar HTML de un documento, ya podría ser cargado y almacenado en una variable. En estos casos, simplemente puede pasar esa variable a Document() y DiDOM prepara la cadena para analizar.

Si el código HTML tiene que ser cargado desde un archivo o una dirección URL, puede pasar como primer parámetro a Document() y establezca el segundo parámetro en true.

También puede crear un nuevo objeto de Documento mediante newDocument() sin parámetros. En este caso, puede llamar al método loadHtml() para cargar el HTML de una cadena y un loadHtmlFile() para cargar HTML desde un archivo o página web.

Búsqueda de Elementos HTML

Lo primero que tienes que hacer antes de subir el HTML o el texto de un elemento es encontrar el elemento sí mismo. La forma más sencilla de hacerlo es simplemente usar el método find() y pasar el selector CSS para el elemento previsto como primer parámetro.

También puede pasar el XPath de un elemento como el primer parámetro del método find(). Sin embargo, esto requiere pasar Query::TYPE_XPATH como segundo parámetro.

Si sólo desea utilizar valores de XPath para buscar un elemento HTML, simplemente puede utilizar el método de xpath() en lugar de Query::TYPE_XPATH de pasar como segundo parámetro a find() cada vez.

Si DiDOM puede encontrar elementos que coincidan con el selector CSS pasado o expresión XPATH, devuelve una matriz de instancias de DiDom\Element. Si estos elementos no se encuentran, devuelve una matriz vacía.

Puesto que estos métodos devuelven un array, se puede acceder directamente el nth elemento coincidente utilizando find() [n-1].

Un Ejemplo

En el ejemplo siguiente, va a obtener el código HTML interno de todos el primeros y segundo nivel los títulos en el artículo de Wikipedia sobre Washington, D.C.

Comenzamos creando un nuevo objeto de documento pasando la URL del artículo de Wikipedia sobre Washington, D.C. Después de eso, obtener el elemento de encabezado principal utilizando el método find() y almacenarlo en una variable llamada $main_heading. Ahora podremos llamar a diferentes métodos en este elemento como text(), innerHtml(), html(), etcetera.

Para el título principal, simplemente llamamos al método html() que devuelve el HTML del elemento de partida todo. Del mismo modo, podemos obtener el HTML dentro de un elemento determinado mediante el método innerHtml(). A veces, le interesará más en el contenido de texto de un elemento en lugar de código HTML. En tales casos, usted simplemente puede utilizar el método text() y hacerse con él.

Los títulos de nivel dos dividen nuestra página de Wikipedia en secciones bien definidas. Sin embargo, querrá deshacerse de algunas de las subpartidas como "Véase también", "Notas", etc..

Una forma de hacerlo sería un bucle por todos los títulos de dos nivel y compruebe el valor devuelto por el método text(). Rompemos el lazo si el texto de encabezado devuelta es "Véase también".

Podría llegar directamente a los dos nivel 4 º o 6 º partida mediante $document-> find('h2') [3] y $document-> find('h2') [5] respectivamente.

Recorriendo Arriba y Abajo del DOM

Una vez que tengas acceso a un elemento determinado, la biblioteca le permite recorrer arriba y abajo el árbol DOM para acceder a otros elementos con facilidad.

Usted puede ir al padre de un elemento HTML con el método parent(). Del mismo modo, se puede llegar al hermano siguiente o anterior de un elemento utilizando los métodos nextSibling() y previousSibling().

Hay muchos métodos disponibles para acceder a los hijos de un elemento del DOM así. Por ejemplo, se puede llegar a un elemento concreto utilizando el método de child(n). Del mismo modo, usted puede tener acceso al primero o el último hijo de un elemento concreto utilizando los métodos firstChild() y lastChild(). Puede lazo sobre todos los hijos de un elemento DOM determinado utilizando el método children().

Una vez que se llega a un elemento determinado, podrás acceder a su etc. HTML mediante los métodos html(), innerHtml() y text().

En el ejemplo siguiente, comenzamos con los elementos de encabezado de nivel 2 y siga chequeando si el siguiente elemento relacionado contiene algún texto. Tan pronto como nos encontramos con un elemento relacionado con un texto, tenemos habían salida al navegador.

Puede utilizar una técnica similar para recorrer todos los elementos del hermano y el texto de salida sólo si contiene una cadena particular, o si el elemento hermano es una etiqueta de párrafo, etcetera. Una vez que sabes lo básico, encontrar que la información correcta es fácil.

Manipulación de Atributos del Elemento

La capacidad para obtener o establecer el valor del atributo para diferentes elementos puede resultar muy útil en ciertas situaciones. Por ejemplo, podemos obtener el valor del atributo src para todas las etiquetas img en nuestro artículo de la Wikipedia utilizando $image_elem-> attr('src'). De manera similar, puede obtener el valor de href atributos para todas las etiquetas a en un documento.

Hay tres maneras de obtener el valor de un atributo determinado para un elemento HTML. Puede utilizar el método getAttribute('attrName') y pase el nombre del atributo que le interesa como parámetro. También puede utilizar el método attr('attrName'), que funciona como getAttribute(). Por último, la biblioteca también le permite obtener directamente el valor de atributo usando $elem->attrName. Esto significa que usted puede obtener el valor del atributo src de un elemento de imagen directamente mediante $imageElem->src.

Una vez que tenga acceso a los atributos de src, puede escribir el código para descargar automáticamente todos los archivos de imagen. Esta manera, usted será capaz de ahorrar mucho tiempo.

También puede establecer el valor de un atributo dado utilizando tres técnicas diferentes. En primer lugar, puede utilizar el método setAttribute('attrName', 'attrValue') para establecer el valor de atributo. También puede utilizar el método attr('attrName', 'attrValue') para establecer el valor de atributo. Por último, puede establecer el valor del atributo para un elemento utilizando $Elem-> attrName = 'attrValue'.

Añadir, Quitar y Reemplazar Elementos

También puede realizar cambios en el documento HTML cargado usando diferentes métodos proporcionados por la biblioteca. Por ejemplo, puede Agregar, reemplazar o eliminar elementos del árbol DOM con los métodos appendChild(), replace()remove().

La biblioteca también le permite crear sus propios elementos de HTML con el fin de anexar el documento HTML original. Puede crear un nuevo objeto de elemento mediante new Element('tagName', 'tagContent').

Tenga en cuenta que se producirá un Error: Clase 'Element' no encontrado error si el programa no contiene el uso de la línea use DiDom\Element antes de instanciar el objeto element.

Una vez que tenga el elemento, que tampoco se puede incorporar a otros elementos en el DOM utilizando el método appendChild() o puede utilizar el método replace() para utilizar el elemento recién instanciado como un reemplazo para algún viejo elemento HTML en el documento. En el ejemplo siguiente se debe ayudar a clarificar más este concepto.

Inicialmente, no existe ningún elemento de h2 en nuestro documento con la clase test-heading. Por lo tanto, nos será cada vez un error si intentamos acceder a un elemento de este tipo.

Después de comprobar que existe ningún tal elemento, crear un nuevo elemento h2 y cambiar el valor de su atributo de clasetest-heading.

Después de eso, reemplazamos el primer elemento h1 en el documento con nuestro elemento recién creado h2. El método find() en nuestro documento otra vez para encontrar el título de h2 con clase test-heading devolverá un elemento ahora.

Reflexiones Ffinales

Este tutorial cubre los conceptos básicos del analizador PHP DiDOM HTML. Comenzó con la instalación y luego aprendió a cargar HTML desde un string, archivo o URL. Después de eso, hablamos de cómo encontrar un elemento en particular basado en su selector CSS o XPath. También hemos aprendido cómo hacer los hermanos, padres o hijos de un elemento. El resto de las secciones cubierto cómo podemos manipular los atributos de un elemento determinado o añadir, quitar y reemplazar elementos de un documento HTML.

Si hay algo que usted quisiera hacer en el tutorial, no dude de avisarme en los comentarios.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.