Abreviatura de JavaScript para getElementById

¿Hay alguna forma abreviada de JavaScript document.getElementById? ¿O hay alguna forma de que pueda definir uno? Se vuelve repetitivo volver a escribir eso una y otra vez .

var $ = function( id ) { return document.getElementById( id ); };

$( 'someID' )

Aquí usé $, pero puedes usar cualquier nombre de variable válido.

var byId = function( id ) { return document.getElementById( id ); };

byId( 'someID' )

Para guardar un personaje adicional, puede contaminar el prototipo String de esta manera:

pollutePrototype(String, '绎', {
    configurable: false, // others must fail
    get: function() {
        return document.getElementById(this);
    },
    set: function(element) {
        element.id = this;
    }
});

function pollutePrototype(buildIn, name, descr) {
    var oldDescr = Object.getOwnPropertyDescriptor(buildIn.prototype, name);
    if (oldDescr && !oldDescr.configurable) {
        console.error('Unable to replace ' + buildIn.name + '.prototype.' + name + '!');
    } else {
        if (oldDescr) {
            console.warn('Replacing ' + buildIn.name + '.prototype.' + name + ' might cause unexpected behaviour.');
        }
        Object.defineProperty(buildIn.prototype, name, descr);
    }
}

Funciona en algunos navegadores y puede acceder a los elementos de esta manera:

document.body.appendChild(
    'footer'.绎 = document.createElement('div')
);
'footer'.绎.textContent = 'btw nice browser :)';

He elegido el nombre de la propiedad casi al azar. Si realmente quisiera utilizar esta abreviatura, le sugiero que se le ocurra algo más fácil de escribir.

Puede crear taquigrafía fácilmente usted mismo:

function getE(id){
   return document.getElementById(id);
}

Una alternativa rápida para contribuir:

HTMLDocument.prototype.e = document.getElementById

Entonces solo haz:

document.e('id');

Hay un problema, no funciona en navegadores que no le permiten extender prototipos (por ejemplo, IE6).

(Abreviatura para no solo obtener elemento por ID, sino también obtener elemento por clase: P)

Yo uso algo como

function _(s){
    if(s.charAt(0)=='#')return [document.getElementById(s.slice(1))];
    else if(s.charAt(0)=='.'){
        var b=[],a=document.getElementsByTagName("*");
        for(i=0;i<a.length;i++)if(a[i].className.split(' ').indexOf(s.slice(1))>=0)b.push(a[i]);
        return b;
    }
}

Uso: _(".test")devuelve todos los elementos con nombre de clase testy _("#blah")devuelve un elemento con id blah.

<script>
var _ = function(eId)
{
    return getElementById(eId);
}
</script>

<script>
var myDiv = _('id');
</script>

las identificaciones se guardan en el window.

HTML

 <div id='logo'>logo</div>

JS

logo.innerHTML;

es lo mismo que escribir:

document.getElementById( 'logo' ).innerHtml;

No sugiero usar el método anterior ya que no es una práctica común.

Hay varias buenas respuestas aquí y varias bailan alrededor de la sintaxis similar a jQuery, pero ninguna menciona el uso real de jQuery. Si no está en contra de probarlo, consulte jQuery . Te permite seleccionar elementos súper fácil como este ..

Por ID :

$('#elementId')

Por clase CSS :

$('.className')

Por tipo de elemento :

$('a')  // all anchors on page 
$('inputs')  // all inputs on page 
$('p a')  // all anchors within paragaphs on page 

No hay ninguno incorporado.

Si no le importa contaminar el espacio de nombres global, ¿por qué no?

function $e(id) {
    return document.getElementById(id);
}

EDITAR: cambié el nombre de la función para que sea algo inusual , pero corto y que no entre en conflicto con jQuery o cualquier otra cosa que use un $signo simple .

Sí, se vuelve repetitivo usar la misma función una y otra vez cada vez con un argumento diferente:

var myImage = document.getElementById("myImage");
var myDiv = document.getElementById("myDiv");

Entonces, algo bueno sería una función que toma todos esos argumentos al mismo tiempo:

function getElementsByIds(/* id1, id2, id3, ... */) {
    var elements = {};
    for (var i = 0; i < arguments.length; i++) {
        elements[arguments[i]] = document.getElementById(arguments[i]);
    }
    return elements;
}

Entonces tendrías referencias a todos tus elementos almacenados en un objeto:

var el = getElementsByIds("myImage", "myDiv");
el.myImage.src = "test.gif";

Pero aún tendría que enumerar todos esos identificadores.

Podría simplificarlo aún más si desea todos los elementos con identificadores:

function getElementsWithIds() {
    var elements = {};
    var elementList = document.querySelectorAll("[id]");
    for (var i = 0; i < elementList.length; i++) {
        elements[elementList[i].id] = elementList[i];
    }
    return elements;
}

Pero sería bastante caro llamar a esta función si tiene muchos elementos.

Entonces, teóricamente, si usara la withpalabra clave, podría escribir un código como este:

