Javascript raccourci pour getElementById

Pour enregistrer un supplément de caractère vous pourraient polluer la Chaîne de prototype 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);
    }
}

Il fonctionne dans certains navigateurs, et vous pouvez accéder à des é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é de manière quasi aléatoire. Si vous avez réellement voulu utiliser ce raccourci, je vous recommandons de venir avec quelque chose de plus facile à taper.

Une alternative rapide et de contribuer:

HTMLDocument.prototype.e = document.getElementById

Puis il suffit de faire:

document.e('id');

Il y a un piège, il ne fonctionne pas dans les navigateurs qui ne les laissez pas vous étendre prototypes (par exemple, IE6).

id sont enregistrés à la window.

HTML

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

JS

logo.innerHTML;

est la même que l'écriture:

document.getElementById( 'logo' ).innerHtml;

Je vous suggère de ne pas utiliser l'ancienne méthode n'est pas pratique courante.

Il y a plusieurs bonnes réponses ici et plusieurs sont de la danse autour de jQuery-comme la syntaxe, mais aucun ne mentionne effectivement à l'aide de jQuery. Si vous n'êtes pas à l'encontre de l'essayer, découvrez jQuery. Il vous permet de sélectionner des éléments super facile comme ça..

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 

Oui, ça devient répétitif à utiliser la même fonction sur et sur à chaque fois avec un autre argument:

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

Donc une belle chose serait une fonction qui prend tous ces arguments, à la fois:

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

Alors que vous auriez des références à toutes vos éléments stockés dans un objet:

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

Mais vous auriez encore à la liste de tous les codes.

Vous pourriez simplifier encore plus si vous le souhaitez tous éléments avec 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;
}

Mais il serait assez cher pour appeler cette fonction si vous avez de nombreux éléments.

---

Donc, théoriquement, si vous utilisez le with mot-clé que vous pourriez écrire un code comme ceci:

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

Mais je ne veux pas promouvoir l'utilisation de with. Probablement il y a une meilleure façon de le faire.

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 ceci:

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

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

Si c'est sur votre propre site, pensez à utiliser une bibliothèque comme jQuery pour vous donner cela et pour bien d'autres abréviations que également abstraction des différences de navigateurs. Personnellement, si j'ai écrit le code nécessaire à l'être gêné par la main, je voudrais inclure jQuery.

En jQuery, la syntaxe serait $("#someid"). Ensuite, si vous voulez la réelle de l'élément du DOM et de ne pas le jQuery wrapper, c'est $("#someid")[0], mais vous pourriez probablement faire ce que vous êtes après, avec le jQuery wrapper.

Ou, si vous êtes en utilisant ce dans un navigateur développeur de la console, à la recherche de leur intégrés dans les services publics. Comme quelqu'un d'autre a mentionné, le Chrome JavaScript console comprend un $("someid") méthode, et vous pouvez également cliquer sur un élément dans les outils de développement des "Éléments" de la vue et de référence avec $0 à partir de la console. Précédemment sélectionné, l'élément devient $1 et ainsi de suite.

Si vous demandez une abréviation de la fonction...

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

envelopper le document.querySelectorAll ... jquery comme choisir

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

//usage: $('$myId')

Un autre wrapper:

JS:

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

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

HTML:

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

Ce, dans le cas où vous ne souhaitez pas utiliser le impensable, voir ci-dessus.