Abreviação de Javascript para getElementById

Existe alguma forma abreviada para o JavaScript document.getElementById? Ou existe alguma maneira de definir um? Fica redigitação repetitivo que mais e mais .

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

$( 'someID' )

Aqui eu usei $, mas você pode usar qualquer nome de variável válido.

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

byId( 'someID' )

Para salvar um caractere extra, você pode poluir o protótipo String assim:

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 em alguns navegadores e você pode acessar os elementos da seguinte maneira:

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

Escolhi o nome da propriedade quase ao acaso. Se você realmente quiser usar esta abreviação, sugiro algo mais fácil de digitar.

Você pode criar abreviações facilmente:

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

Uma alternativa rápida para contribuir:

HTMLDocument.prototype.e = document.getElementById

Depois é só fazer:

document.e('id');

Há um problema, ele não funciona em navegadores que não permitem estender protótipos (por exemplo, IE6).

(Abreviação para não apenas obter elemento por ID, mas também obter elemento por classe: P)

Eu 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")retorna todos os elementos com nome de classe teste _("#blah")retorna um elemento com id blah.

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

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

IDs são salvos no window.

HTML

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

JS

logo.innerHTML;

é o mesmo que escrever:

document.getElementById( 'logo' ).innerHtml;

Não sugiro usar o método anterior, pois não é uma prática comum.

Existem várias respostas boas aqui e várias estão dançando em torno da sintaxe semelhante à jQuery, mas nenhuma menciona realmente usar jQuery. Se você não é contra tentar, verifique o jQuery . Ele permite que você selecione elementos muito fáceis como este ..

Por ID :

$('#elementId')

Por classe CSS :

$('.className')

Por tipo de elemento :

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

Não há nenhum embutido.

Se você não se importa em poluir o namespace global, por que não:

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

EDITAR - mudei o nome da função para algo incomum , mas curto e não colidindo com jQuery ou qualquer outra coisa que usa um $sinal simples .

Sim, ele fica repetitivo usar a mesma função mais e mais cada vez com um argumento diferente:

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

Então, uma coisa boa seria uma função que recebe todos esses argumentos ao mesmo tempo:

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

Então você teria referências a todos os seus elementos armazenados em um objeto:

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

Mas você ainda teria que listar todos esses ids.

Você poderia simplificar ainda mais se quiser todos os elementos com ids:

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;
}

Mas seria muito caro chamar essa função se você tiver muitos elementos.

Então, teoricamente, se você usasse a withpalavra-chave, você poderia escrever um código como este:

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

Mas não quero promover o uso de with. Provavelmente existe uma maneira melhor de fazer isso.

Bem, você poderia criar uma função abreviada, é o que eu faço.

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

e então, quando você quiser obtê-lo, basta fazer

$('yourid')

Além disso, outro truque útil que descobri é que se você deseja obter o valor ou innerHTML de um ID de item, pode fazer funções como estas:

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

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

Espero que você goste!

Na verdade, fiz uma espécie de mini biblioteca javascript com base nessa ideia. Aqui está.

Eu freqüentemente uso:

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


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

Acho que é melhor do que uma função externa (por exemplo, $()ou byId()) porque você pode fazer coisas assim:

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

A propósito, não use jQuery para isso, jQuery é muito, muito mais lento do que document.getElementById()uma função externa como $()ou byId(), ou meu método: http://jsperf.com/document-getelementbyid-vs-jquery/5

Se estiver em seu próprio site, considere usar uma biblioteca como a jQuery para fornecer este e muitos outros atalhos úteis que também abstraem as diferenças do navegador. Pessoalmente, se eu escrevesse código suficiente para ser incomodado por manuscritos, incluiria o jQuery.

Em jQuery, a sintaxe seria $("#someid"). Se você quiser o elemento DOM real e não o wrapper jQuery, é $("#someid")[0], mas provavelmente você pode fazer o que quiser com o wrapper jQuery.

Ou, se você estiver usando isso em um console de desenvolvedor de navegador, pesquise seus utilitários integrados. Como outra pessoa mencionou, o console JavaScript do Chrome inclui um $("someid")método, e você também pode clicar em um elemento na visualização "Elementos" das ferramentas do desenvolvedor e fazer referência a ele $0no console. O elemento selecionado anteriormente se torna $1e assim por diante.

Se o único problema aqui for digitar, talvez você deva apenas conseguir um editor de JavaScript com intellisense.

Se o objetivo é obter um código mais curto, você pode considerar uma biblioteca JavaScript como jQuery, ou pode apenas escrever suas próprias funções abreviadas, como:

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

Eu costumava fazer o acima para melhor desempenho. O que aprendi no ano passado é que, com as técnicas de compactação, o servidor faz isso automaticamente para você, então minha técnica de encurtamento estava na verdade tornando meu código mais pesado. Agora estou muito feliz em digitar todo o document.getElementById.

Se você está pedindo uma função abreviada ...

<!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>

ou

<!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>

As funções da seta são mais curtas.

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

envolva o document.querySelectorAll ... um jquery como select

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

// usage: $('$myId')

Bem, se o id do elemento não compete com nenhuma propriedade do objeto global, você não precisa usar nenhuma função.

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

editar: Mas você não quer fazer uso deste 'recurso'.

Outro invólucro:

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>

Isso, caso você não queira usar o impensável , veja acima.

Escrevi isso ontem e achei muito útil.

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

É assim que você o usa.

// 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');