Aporte sencillo

[0123]

Buenas a todos,

Voy a publicar una función que hice hace mucho. Que se puede mejorar pues no soy un crack del código, pero que me ahorra muchísimo trabajo.

El caso es que he probado cantidad de librerías que hacen lo mismo, pero siempre usan muchos recursos, por que hacen mucho más de lo que yo necesito tal vez, o simplemente por que no les importa tanto.

Es una función para seleccionar elementos del DOM de forma sencilla. Muy parecida a CSSQuery, pero "usable", pues ya sabemos como devora ram este tipo de librerías.

Debería maquetar la función y dejarla bonita, pero si me pongo no la publico, jeje.

La función:

Código Javascript:

function G(r, e)
    {
        var N=function(o) {
        var i = document.getElementsByTagName("*");
        for (var p = 0; p < i.length; p++)  
            {
                if (i[p] == o)return p;
            }
           return 0;
        }
        var GG=function(r, e)
            {
                e = e || document;
                var  d = [];
                var k = r.split(",");
                for(var u = 0;u < k.length;u++)
                    {
                        var f = "*",w,x=0, g = 0, b = k[u].split(" ");
                        var a = b[0];
                        0 < b.length && (b.shift(), g = b.join(" "));
                        "." != a.substr(0,1) ? (f = a, a = "") : a = a.replace(".", "");
                        w = RegExp("(^|\\s)" + a + "(\\s|$)");
                        for(var b = e.getElementsByTagName(f), c = 0;c < b.length;c++)
                            {
                                x=0;
                                if(a=='')x=1;
                                else if(a!='' && w.test(b[c].className))x=1;
                                if(x==1)
                                    {
                                        if(g)d = d.concat(GG(g, b[c]));
                                        else d[N(b[c])] = b[c]; 
                                    }
                            }
                    }
                return d;
            }
        var x=GG(r,e);
        var w=[];
        var i=0;
        for(var p in x)
            {
                w[i]=x[p];
                i++;
            }
        return w;
    }
 

Forma de usarla:

Código Javascript:

//selector:
    //para seleccionar todos los elementos de la clase "hola":
        x=G('.hola');
    //para seleccionar todos los elementos de la clase "hola" dentro de otro elemento
        x=G('.hola',mielemento);
    //para seleccionar los elementos con clase "hola" y "mundo":
        x=G('.hola,.mundo');
    //para seleccionar los elementos con clase "hola" dentro de una tabla
        x=G('table .hola');
    //o dentro de una lista dentro de una tabla
        x=G('table ul li .hola');
    //para seleccionar todos los links:
        x=G('a');
//uso
    x[0].innerHTML='HOLA MUNDO!';
 

Como digo, no es la panacea. Pero si no usas ningún framework te ahorras un trabajo muy grande. Se que existen muchas funciones muy parecidas, pero siempre que las he usado hacen que una web simple se vuelva "lentilla".

Me gustaría que alguien le diese un lavado de cara para que funcionase más rápido, pero yo tengo muchas limitaciones de conocimientos en Javascript. Solo queria que seleccionase por clase y por tag, podría seleccionar muchas mas cosas... pero no queria que fuese potente en ese aspecto.

Un saludo!... espero que alguien la use!, jeje y si alguien mejora su codigo seria la bomba!.

Me gustaria saber la opinión de esos "cracks del javascript", jeje.

pd: la he probado en ie6 y funciona, así como en navegadores modernos.

[jonni09lo]

Buen aporte, aunque en ES5 (EmacScript 5) puedes hacer esto:

Código Javascript:

var $$ = document.querySelectorAll.bind(document);
 
$$('.movieImg, .preview')[0].innerHTML = "Hola mundo";
 

Además se puede dar soporte al ES5 con esto para los navegadores viejos.

Saludos

[jhonny6721]

Gracias por el aporte. Hace falta mas gente colaboradora en este foro. Yo aportare algo en cuanto tenga la capacidad de hacerlo.

[0123]

Hola jonni09lo,

No conocia ni el nombre de EmacScript 5, jeje. Y no lo entiendo la verdad... he leido en la wikipedia que es y demas, pero no llego a comprenderlo.

Mi pregunta es... ¿esa linea de codigo funciona en IE6?, es que me has dejado K.O., jeje.

[jonni09lo]

Bueno creo que dar soporte a Internet Explorer 6 es una locura (si a mi me dicen loco por dar soporte a IE8 )

Pues ECmaScript (perdón por el error de typo) es un estándar que define una sintaxis de programación próxima del lenguaje C.

Al ser Javascript un lenguaje script, significa que es un lenguaje interpretado. El código que programamos en un archivo js o dentro de las etiquetas <script> es un simple texto y una vez descargado es el navegador quien está a cargo de ejecutarlo tras interpretarlo. Por esa razón, cada navegador es quien posee su propio interprete de javascript y es susceptible ser incompleto y no entender todo lo que habría podido codificar. (De allí viene los horrores de programar para IE < 9)

Para aquellos navegadores que no soporten la especificación de ECmaScript 5 (que es la última actualmente y que pronto vendrá la sexta edición) es el "helper" que te mostré ya que ese es proveerá de las herramientas para dar soporte a funcionalidades que el navegador no posee...

Se que funciona para IE8, más no sé si funcionará para versiones anteriores a este.

Saludos

[Aijoona]

querySelector y querySelectorAll *no son* parte de EcmaScript.

EcmaScript solo define aspectos del lenguaje, no APIs especificas (en este caso DOM).

JavaScript es un lenguaje, DOM es un API disponible para dicho lenguaje.

[0123]

Ahh!... gracias :D