Código fuente del Analizador DOM

Este es un módulo aún en pruebas que he usado para experimentar el ejemplo de menú contextual en la aplicación de la clase formEmerge para crear formularios emergentes.

Código JavaScript

*
     =========================================================================
     Software: dom.js
     Description: Módulo que contiene funciones para analizar el DOM y
                  realizar prácticas de aprendizaje sobre el DOM
     Contact: http://www.wextensible.com
     Copyright (c) 2010, Andrés de la Paz

     Módulo en pruebas. Versión para incluir como ejemplo en la página
     http://www.wextensible.com/como-se-hace/aplicaciones-ejemplos.html#emergente-contextual
     (Agosto 2010).
     Mayo 2012: Pequeña rectificación para sacar también las propiedades con
     valores vacíos.
     ==========================================================================
*/

//Tipos de nodos del DOM

var arrayTiposNodos = new Array("Undefined",
        "Elemento (NODE_ELEMENT)",
        "Atributo (NODE_ATTRIBUTE)",
        "Texto (NODE_TEXT)",
        "Sección CDATA (NODE_CDATA_SECTION)",
        "Entidad referencia (NODE_ENTITY_REFERENCE)",
        "Entidad (NODE_ENTITY)",
        "Instrucción procesamiento (NODE_PROCESSING_INSTRUCTION)",
        "Comentario (NODE_COMMENT)",
        "Documento (NODE_DOCUMENT)",
        "Tipo de documento (NODE_DOCUMENT_TYPE)",
        "Fragmento documento (NODE_DOCUMENT_FRAGMENT)",
        "Notación (NODE_NOTATION)");

//Longitud de los primeros caracteres a presentar de un nodo texto

var LONGITUD_TEXTO = 10;

/* ANALIZADOR DEL DOM DE UN ELEMENTO
 * Se trata de extraer en un literal HTML con <ul> todo lo relacionado con el
 * DOM de un elemento:
 * - Su tagName
 * - Sus nodos hijos
 * - Sus atributos
 * - El atributo de style desglosado por propiedades
 * - El estilo computado/actual
 */

function analizaDOM(elemento){
    var html = "";
    if ((elemento != null)&&(elemento != undefined)){
        html += "<ul class='lista-propiedades'>";
        html += "<li><b>Elemento</b> : <code>" + 
        elemento + "</code></li>" +
        "<li><b>Tag</b> : <code>&lt;" + 
        elemento.tagName.toLowerCase() + "&gt;</code></li>";
        var hijos = elemento.childNodes;
        html += "<li><b>Nodos hijos</b> : " + hijos.length;
        var cadenaHijos = "";
        for (var i=0; i<hijos.length; i++){
            var nodoHijo = hijos[i];
            var numTipoNodo = nodoHijo.nodeType;
            cadenaHijos += "<li>" + arrayTiposNodos[numTipoNodo] + " ";
            if (numTipoNodo == 1) {
                cadenaHijos += ": " + " <code>&lt;" +
                nodoHijo.tagName.toLowerCase() +
                "&gt;</code></li>"
            } else if (numTipoNodo == 3) {
                var texto = nodoHijo.nodeValue;
                if (texto.length > LONGITUD_TEXTO) texto = 
                texto.substring(0, LONGITUD_TEXTO);
                if (texto.length > 0) {
                    texto = texto.replace(/&/g, "&amp;");
                    texto = texto.replace(/</g, "&lt;");
                    texto = texto.replace(/>/g, "&gt;");
                }
                cadenaHijos += ": <code>\"" + texto + 
                "...\"</code></li>";
            } else {
                cadenaHijos += "</li>";
            }
        }
        if (cadenaHijos != "") {
            html += "<ul>" + cadenaHijos + "</ul>";
        }
        html += "</li>";
        var atributos = elemento.attributes;
        if (atributos.length > 0) {
            html += "<li><b>Atributos:</b><ul>";
            for (var i=0; i<atributos.length; i++) {
                var nombreAtributo = atributos[i].nodeName.toLowerCase();
                var valorAtributo = quitaEspacios(atributos[i].nodeValue);
                if (nombreAtributo != "style"){
                    html += "<li><code>" + nombreAtributo + " = " +
                            valorAtributo + "</code></li>";
                } else {
                    html += "<li><code>style =</code><ul>"
                    var cadenaEstilo = valorAtributo.split(";");
                    for (var j=0; j<cadenaEstilo.length; j++) {
                        if (cadenaEstilo[j].indexOf(":") > -1) {
                            var parejaEstilo = cadenaEstilo[j].split(":");
                            var nombreEstilo = quitaEspacios(parejaEstilo[0]);
                            var valorEstilo = quitaEspacios(parejaEstilo[1]);
                            html += "<li><code>" + 
                                    nombreEstilo.toLowerCase() +
                                     ": " + valorEstilo + 
                                     "</code></li>";
                        }
                    }
                    html += "</ul></li>"
                }
            }
            html += "</ul></li>";
        }
        var obj = objetoEstiloActual(elemento);
        var estiloActual = "";
        for (var unaPropiedad in obj){
            var valorProp = propiedadEstiloActual(obj, unaPropiedad);
            estiloActual += "<li><code>" + unaPropiedad + ": " + 
            obj[unaPropiedad] + "</code></li>";
        }
        if (estiloActual != "") {
            html += "<li><b>Estilo computado/actual:</b><ul>" +
            estiloActual + "</ul></li>";
        }
        html += "</ul>";
    }
    return html;
}