No uses innerHTML, usa DOM

20 agosto 2007 at 19:30

Fecha Posted in Computers
Tags Tags: , , ,

A pesar de que innerHTML sea relativamente mucho más rápido, existen ciertas cuestiones que hacen más recomendable el uso de DOM para manejar documentos xHTML.

  • innerHTML no es un estándar, es una propiedad de Microsoft (al igual que outerHTML).
  • Se supone en un futuro innerHTML no funcionará en los documentos xHTML basados en el MIME type application/xhtml+xml.
  • Una de las diferencias principales entre innerHTML y DOM es que el primero es un string y el segundo una estructura de objetos jerárquica (un árbol). Meter un string en un objeto es una auténtica chapuza, por llamarlo de algún modo.
  • Perdemos interacción con el objeto (fijar atributos, cambiar valores, …) al ser un string.

Crear un elemento

innerHTML

document.getElementById("contenedor").innerHTML =
                    "<div id="capa" >Texto<!--comentario--></div>";

DOM

div = document.createElement("div");
div.setAttribute("id", "capa");
texto = document.createTextNode("Texto");
div.appendChild(texto);
div_comentario = document.createComment("comentario");
div.appendChild(div_comentario);
document.getElementById("contenedor").appendChild(div);

Obtener el texto de un elemento

innerHTML

texto = document.getElementById("contenedor").innerHTML

DOM

texto = document.getElementById("contenedor").firstChild.nodeValue;

Crear varios elementos

innerHTML

data = new Array("one","two","three");
mHTML = "<ul>";
for(i=0; i<data.length; i++) {
	mHTML+="<li>" + data[i] + "";
}
mHTML+="</ul>";
document.getElementById("contenedor").innerHTML = mHTML;

DOM

data = new Array("one", "two", "three");
eUL = document.createElement("ul");
for(i=0; i<data .length; i++) {
	eLI = document.createElement("li");
	eLI.appendChild(document.createTextNode(data[i]));
	eUL.appendChild(eLI);
}
document.getElementById("contenedor").appendChild(eUL);

Más información | SlayerOffice
Más información | Mozilla Developer Center

