Documentation Manual Manipulando el DOM con Prolog

Manipulando el DOM con Prolog

El módulo dom de Tau Prolog incorpora nuevos tipos de términos y predicados para la manipulación del DOM y la gestión de los eventos del navegador. Puedes encontrar más información sobre estos predicados en los predicados de referencia del módulo dom.

Selectores

Tau Prolog incluye tres predicados (no deterministas) para buscar elementos del DOM:

<div id="block-a" class="circle">content a</div>
<div id="block-b" class="circle">content b</div>
<div id="block-c" class="square">content c</div>
var session = pl.create();
session.consult(":- use_module(library(dom)).", {
    success: function() {
        session.query("get_by_tag(div, B), html(B, X).", {
            success: function() {
                session.answer(console.log); // {B/<html>(block-a), X/'content a'}
                session.answer(console.log); // {B/<html>(block-b), X/'content b'}
                session.answer(console.log); // {B/<html>(block-c), X/'content c'}
                session.answer(console.log); // false
            }
        });
    }
});
var session = pl.create();
session.consult(":- use_module(library(dom)).", {
    success: function() {
        session.query("get_by_class(circle, B), html(B, X).", {
            success: function() {
                session.answer(console.log); // {B/<html>(block-a), X/'content a'}
                session.answer(console.log); // {B/<html>(block-b), X/'content b'}
                session.answer(console.log); // false
            }
        });
    }
});

Si no existe un elemento con el identificador, la clase o la etiqueta especificada, los predicados simplemente fallan silenciosamente. Además, este módulo incluye predicados para navegar por el DOM a partir de otros objetos HTML:

Modificar el DOM

El predicado create/2 recibe un átomo representando una etiqueta HTML (div,a,table, etcétera) y crea un nuevo objeto HTML. Los nuevos objetos HTML creados pueden ser insertados en el DOM mediante los siguientes predicados:

Si el nuevo elemento que se intenta insertar ya pertenece al DOM, el elemento no puede ser insertado nuevamente y el predicado falla. En cualquier otro caso, el elemento es insertado y el predicado se satisface.

Es posible consultar o modificar el contenido, los atributos y los estilos de un objeto HTML mediante los sigueintes predicados:

Eventos

El módulodom de Tau Prolog también permite manejar dinámicamente la asignación de eventos, para ejecutar un objetivo Prolog ante un determinado evento del navegador. El predicado bind/4 recibe un objeto HTML, un átomo representando un tipo de evento (click,mouseover,mouseout, etcétera), un evento y un objetivo, y asocia al elemento HTML el objetivo especificado para dicho tipo de evento. El tercer argumento queda instanciado con un nuevo término que representa un evento HTML, del cual es posible extraer información del evento producido mediante el predicado event_property/3 (véase My little doge para un ejemplo completo funcional).

<div id="output"></div>
var session = pl.create();
session.consult(":- use_module(library(dom)).", {
    success: function() {
        session.query("get_by_id(output, Output), get_by_tag(body, B), bind(B, keypress, Event, ( \
            event_property(Event, key, Key),                                                      \
            html(Output, Key)                                                                     \
        )).", {
            success: function() {
                session.answer(console.log); // {Output/<html>(output), Body/<html>(body), Event/<event>(keypress)}
            }
        });
    }
});

En el ejemplo anterior, se ha añadido al cuerpo de la página un eventokeypress para que cuando se pulse una tecla, se indique en el objeto HTML con identificador output la tecla que se ha pulsado. Nótese que el predicado event_property/3 y el término que contiene el evento (Event en el ejemplo), sólo tienen sentido dentro del objetivo de un evento, ya que no contendrán ninguna información útil hasta que un evento sea capturado. Cada vez que un evento es capturado, Tau Prolog crea automáticamente un nuevo hilo de la sesión que asignó el evento y ejecuta el objetivo (sólo para la primera respuesta).

Los predicados unbind/2 y unbind/3 permiten eliminar los eventos asociados a un objeto HTML. El predicadoprevent_default/1 permite prevenir el comportamiento por defecto de un evento del navegador (por ejemplo, puede evitar que un formulario sea enviado).

Puede consultarse una lista con los eventos soportados por el navegador en Event reference | MDN.

Efectos

Por último, este módulo incluye otros predicados para crear efectos de animación: