Raccourci Javascript pour getElementById

Existe-t-il un raccourci pour le JavaScript document.getElementById? Ou est-ce que je peux en définir un? Il obtient refrappe répétitif que plus et plus .

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

$( 'someID' )

Ici, j'ai utilisé $, mais vous pouvez utiliser n'importe quel nom de variable valide.

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

byId( 'someID' )

Pour enregistrer un caractère supplémentaire, vous pouvez polluer le prototype String comme ceci:

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

Cela fonctionne dans certains navigateurs et vous pouvez accéder aux éléments de cette façon:

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

J'ai choisi le nom de la propriété presque au hasard. Si vous vouliez réellement utiliser ce raccourci, je vous suggère de trouver quelque chose de plus facile à taper.

Vous pouvez facilement créer vous-même une sténographie:

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

Une alternative rapide pour contribuer:

HTMLDocument.prototype.e = document.getElementById

Alors faites simplement:

document.e('id');

Il y a un hic, cela ne fonctionne pas dans les navigateurs qui ne vous permettent pas d'étendre les prototypes (par exemple IE6).

(Raccourci pour non seulement obtenir élément par ID, mais aussi obtenir élément par classe: P)

J'utilise quelque chose comme

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

Utilisation: _(".test")retourne tous les éléments avec le nom de la classe testet _("#blah")retourne un élément avec l'id blah.

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

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

les identifiants sont enregistrés dans le fichier window.

HTML

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

JS

logo.innerHTML;

équivaut à écrire:

document.getElementById( 'logo' ).innerHtml;

Je ne suggère pas d'utiliser l'ancienne méthode car ce n'est pas une pratique courante.

Il y a plusieurs bonnes réponses ici et plusieurs dansent autour de la syntaxe de type jQuery, mais aucune ne mentionne réellement l'utilisation de jQuery. Si vous n'êtes pas contre l'essayer, consultez jQuery . Cela vous permet de sélectionner des éléments très facilement comme celui-ci.

Par ID :

$('#elementId')

Par classe CSS :

$('.className')

Par type d'élément :

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

Il n'y a aucun intégré.

Si cela ne vous dérange pas de polluer l'espace de noms global, pourquoi pas:

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

EDIT - J'ai changé le nom de la fonction pour être quelque chose d' inhabituel , mais court et pas autrement en conflit avec jQuery ou toute autre chose qui utilise un $signe nu .

Oui, il devient répétitif d'utiliser la même fonction encore et encore à chaque fois avec un argument différent:

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

Donc, une bonne chose serait une fonction qui prend tous ces arguments en même temps:

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

Ensuite, vous auriez des références à tous vos éléments stockés dans un seul objet:

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

Mais vous devrez tout de même répertorier tous ces identifiants.

Vous pouvez le simplifier encore plus si vous voulez tous les éléments avec des identifiants:

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

Mais il serait assez coûteux d'appeler cette fonction si vous avez de nombreux éléments.

Donc, théoriquement, si vous utilisiez le withmot - clé, vous pourriez écrire un code comme celui-ci:

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

Mais je ne veux pas promouvoir l'utilisation de with. Il existe probablement une meilleure façon de le faire.

Eh bien, vous pouvez créer une fonction de raccourci, c'est ce que je fais.

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

Et puis quand tu voulais l'obtenir, tu fais juste

$('yourid')

De plus, une autre astuce utile que j'ai trouvée est que si vous voulez obtenir la valeur ou le innerHTML d'un ID d'élément, vous pouvez créer des fonctions comme celle-ci:

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

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

J'espère que vous aimez!

J'ai en fait créé une sorte de mini bibliothèque javascript basée sur toute cette idée. La voici .

J'utilise fréquemment:

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


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

Je pense que c'est mieux qu'une fonction externe (par exemple $()ou byId()) parce que vous pouvez faire des choses comme ça:

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

Btw, n'utilisez pas jQuery pour cela, jQuery est beaucoup, beaucoup plus lent qu'une document.getElementById()fonction externe comme $()ou byId(), ou ma méthode: http://jsperf.com/document-getelementbyid-vs-jquery/5

Si cela se trouve sur votre propre site, envisagez d'utiliser une bibliothèque comme jQuery pour vous donner cela et de nombreux autres raccourcis utiles qui évitent également les différences de navigateur. Personnellement, si j'écrivais suffisamment de code pour être dérangé par le longhand, j'inclurais jQuery.

Dans jQuery, la syntaxe serait $("#someid"). Si vous voulez ensuite l'élément DOM réel et non le wrapper jQuery, c'est $("#someid")[0], mais vous pouvez très probablement faire ce que vous voulez avec le wrapper jQuery.

Ou, si vous l'utilisez dans une console de développeur de navigateur, recherchez leurs utilitaires intégrés. Comme quelqu'un d'autre l'a mentionné, la console Chrome JavaScript comprend une $("someid")méthode, et vous pouvez également cliquer sur un élément dans la vue "Éléments" des outils de développement, puis le référencer à $0partir de la console. L'élément précédemment sélectionné devient $1et ainsi de suite.

Si le seul problème ici est la saisie, vous devriez peut-être vous procurer un éditeur JavaScript avec intellisense.

Si le but est d'obtenir un code plus court, vous pouvez envisager une bibliothèque JavaScript comme jQuery, ou vous pouvez simplement écrire vos propres fonctions abrégées, comme:

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

J'avais l'habitude de faire ce qui précède pour de meilleures performances. Ce que j'ai appris l'année dernière, c'est qu'avec les techniques de compression, le serveur le fait automatiquement pour vous, donc ma technique de raccourcissement alourdissait en fait mon code. Maintenant, je suis juste content de taper tout le document.getElementById.

Si vous demandez une fonction de raccourci ...

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

Les fonctions fléchées font est plus courte.

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

envelopper le document.querySelectorAll ... une jquery comme select

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

// usage: $('$myId')

Eh bien, si l'id de l'élément n'est en concurrence avec aucune propriété de l'objet global, vous ne devez utiliser aucune fonction.

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

edit: Mais vous ne voulez pas utiliser cette «fonctionnalité».

Un autre emballage:

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>

Ceci, au cas où vous ne voudriez pas utiliser l' impensable , voyez ci-dessus.

J'ai écrit ceci hier et l'ai trouvé très utile.

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

Voici comment vous l'utilisez.

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