Abbreviazione Javascript per getElementById

Esiste una scorciatoia per JavaScript document.getElementById? O c'è un modo in cui posso definirne uno? Diventa ripetitivo riscrivendolo più e più volte .

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

$( 'someID' )

Qui ho usato $, ma puoi usare qualsiasi nome di variabile valido.

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

byId( 'someID' )

Per salvare un carattere in più potresti inquinare il prototipo String in questo modo:

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

Funziona in alcuni browser e puoi accedere agli elementi in questo modo:

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

Ho scelto il nome della proprietà quasi a caso. Se in realtà volessi usare questa scorciatoia, ti suggerirei di inventare qualcosa di più facile da digitare.

Puoi facilmente creare stenografia facilmente da solo:

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

Una rapida alternativa per contribuire:

HTMLDocument.prototype.e = document.getElementById

Quindi fai semplicemente:

document.e('id');

C'è un problema, non funziona nei browser che non ti permettono di estendere i prototipi (ad esempio IE6).

(Abbreviazione non solo per ottenere elementi per ID, ma anche per ottenere elementi per classe: P)

Uso qualcosa di simile

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

Utilizzo: _(".test")restituisce tutti gli elementi con il nome della classetest e _("#blah")restituisce un elemento con id blah.

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

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

gli ID vengono salvati nel file window.

HTML

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

JS

logo.innerHTML;

è lo stesso che scrivere:

document.getElementById( 'logo' ).innerHtml;

Non suggerisco di utilizzare il primo metodo in quanto non è pratica comune.

Ci sono molte buone risposte qui e molte stanno danzando sulla sintassi simile a jQuery, ma nessuna menziona effettivamente l'uso di jQuery. Se non sei contrario a provarlo, controlla jQuery . Ti consente di selezionare elementi super facili come questo ..

Per ID :

$('#elementId')

Per classe CSS :

$('.className')

Per tipo di elemento :

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

Non ce n'è integrato.

Se non ti dispiace inquinare lo spazio dei nomi globale, perché no:

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

MODIFICA - Ho cambiato il nome della funzione in qualcosa di insolito , ma breve e non in contrasto con jQuery o qualsiasi altra cosa che utilizza un $segno nudo .

Sì, diventa ripetitivo usare la stessa funzione più e più volte ogni volta con un argomento diverso:

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

Quindi una cosa carina sarebbe una funzione che accetta tutti quegli argomenti allo stesso 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;
}

Quindi avresti riferimenti a tutti i tuoi elementi memorizzati in un oggetto:

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

Ma dovresti comunque elencare tutti quegli ID.

Potresti semplificarlo ancora di più se vuoi tutti gli elementi con ID:

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

Ma sarebbe piuttosto costoso chiamare questa funzione se hai molti elementi.

Quindi, in teoria, se utilizzassi la withparola chiave potresti scrivere codice come questo:

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

Ma non voglio promuovere l'uso di with. Probabilmente c'è un modo migliore per farlo.

Beh, potresti creare una funzione abbreviata, ecco cosa faccio.

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

e poi quando volevi averlo, lo fai e basta

$('yourid')

Inoltre, un altro trucco utile che ho trovato, è che se vuoi ottenere il valore o innerHTML di un ID articolo, puoi creare funzioni come questa:

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

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

Spero ti piaccia!

In realtà ho creato una sorta di mini libreria javascript basata su tutta questa idea. Eccolo qui .

Uso spesso:

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


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

Penso che sia meglio di una funzione esterna (ad esempio $()o byId()) perché puoi fare cose come questa:

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

A proposito, non usare jQuery per questo, jQuery è molto, molto più lento di document.getElementById()una funzione esterna come $()o byId(), o il mio metodo: http://jsperf.com/document-getelementbyid-vs-jquery/5

Se si trova sul tuo sito, considera l'utilizzo di una libreria come jQuery per darti questa e molte altre scorciatoie utili che astraggono anche le differenze del browser. Personalmente, se scrivessi abbastanza codice per essere infastidito dalla mano lunga, includerei jQuery.

In jQuery, la sintassi sarebbe $("#someid"). Se quindi vuoi l'elemento DOM effettivo e non il wrapper jQuery, lo è $("#someid")[0], ma molto probabilmente potresti fare quello che stai cercando con il wrapper jQuery.

Oppure, se lo stai utilizzando in una console per sviluppatori di browser, cerca le loro utilità integrate. Come menzionato da qualcun altro, la console JavaScript di Chrome include un $("someid")metodo e puoi anche fare clic su un elemento nella visualizzazione "Elementi" degli strumenti per sviluppatori e quindi fare riferimento ad esso $0dalla console. L'elemento selezionato in precedenza diventa $1e così via.

Se l'unico problema qui è la digitazione, forse dovresti procurarti un editor JavaScript con intellisense.

Se lo scopo è ottenere codice più breve, potresti prendere in considerazione una libreria JavaScript come jQuery, oppure puoi semplicemente scrivere le tue funzioni abbreviate, come:

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

Ho usato per fare quanto sopra per prestazioni migliori. Quello che ho imparato l'anno scorso è che con le tecniche di compressione il server lo fa automaticamente per te, quindi la mia tecnica di accorciamento stava effettivamente rendendo il mio codice più pesante. Ora sono solo felice di scrivere l'intero document.getElementById.

Se stai chiedendo una funzione abbreviata ...

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

Le funzioni della freccia fanno è più breve.

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

avvolgere il document.querySelectorAll ... un jquery come select

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

// usage: $('$myId')

Bene, se l'id dell'elemento non è in concorrenza con nessuna proprietà dell'oggetto globale, non devi usare nessuna funzione.

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

modifica: ma non vuoi usare questa "funzionalità".

Un altro 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 id="camelCaseId">div 1</div>
<div id="dash-id">div 2</div>

Questo, nel caso tu non voglia usare l' impensabile , vedi sopra.

L'ho scritto ieri e l'ho trovato abbastanza utile.

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

Ecco come lo usi.

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