Javascript Kurzform für getElementById

Gibt es eine Abkürzung für das JavaScript document.getElementById? Oder kann ich eine definieren? Es wird sich wiederholende Abtippen , dass über und über .

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

$( 'someID' )

Hier habe ich verwendet $, aber Sie können jeden gültigen Variablennamen verwenden.

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

byId( 'someID' )

Um ein zusätzliches Zeichen zu speichern, können Sie den String-Prototyp folgendermaßen verschmutzen:

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

Es funktioniert in einigen Browsern und Sie können auf folgende Weise auf Elemente zugreifen:

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

Ich habe den Namen der Immobilie fast zufällig gewählt. Wenn Sie diese Kurzform tatsächlich verwenden möchten, würde ich vorschlagen, etwas zu finden, das einfacher zu tippen ist.

Sie können leicht selbst eine Kurzschrift erstellen:

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

Eine schnelle Alternative, um einen Beitrag zu leisten:

HTMLDocument.prototype.e = document.getElementById

Dann machen Sie einfach:

document.e('id');

Es gibt einen Haken, es funktioniert nicht in Browsern, mit denen Sie keine Prototypen erweitern können (z. B. IE6).

(Abkürzung, um nicht nur das Element nach ID abzurufen, sondern auch das Element nach Klasse: P)

Ich benutze so etwas wie

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

Verwendung: _(".test")Gibt alle Elemente mit dem Klassennamen testund _("#blah")ein Element mit der ID zurück blah.

IDs werden im gespeichert window.

HTML

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

JS

logo.innerHTML;

ist das gleiche wie schreiben:

document.getElementById( 'logo' ).innerHtml;

Ich schlage nicht vor, die erstere Methode zu verwenden, da dies nicht üblich ist.

Hier gibt es mehrere gute Antworten und einige tanzen um die jQuery-ähnliche Syntax, aber nicht eine erwähnt tatsächlich die Verwendung von jQuery. Wenn Sie nicht dagegen sind, probieren Sie jQuery aus . So können Sie ganz einfach Elemente auswählen.

Nach ID :

$('#elementId')

Nach CSS-Klasse :

$('.className')

Nach Elementtyp :

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

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

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

Es ist keine eingebaut.

Wenn es Ihnen nichts ausmacht, den globalen Namespace zu verschmutzen, warum nicht:

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

BEARBEITEN - Ich habe den Funktionsnamen in etwas Ungewöhnliches geändert , aber kurz und nicht in Konflikt mit jQuery oder etwas anderem, das ein nacktes $Zeichen verwendet.

Ja, es wird wiederholend die gleiche Funktion zu verwenden , über und über jedes Mal mit einem anderen Argumente:

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

Eine schöne Sache wäre also eine Funktion, die alle diese Argumente gleichzeitig akzeptiert:

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

Dann hätten Sie Verweise auf alle Ihre Elemente in einem Objekt gespeichert:

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

Aber Sie müssten immer noch alle diese IDs auflisten.

Sie können es noch weiter vereinfachen, wenn Sie alle Elemente mit IDs möchten :

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

Es wäre jedoch ziemlich teuer, diese Funktion aufzurufen, wenn Sie viele Elemente haben.

Wenn Sie also theoretisch das withSchlüsselwort verwenden würden, könnten Sie Code wie folgt schreiben:

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

Aber ich möchte die Verwendung von nicht fördern with. Wahrscheinlich gibt es einen besseren Weg, dies zu tun.

Nun, Sie könnten eine Kurzfunktion erstellen, das ist was ich tue.

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

und dann, wenn Sie es bekommen wollten, tun Sie es einfach

$('yourid')

Ein weiterer nützlicher Trick, den ich gefunden habe, ist, dass Sie Funktionen wie die folgenden ausführen können, wenn Sie den Wert oder das innerHTML einer Element-ID abrufen möchten:

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

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

Hoffe du magst es!

Ich habe tatsächlich eine Art Mini-Javascript-Bibliothek erstellt, die auf dieser ganzen Idee basiert. Hier ist es.

Ich benutze häufig:

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


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

Ich denke, es ist besser als eine externe Funktion (zB $()oder byId()), weil Sie solche Dinge tun können:

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

Übrigens, verwenden Sie jQuery nicht dafür, jQuery ist viel, viel langsamer als document.getElementById()eine externe Funktion wie $()oder byId()oder meine Methode: http://jsperf.com/document-getelementbyid-vs-jquery/5

Wenn sich dies auf Ihrer eigenen Site befindet, sollten Sie eine Bibliothek wie jQuery verwenden , um diese und viele andere nützliche Abkürzungen zu erhalten, die auch Browserunterschiede beseitigen. Persönlich würde ich jQuery einschließen, wenn ich genug Code schreiben würde, um von der Langschrift gestört zu werden.

In jQuery wäre die Syntax $("#someid"). Wenn Sie dann das eigentliche DOM-Element und nicht den jQuery-Wrapper möchten, ist dies der Fall $("#someid")[0], aber Sie können höchstwahrscheinlich mit dem jQuery-Wrapper alles tun, was Sie suchen.

Wenn Sie dies in einer Browser-Entwicklerkonsole verwenden, informieren Sie sich über die integrierten Dienstprogramme. Wie bereits erwähnt, enthält die Chrome JavaScript-Konsole eine $("someid")Methode. Sie können auch in der Ansicht "Elemente" der Entwicklertools auf ein Element klicken und es dann $0über die Konsole referenzieren . Das zuvor ausgewählte Element wird $1und so weiter.

Wenn das einzige Problem hier das Tippen ist, sollten Sie sich vielleicht einfach einen JavaScript-Editor mit Intellisense zulegen.

Wenn der Zweck darin besteht, kürzeren Code zu erhalten, können Sie eine JavaScript-Bibliothek wie jQuery in Betracht ziehen oder einfach Ihre eigenen Kurzfunktionen schreiben, z.

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

Ich habe das oben genannte getan, um eine bessere Leistung zu erzielen. Was ich letztes Jahr gelernt habe, ist, dass der Server es mit Komprimierungstechniken automatisch für Sie erledigt, sodass meine Verkürzungstechnik meinen Code tatsächlich schwerer machte. Jetzt bin ich nur noch glücklich mit der Eingabe des gesamten document.getElementById.

Wenn Sie nach einer Kurzfunktion fragen ...

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

oder

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

Pfeilfunktionen machen ist kürzer.

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

Wrap the document.querySelectorAll ... eine Abfrage wie select

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

// usage: $('$myId')

Wenn die ID des Elements nicht mit den Eigenschaften des globalen Objekts konkurriert, müssen Sie keine Funktion verwenden.

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

edit: Aber du willst diese 'Funktion' nicht nutzen.

Ein weiterer 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>

Dies, falls Sie das Undenkbare nicht verwenden möchten , siehe oben.

Ich habe das gestern geschrieben und fand es ziemlich nützlich.

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

So verwenden Sie es.

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