Propiedades
Aviso: este recorte es extremadamamente viejo, de una época en que ni siquiera
existía Firebug. Contémplese básicamente como curiosidad histórica.
JavaScript, con sus cien mil implementaciones diferentes y mal documentadas, exige ponerse a adivinar con
relativa frecuencia. Esta función nos permite obtener todos los atributos y métodos de cualquier objeto, por
orden alfabético, en una bonita ventana emergente.
function propiedades(que) {
var ancho = 800;
var alto = 600;
var css = "body{font-family: sans-serif;} strong{color: navy;}";
var obj = typeof que == "string" ? document.getElementById(que) : que;
var filtro = [];
for (var i = 1; i < arguments.length; i++) {
filtro[i - 1] = escape(arguments[i]);
}
eval("var re_filtro=/^(" + filtro.join("|") + ")$/i;");
var elementos = [];
if (obj) {
for (var i in obj) {
try {
var tipo = typeof obj[i];
} catch (e) {
var tipo = "ERROR";
}
if (filtro.length == 0 || re_filtro.test(tipo)) {
switch (tipo) {
case "ERROR":
var clave = i;
var valor = "";
break;
case "function":
var clave = i + "()";
var valor = "";
break;
default:
var clave = i;
var valor = "=" + obj[i];
}
valor = valor.replace(/&/g, "&");
valor = valor.replace(/</g, "<");
valor = valor.replace(/>/g, ">");
linea =
"[" +
tipo +
"] " +
"<strong>" +
clave +
"</strong>" +
valor;
elementos[elementos.length] = linea;
}
}
elementos.sort();
}
var salida = "<!doctype html>";
salida += "<html>\n";
salida += "<head><title>Propiedades</title>\n";
salida +=
'<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">\n';
salida += '<style type="text/css"><!--\n';
salida += css;
salida += "--></style>\n";
salida += "<body>\n";
salida +=
"<h1>Propiedades " +
(filtro.length > 0 ? "(" + filtro.join("|") + ")" : "") +
"</h1>\n";
salida += "<ol>\n";
for (var i in elementos) {
salida += "<li>" + elementos[i] + "</li>\n";
}
salida += "</ol></body></html>";
var v = window.open(
"",
"",
"width=" + ancho + ",height=" + alto + ",resizable=yes,scrollbars=yes",
);
v.document.write(salida);
v.document.close();
}
Ejemplo de uso
<p id="foo">El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palenque de paja.</p>
<input type="button" onclick="propiedades(window)" value="propiedades(window)">
<input type="button" onclick="propiedades(document)" value="propiedades(document)">
<input type="button" onclick="propiedades(this)" value="propiedades(this)">
<input type="button" onclick="propiedades('foo')" value="propiedades('foo')">
<a href="http://www.google.es" onclick="propiedades(this, 'string'); return false;">Google</a>
Nota: cuidado al invocar la función poniendo la llamada directamente, no le suele gustar a los
bloqueadores de ventanas emergentes.
Historial
- 2005-08-30
- Arreglos cosméticos.
- 2005-08-29
- Primera versión.
