Manipulación del Modelo de Objetos del Documento (DOM) con PHP y JavaScript

Manipulación del Modelo de Objetos del Documento (DOM) con PHP

El DOM, o Modelo de Objetos del Documento, se define como una interfaz de programación de aplicaciones (API) para documentos HTML y XML. Es, esencialmente, la base o estructura programática sobre la que se construyen los documentos de HTML y XML.

Existen diversas soluciones para acceder a los elementos del DOM desde PHP, sin necesidad de trabajar directamente con JavaScript. A continuación, exploraremos la estructura fundamental del DOM.

Tipos de Nodos en el DOM

Aunque existen 12 tipos de nodos definidos en la especificación, en las páginas web comunes encontramos principalmente los siguientes 5:

• Document: Es el nodo raíz del que derivan todos los demás.
• Element: Representa cada una de las etiquetas HTML. Es el único nodo que puede contener atributos y del que pueden derivar otros nodos.
• Attr: Cada atributo de una etiqueta genera un nodo Attr, el cual contiene también su valor (como una propiedad). Es hijo del nodo Element (etiqueta) que lo contiene.
• Text: Contiene el texto encerrado por una etiqueta HTML (es hijo del nodo Element).
• Comment: Los comentarios incluidos en la página HTML también generan sus propios nodos.

Los tipos de nodos restantes se utilizan principalmente en el lenguaje XML, aunque en HTML pueden aparecer como elementos fijos definidos (como la etiqueta Doctype o caracteres de escape). Estos nodos son:

• CDATASection: Nodo que puede contener caracteres de escape escritos normalmente.
• DocumentType: Representa la declaración o etiqueta Doctype.
• DocumentFragment: Es un fragmento o porción del árbol del DOM. Aunque no aparece directamente en el documento HTML, permite a JavaScript (mediante los métodos del DOM) seleccionar un trozo del documento.
• Entity: Carácter de escape o Entidad en XML.
• EntityReference: Referencia a una entidad XML.
• ProcessingInstruction: Instrucciones de procesamiento.
• Notation: Anotaciones parecidas a comment, pero que pueden mostrarse en pantalla en XML.

Propiedades del Objeto Window

Del objeto Window dependen directamente, como propiedades, una serie de objetos que nos proporcionan información no solo sobre el DOM, sino también sobre el navegador y otros aspectos de la página. Podemos acceder a ellos directamente con JavaScript, igualándolos a una variable para utilizarlos posteriormente (por ejemplo, mostrándolos en pantalla).

Algunas de estas propiedades ya se han visto en manuales de JavaScript, mientras que otras pueden ser menos familiares. Dejando a un lado el objeto document (que se verá más adelante), las propiedades del objeto window son:

• closed: Devuelve un valor booleano que indica si la ventana está cerrada (true) o no (false). (Solo lectura).
• defaultStatus: Devuelve el texto de la barra de estado. Permite también escritura (cambiar el texto de la barra de estado).
• frames: Devuelve un array con todos los frames (incluidos iframes) de la ventana actual.
• history: Permite acceder al historial de páginas del navegador. Este objeto posee las siguientes propiedades y métodos:

Propiedades y Métodos del Objeto History

1. length: Esta propiedad devuelve el número de direcciones URL que hay en el historial.
2. back(): Método que carga en el navegador la página anterior, equivalente a usar las flechas de retroceso de la barra de navegación.
3. forward(): Método que carga en el navegador la página siguiente del historial.
4. go(n): A este método se le pasa como parámetro un número entero (positivo o negativo) que indica el número de páginas hacia adelante o atrás que se debe mover en el historial. El método cargará la página indicada.

• innerHeight: Devuelve el valor de la altura de la ventana interior del navegador (área visible).
• innerWidth: Devuelve el valor de la anchura de la ventana interior del navegador (área visible).
• length: Devuelve el número de frames (incluidos iframes) que tiene la página.
• location: Contiene información sobre la URL del usuario. Este objeto posee las siguientes propiedades:

Propiedades del Objeto Location

hash

Devuelve el ancla (enlace) con el que se ha abierto la URL (la parte que comienza con #).

host

Devuelve el nombre del host y el puerto de la URL.

hostname

Devuelve solo el nombre del host de la URL.

href

Devuelve la dirección URL completa.

pathname

Devuelve la ruta o el nombre del recurso solicitado en la URL.

port

Devuelve el puerto utilizado en la URL.