with (getElementsByIds('myButton', 'myImage', 'myTextbox')) {
    myButton.onclick = function() {
        myImage.src = myTextbox.value;
    };
}

Pero no quiero promover el uso de with. Probablemente haya una mejor manera de hacerlo.

Bueno, podrías crear una función abreviada, eso es lo que hago.

function $(element) {
    return document.getElementById(element);
}

y luego, cuando querías conseguirlo, lo hacías

$('yourid')

Además, otro truco útil que encontré es que si desea obtener el valor o el HTML interno de un ID de elemento, puede hacer funciones como esta:

function $val(el) {
    return $(el).value;
}

function $inner(el) {
    return $(el).innerHTML;
}

¡Espero que te guste!

De hecho, hice una especie de mini biblioteca de JavaScript basada en toda esta idea. Aquí está.

Yo uso con frecuencia:

var byId='getElementById'
var byClass='getElementsByClass'
var byTag='getElementsByTag'


var mydiv=document[byId]('div') 
/* as document["getElementById"] === document.getElementById */

Creo que es mejor que una función externa (por ejemplo, $()o byId()) porque puedes hacer cosas como esta:

var link=document[byId]('list')[byClass]('li')[0][byTag]('a')[0]

Por cierto, no use jQuery para esto, jQuery es mucho, mucho más lento que document.getElementById()una función externa como $()o byId(), o mi método: http://jsperf.com/document-getelementbyid-vs-jquery/5

Si está en su propio sitio, considere usar una biblioteca como jQuery para darle esta y muchas otras abreviaturas útiles que también abstraen las diferencias del navegador. Personalmente, si escribiera suficiente código para que me molestara la mano, incluiría jQuery.

En jQuery, la sintaxis sería $("#someid"). Si luego desea el elemento DOM real y no el contenedor jQuery, lo es $("#someid")[0], pero lo más probable es que pueda hacer lo que esté buscando con el contenedor jQuery.

O, si está usando esto en una consola de desarrollador de navegador, investigue sus utilidades integradas. Como alguien más mencionó, la consola de JavaScript de Chrome incluye un $("someid")método, y también puede hacer clic en un elemento en la vista "Elementos" de las herramientas para desarrolladores y luego hacer referencia a él $0desde la consola. El elemento seleccionado anteriormente se convierte en $1y así sucesivamente.

Si el único problema aquí es escribir, tal vez debería obtener un editor de JavaScript con intellisense.

Si el propósito es obtener un código más corto, entonces podría considerar una biblioteca JavaScript como jQuery, o simplemente puede escribir sus propias funciones abreviadas, como:

function byId(string) {return document.getElementById(string);}

Solía ​​hacer lo anterior para un mejor rendimiento. Lo que aprendí el año pasado es que con las técnicas de compresión el servidor lo hace automáticamente por ti, por lo que mi técnica de acortamiento estaba haciendo que mi código fuera más pesado. Ahora estoy contento de escribir todo el documento.getElementById.

Si está solicitando una función de taquigrafía ...

<!DOCTYPE html>
<html>

<body>
The content of the body element is displayed in your browser.
<div id="d1">DIV</div>
<script>
var d=document;
d.g=document.getElementById;
d.g("d1").innerHTML = "catch";
</script>
</body>

</html>

o

<!DOCTYPE html>
<html>

<body>
The content of the body element is displayed in your browser.
<div id="d1">DIV</div>
<script>
var w=window;
w["d1"].innerHTML = "catch2";
</script>
</body>

Las funciones de flecha hacen que sea más corto.

var $id = (id) => document.getElementById(id);

envuelve el document.querySelectorAll ... un jquery como select

function $(selector){
   var s = document.querySelectorAll(selector); 
   return s.length > 1 ? s : s[0];
}

// usage: $('$myId')

Bueno, si la identificación del elemento no compite con ninguna propiedad del objeto global, no tiene que usar ninguna función.

myDiv.appendChild(document.createTextNode("Once I was myDiv. "));
myDiv.id = "yourDiv";
yourDiv.appendChild(document.createTextNode("But now I'm yourDiv."));

editar: Pero no quieres hacer uso de esta 'función'.

Otro envoltorio:

const IDS = new Proxy({}, { 
    get: function(target, id) {
        return document.getElementById(id); } });

IDS.camelCaseId.style.color = 'red';
IDS['dash-id'].style.color = 'blue';

<div id="camelCaseId">div 1</div>
<div id="dash-id">div 2</div>

Esto, en caso de que no quieras usar lo impensable , mira arriba.

Escribí esto ayer y lo encontré bastante útil.

function gid(id, attribute) {
    var x = 'document.getElementById("'+id+'")';
    if(attribute) x += '.'+attribute;
    eval('x =' + x);
    return x;
}

Así es como lo usas.

// Get element by ID
   var node = gid('someID'); //returns <p id='someID' class='style'>Hello World</p>

// returns 'Hello World'
// var getText = document.GetElementById('someID').innerText; 
   var getText = gid('someID', 'innerText'); 

// Get parent node
   var parentNode = gid('someID', 'parentNode');