Clase para crear un objeto DOM?

[nanchet]

Muy buenas a todos! llevo un tiempo leyendo posts de este foro tan útil y ha llegado el momento de formular mi primera pregunta para la cual no he encontrado respuesta ni pistas por ningún sitio, ahí va.

Existe alguna forma o método para crear un objeto del DOM que no sea el típico document.createElement() ?

Mi intención es hacer una clase con la que pueda crear un objeto DOM con sus métodos y demás, hago un mockup de lo que sería, pero que no funciona.

Código Javascript:

function __div() {
  //éste atributo me lo he sacado de la manga, 
  //pero es lo que pretendo conseguir y no hay manera
  this.nodeType = "div";
  this.onclick = function() {
    alert("clic!");
  }
}
 
// Y luego hacer tranquilamente un:
var div = new __div();
 

Pero no hay suerte

Lo que sí he conseguido que funcione pero que no es exactamente lo que quiero es lo siguiente.

Código Javascript:

function __nuevo_div() {
  var div = document.createElement("div");
  div.onclick = function() {
    alert("clic!");
  }
 
  return div;
}
 
var div = __nuevo_div();
 

Además de esto también quería preguntar otra cosilla. "Es legal" construir métodos para los objetos del DOM, además de los que tienen ya de forma innata? sé que se puede pero no sé si es estándar. Ejemplo:

Código Javascript:

function __nuevo_div() {
  var div = document.createElement("div");
  div.mensaje = "clic!";
  div.alerta = function() {
    alert(this.mensaje);
  }
  div.onclick = function() {
    this.alerta();
  }
 
  return div;
}
 
var div = __nuevo_div();
 

Qué opinais? Contestadme con lo que sea, aunque sea para decirme que lo estoy haciendo mal y que me olvide de las "pseudoclases" para estos menesteres, así ya no seguiré comiéndome la cabeza.

A ver si ahora que me he animado a registrarme (y el trabajo me lo permita) me pongo y ayudo al resto de los usuarios.

Muchas gracias!

P.D.: Por supuesto después de cada función aplico un:

Código Javascript:

document.body.appendChild(div);
 

Y es ahí donde me da el error en el primer caso.

[stock]

Hola nanchet.

Ok, a mi punto de vista vas por buen camino, intentando automatizar y abstraer el trabajo sucio que supone trabajar con el DOM, hace tiempo hice un pequeño framework para el concurso que hubo de JavaScript aquí mismo en FDW, te comento como lo hice para que te des una idea.


En primer lugar hice una clase que se llamaba "Element", esta clase era responsable de crear cualquier elemento de y contenía varios metodos para agregarle eventos, estilos, clases de CSS, etc, de manera sencilla! el código del Element era algo así:

Código Javascript:

var Element = function(el){
      this.el = document.getElementById(el); //esto lo puedes hacer más inteligente
      //inclusive crear el elemento si no existe en el DOM
}
 
Element.prototype = {
   addClass : function(klass){
       
   },
 
   addListener : function(type,callback,scope){
           this.el.addEventListener(type,callback,false);  //aquí se debe estandarizar para todos los navegadores
    },
 
    append : function(child){
          this.el.appendChild(child.el);
    }
   //varios otros métodos ........
}
 

La idea es hacer un wrapper para un elemento del DOM, y mediante los métodos modificar sus propiedades, eventos, etc... la idea sería estandarizar las cosas y hacer una clase que funcione en todos los navegadores.

Abstraer el código y trabajar ordenadamente siempre es una buena idea!

Saludos