Comments (ADD YOURS)

  1. Hola Alfonso.

    Si no recuerdo mal, el problema de no utilizar innerHTML es que hay muchas cosas del DOM que explorer 6 no soportaba el 7 no lo sé.

    Por poco que nos pueda gustar si el navegador de M$ no soporta algo, toca hacerlo a su manera, no queda otra.

  2. Hola Daniel. Esa no es la actitud ni mucho menos. Yo programo usando estándares, si alguien no puede usarlo es su problema (o más bien de su navegador). A veces pienso que es una estragegia comercial de Microsoft, obligar a que programen para su producto. Si programas para Internet Explorer, no estás nada más que haciendo un favor a Microsoft.

    Un saludo

  3. Te doy toda la razón del mundo, mi problema es que quien paga manda, si les digo a mis jefes o a los clientes que se debe usar un navegador que no sea explorer, ya se sabe donde me mandarían ;)

  4. Lo sé, te entiendo perfectamente, pero si el apoyo no es unánime seguirá todo igual.

    Un saludo!

  5. Bueno jamas conseguirás ese acorde unanime pq siempre habrá alguien q no este de acuerdo :) pero una cosa simple y tal… yo solo quiero introducir texto a un div q tengo con un id… como lo haría con el dom? pq veo ahi mucha parafernalia de crear elementos y tal… pero solo quiero meterle un texto only eso… lo q sería la primera opción del innerhtml pero en algo más sencillo pq el elemento div ya está creado…

  6. Amigos… no está mal programar en un entorno M$, pero lo cierto es que no todos los navegadores del mundo son IE y es muy grave que nuestros clientes nos digan que nuestra web no corre bien en Firefox u otro navegador, solo por no utilizar un estandar o en su defecto validar el navegador para saber que metodo o eventos utilizar.

    Particularmente me inclino por los estandares y DOM es definitivamente una mejor forma de hacer las cosas…

  7. en mi humilde opinion, el DOM es un coñazo.

    Escribir setenta lineas de código JavaScript, para lo que te supondría una linea de html. Que si crea elemento, asignale atributos, clase, eventos, y ahora appenChild y seguimos con sus hijos….

    Es muy bonita, su estructura gerarquica, pero me cansa muchisimo. Al final acabo recurriendo a HTML2DOM, pero son solo chapuzas.

    En mi opinion, (y soy absolutamente contrario a microsoft, a sus imposiciones, a su güindous, a sus navegadores y a sus IDEs) (y lo dice alguien que programa en php páginas usando el notepad++, y probandolas en Firefox antes que en IE) (PHP, notepad++ y firefox son software libre para el que no lo sepa)…
    pues eso, que en mi opinion, lo del innerHTML es una de las pocas cosas buenas que ha inventado microsoft.
    ala, ahora echaros encima :D

  8. xDDDDDDDDD

    que burrada, entonces algo estoy haciendo mal, en mi script uso el innerHTML y me funciona de maravilla con el firefox, pero si lo pruebo con el IE del moco$oft nomas no jala, no me muestra nada.

  9. bueno es myuy buena a herramienta del innerHTML
    que mas da aun no hay nada definido en estandares de HTML los estandares los estan poniendo las empresas asi que no nos mintamos los pocos estandares de la W3C que e podido leer no me han ayudado de mucho y sigo buscando un estandar definitivo y que en verdadayude en algo pero aun no lo encuentro espero hacerlo pronto y si alguien tiene algun estandar mandemelo pls seria muy importante ese aporte

  10. En principio soy partidario del software standard. En mi caso siempre he testeado la página web en IE, Firefox y Mac(asi de sofis). Lo bueno de usar software standard es que sirve para todos, y lo malo es que es mas limitadito en efectos. Hay rutinas javascript que detectan el navegador, con lo que una opción es hacer diferentes efectos para diferentes navegadores (o los mismos con diferentes instrucciones). Creo que esto es lo mas profesional, no olvidarse de los otros navegadores. Y mal que nos pese, uno de ellos es IE, de Microsoft.

  11. Pues la respuesta es mas que simple, a los que dicen que InnerHTML es mejor pk es mas facil… pues les tengo la respuesta, es la estrategia de m$, una aparente simplificacion hace malos programadores, hace hacer creer que los estandares no funcionan o no sirven para nada, y al final tenemos miles de paginas web mediocres, sin estandares y al que le tienen que estar haciendo "chapuzas" como dicen, para que les funcione aqui o halla, la solucion es simple, yo no me complico la vida, W3C quien fue el ignorante que dijo que no sirve para nada, si es la organizacion mundial que establece los estandares jajajja se escribe el codigo HTML, el CSS y luego los validas con el validador de HTML y CSS respectivamente sin siquiera probarlo en algun navegador!!!! si el validador lo acepta, tiene que verse bien en cualquier navegador que maneje estandares, sin chapuzas ni nada!!!
    Sin un estandar todo es mediocre, miren m$ ni siquiera para sus software's tienen un estandar y ahi ven los resultados.

  12. gracias, para mis propositos el dom me funcionó de maravillas, mientras que el innerhtml no me sirvió

  13. Avatar
    Juan de Dios
    09 sep 2008 18:34:49

    Si tu aplicación se demora 10 veces más usando uno u otro cual utilizas tal vez sólo lo utices para crear pocos elementos. pero cuando haces una interface llena de elementos que refrescan buscas la velocidad aún en los navegadores estándares la velocidad es 3 veces más, qué necesito hacer para que mi aplicación sea más rápida si mi refresco de elementos es lenta… Todo buen programador de Javascript que se precie de serlo domina el DOM a su antojo pero para crear una cantidad de elementos que sólo tengan una funcionalidad específica utilizará innerHTML.

  14. Avatar
    Juan de Dios
    09 sep 2008 18:39:09

    Tal vez te pueda interesar : http://blog.stevenlevithan.com/archives/faster-than-innerhtml
    Una manera de optimizar las cosas. Saludos!


  15. window.location="http://www.cristalab.com";

  16. "Yo programo usando estándares, si alguien no puede usarlo es su problema" Es joda no?

Write a comment



OpenID Sign In with OpenID