DOM Enlightenment

DOM Enlightenment no se presenta como una referencia exhaustiva de acceso a DOM o de JavaScript. Aún así, puede que sea el más exhaustivo libro escrito sobre DOM scripting sin el uso de un framework. El libro obvia los navegadores antiguos y sus diferencias en la estructura del DOM para centrarse en los navegadores actuales. Un esfuerzo más que notable para plasmar en un sólo lugar todas las pautas de acceso al DOM que un desarrollador puede necesitar. Todo está muy bien documentado y con abundantes ejemplos.

DOM Enlightenment » »

Accediendo al DOM con jQuery: 10+ útiles snippets

Este post es una traducción libre del post Manipulating the DOM with jQuery: 10+ useful code snippets, publicado en catswhocode.

Añadir una clase CSS a un elemento
Una forma muy sencilla de cambiar el aspecto y funcionalidad de un elemento es añadirle un clase CSS.

('#mielemento').addClass('miclase');

Eliminar una clase CSS de un elemento
Al igual que es útil conocer como añadir clases CSS, también es interesante conocer como eliminar clases CSS no deseadas.

$('#mielemento').removeClass('miclase');

Comprobar si un elemento posee una clase CSS
Si en tu aplicación o sitio web se añaden y eliminan clases para un elemento en particular, puede ser muy útil ser capaces de comprobar si un elemento contiene cierta clase.

$('#mielemento').hasClass'miclase');

Cambiar de CSS usando jQuery
Tal y como hemos visto en los ejemplos anteriores, añadir o eliminar clases CSS a un elemento es muy sencillo utilizando jQuery. Pero, qué ocurre si lo que queremos es eliminar completamente una hoja de estilos y adjuntar una nueva. Es muy fácil, tal y como se muestra en el siguiente ejemplo:

$('link[media='screen']').attr('href', 'css_alternativo.css');

Anexar HTML a un elemento
Cuando necesitamos anexar html a un elemento, podemos utilizar el método append():

$('#mielemento').append('texto que será añadido');

Comprobar si un elemento existe
Cuando trabajamos con Javascript, a menudo necesitamos comprobar si un elemento existe o no. Usando jQuery y la propiedad length es muy sencillo hacerlo: si length == 0, no existen elementos usados en la página.

if ($('img').length) {
		alert('Se han encuntrado elementos img en la página');
} else {
		alert('No se han encontrado elementos img');
}

Obtener el padre de un elemento
Cuando trabajamos con el DOM, podemos necesitar conocer qué elemento es el padre directo de otro elemento. El método closest() nos permite averiguarlo.

var id = $("button").closest("div").attr("id");

Obtener los hermanos de un elemento
El método sibings() es una herramienta muy útil para obtener los hermanos de un elemento:

$('mielemento').siblings()

Eliminar una opción de una lista desplegable
Cuando trabajamos con listas desplegables puede ser útil actualizar su contenido de acuerdo a las acciones del usuario. Para eliminar una opción de un select, podemos utilizar el siguiente truco:

$("#selectList option[value='2']").remove();

Obtener la opción seleccionada como texto
Útil cuando deseamos conocer que es lo que un usuario ha seleccionado de un lista desplegable.

$('#selectList :selected').text();

Aplicar un efecto “cebra” a las tablas
Cuando usamos tablas, es una buena idea, para mejorar la legibilidad, aplicar un estilo "cebra" a las filas.

$("tr:odd").addClass("odd");

Contar los hijos de un elemento
Si queremos contar cuantos elementos div son hijos de #foo, la siguiente línea nos permitirá saberlo.

$("#foo > div").length

DOMTool: Crea cdigo DOM a partir de HTML

DOOMTool es una interesante herramienta para aquellos que se estén iniciando en AJAX y el proceloso mundo de la arquitectura DOM. La herramienta sirve para convertir el código HTML a DOM. Las aplicaciones son múltiples. Desde insertar texto de un modo similar al método innerHTML a crear nuevos bloques elementos dentro de una web. De este modo podremos ahorrarnos bastante tiempo escribiendo manualmente largas estructuras DOM.

Vamos a realizar un ejemplo bastante sencillo para ver su uso. Supongamos que deseamos que cuando se pulse un botón deseamos que aparezca un nuevo bloque con una imagen y un texto. El código de lo que deseamos crear sería algo como:

<div style="width:300px;height:100px;font-size:11px;background-color:#CCC;">
<img src="http://www.webintenta.com/wp-content/uploads/2007/08/franjas1.jpg" style="float:left;margin-right:15px;" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

(Perdón por la utilización de estilos en línea pero es que el ejemplo queda un poco más visual y no se complica en demasía)

A continuación accedemos a la herramienta y pegamos este código en el textarea dedicado al código HTML. Pulsamos el botón "Create DOM Statements". Con ello obtendremos como salida el código DOM necesario:

var div1=document.createElement('div');
div1.style.width="300px";
div1.style.height="100px";
div1.style.fontSize="11px";
div1.style.backgroundColor="rgb(204, 204, 204)";
var img1=document.createElement('img');
img1.style.cssFloat="left";
img1.style.marginRight="15px";
img1.setAttribute('src','franjas1.jpg');
div1.appendChild(img1);
var txt2=document.createTextNode('Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\n');
div1.appendChild(txt2);


Así como los nodos que deberemos anexar. En este caso únicamente div1.

Ahora únicamente nos quedaría crear una función, que al ser ejecutado, anexase el contenido creado mediante DOM donde deseemos. En mi caso he creado una función llamada pruebaDOM y anexo el contenido dentro de un div denominado ContDOM. El ejemplo completo quedaría:

<html>
<head>
<title>PRUEBA DOMTOOL</title>
<script language="javascript">
function pruebaDOM(){
//CODIGO GENERADO POR DOMTOOL
var div1=document.createElement('div');
div1.style.width="300px";
div1.style.height="100px";
div1.style.fontSize="11px";
div1.style.backgroundColor="rgb(204, 204, 204)";
var img1=document.createElement('img');
img1.style.cssFloat="left";
img1.style.marginRight="15px";
img1.setAttribute('src','franjas1.jpg');
div1.appendChild(img1);
var txt2=document.createTextNode('Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\n');
div1.appendChild(txt2);
//ANEXAMOS EL CONTENIDO
var t = document.getElementById('ContDOM');
t.appendChild(div1);
}
</script>
<div id="ContDOM">
<a href="javascript:pruebaDOM();">Ejecutar DOM</a>
</div>
</body>
</html>

Ejecutando archivos JS en servidores remotos

Autor: Albert Coronado

Una de las limitaciones de AJAX es que no se pueden hacer llamadas a servidores remotos. Es decir, que si tenemos una aplicacion AJAX en el servidor X todos los archivos llamados deben estar en el servidor X. En caso de hacer aplicaciones AJAX y querer obtener los datos de un servidor remoto lo podemos hacer mediante la creación de TAG Script en el codigo HTML en lugar de utilizar el objeto HttpRequest.

HTML

<html>
<body>
<script>
var contador=0;
function execJS(url) {
         var sc = document.createElement("script");
         sc.setAttribute("charset", "utf8");
         sc.src = url;
         document.getElementsByTagName("body")[0].appendChild(sc);
}
</script>
<a href="javascript: execJS('webintenta.js');">Click aquí para ejecutar el script remoto.
(<span id="contador">0</span>) </a>
</body>
</html>  
Javascript:
alert("Hi World");
contador++;
document.getElementById("contador").innerHTML=contador; 

En este ejemplo se puede ver como una página web(webintenta.html) hace una llamada a código remoto(webintenta.js). Simplementa muestra un mensaje y actualiza un contador.
Otra ventaja de esta técnica es que se pueden llamar archivos PHP que retornen código javascript pasándoles paramentros por la URL.

Esta técnica es la que utilizan aplicaciones como Google Maps a la hora de generar los Mapas en la web.

Ver Ejemplo en funcionamiento » »

Cuwhois: Informacin sobre dominios

Cuwhois es otra web que nos permite obtener información sobre un determinado dominio. Introduciendo el nombre de dominio que queremos buscar nos ofrecerá información sobre suIP, el sistema operativo que utiliza, en que país está alojado el servidor, su pagerank, su ranking en Alexa, e incluso permite saber que otros dominios están cohabitando en el mismo servidor.
La gran ventaja respecto a otras herramientas de este tipo es que su uso es muy sencillo y nos reporta bastante información.

CuWhois

Vía Webmaster Libre » »