Abreviação de Javascript para getElementById

Existe alguma abreviatura para o JavaScript document.getElementById? Ou existe alguma maneira de definir um? É repetitivo repetindo isso repetidamente .

 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 elementos desta maneira:

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

Eu escolhi o nome da propriedade quase aleatoriamente. Se você realmente quisesse usar essa abreviação, eu sugeriria algo mais fácil de digitar.

Você pode facilmente criar taquigrafia facilmente:

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

Uma alternativa rápida para contribuir:

 HTMLDocument.prototype.e = document.getElementById 

Então faça:

 document.e('id'); 

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

(Shorthand para não só obter elemento por ID, mas também obter elemento por class: 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=0)b.push(a[i]); return b; } } 

Uso: _(".test") retorna todos os elementos com test nome de class, e _("#blah") retorna um elemento com id blah .

Há várias boas respostas aqui e várias estão dançando em torno da syntax semelhante a jQuery, mas nenhuma delas menciona realmente o uso do jQuery. Se você não é contra tentar, confira jQuery . Vamos te selecionar elementos super fáceis assim ..

Por ID :

 $('#elementId') 

Por class CSS :

 $('.className') 

Por tipo de elemento :

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

id’s são salvos na window .

HTML

   

JS

 logo.innerHTML; 

é o mesmo que escrever:

 document.getElementById( 'logo' ).innerHtml; 

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

Não há nenhum embutido.

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

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

EDIT – Eu mudei o nome da function para ser algo incomum , mas curto e não se chocando com jQuery ou qualquer outra coisa que usa um sinal $ nua.

Sim, é repetitivo usar a mesma function repetidamente a cada vez com um argumento diferente:

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

Então, uma coisa legal seria uma function que leva 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 object:

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

Mas você ainda teria que listar todos esses ids.

Você poderia simplificá-lo 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 function se você tiver muitos elementos.


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

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

Mas eu não quero promover o uso de. Provavelmente há uma maneira melhor de fazer isso.

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

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

e então, quando você quis pegar, você acabou de fazer

 $('yourid') 

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

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

Espero que você goste!

Eu realmente fiz uma espécie de mini biblioteca javascript baseada em toda essa idéia. 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 */ 

Eu acho que é melhor que uma function externa (por exemplo, $() ou byId() ) porque você pode fazer coisas como esta:

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

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

Eu escrevi isso ontem e achei bastante útil.

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

É assim que você usa.

 // Get element by ID var node = gid('someID'); //returns 

Hello World

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

Se isso estiver em seu próprio site, considere o uso de uma biblioteca como o jQuery para fornecer este e muitos outros atalhos úteis que também abstraem as diferenças entre navegadores. Pessoalmente, se eu escrevesse código suficiente para ser incomodado pelo longhand, eu includeia o jQuery.

No jQuery, a syntax seria $("#someid") . Se você quer o elemento DOM atual e não o wrapper do jQuery, é $("#someid")[0] , mas você pode muito provavelmente fazer o que quiser depois do wrapper do jQuery.

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

Se o único problema aqui é digitar, talvez você deva obter um editor de JavaScript com o intellisense.

Se o propósito é obter um código mais curto, então você poderia considerar uma biblioteca JavaScript como jQuery, ou você pode simplesmente 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 eu aprendi no ano passado é que, com as técnicas de compression, o servidor faz isso automaticamente para você, então minha técnica de encurtamento estava realmente tornando meu código mais pesado. Agora estou feliz com a digitação de todo o document.getElementById.

Se você está pedindo uma function de taquigrafia …

    The content of the body element is displayed in your browser. 
DIV

ou

    The content of the body element is displayed in your browser. 
DIV

As funções de seta são menores.

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

Enrole 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 competir com nenhuma propriedade do object global, você não precisa usar nenhuma function.

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

edit: Mas você não quer fazer uso deste ‘recurso’.

Outro wrapper:

 const IDS = new Proxy({}, { get: function(target, id) { return document.getElementById(id); } }); IDS.camelCaseId.style.color = 'red'; IDS['dash-id'].style.color = 'blue'; 
 
div 1
div 2