GetElementById için Javascript Shorthand

JavaScript document.getElementById için herhangi bir kısaltma var mı? Yoksa birini tanımlayabilmemin bir yolu var mı? O tekrarlayan tekrar yazmanızı alır üzerinde ve aşırı .

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

$( 'someID' )

Burada kullandım $, ancak geçerli herhangi bir değişken adını kullanabilirsiniz.

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

byId( 'someID' )

Fazladan bir karakter kaydetmek için String prototipini şu şekilde kirletebilirsiniz:

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

Bazı tarayıcılarda çalışır ve öğelere şu şekilde erişebilirsiniz:

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

Mülkün adını neredeyse rastgele seçtim. Bu kısaltmayı gerçekten kullanmak istiyorsanız, yazması daha kolay bir şey bulmanızı öneririm.

Kendiniz kolayca steno oluşturabilirsiniz:

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

Katkıda bulunmak için hızlı bir alternatif:

HTMLDocument.prototype.e = document.getElementById

O zaman yap:

document.e('id');

Bir yakalama var, prototipleri genişletmenize izin vermeyen tarayıcılarda çalışmıyor (örneğin IE6).

(Yalnızca kimliğe göre öğe almak için değil, aynı zamanda sınıfa göre öğe almak için de kısaltma: P)

Gibi bir şey kullanıyorum

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

Kullanımı: _(".test")sınıf adıyla tüm unsurları döndürür testve _("#blah")kimliğine sahip bir öğe döndürür blah.

id'ler window.

HTML

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

JS

logo.innerHTML;

yazmakla aynıdır:

document.getElementById( 'logo' ).innerHtml;

Yaygın bir uygulama olmadığı için eski yöntemi kullanmanızı önermiyorum.

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

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

Burada birkaç iyi cevap var ve birkaçı jQuery benzeri sözdizimi etrafında dans ediyor, ancak gerçekte jQuery kullananlardan bahsedilmiyor. Denemeye karşı değilseniz, jQuery'ye bakın . Bunun gibi süper kolay öğeler seçmenize izin verir ..

Kimliğe göre :

$('#elementId')

CSS sınıfına göre :

$('.className')

Öğe türüne göre :

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

Yerleşik hiçbiri yok.

Küresel ad alanını kirletmeyi düşünmüyorsanız, neden olmasın:

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

DÜZENLE - İşlev adını alışılmadık bir şey olacak şekilde değiştirdim , ancak kısa ve başka şekilde jQuery veya çıplak $işaret kullanan herhangi bir şeyle çakışmayacak .

Evet, aynı işlevi kullanmak tekrarlayan alır üzerinde ve üzerinde farklı bir argüman her zaman:

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

Bu nedenle, tüm bu argümanları aynı anda alan bir işlev güzel bir şey olabilir:

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

Ardından, tek bir nesnede depolanan tüm öğelerinize referanslarınız olur:

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

Ama yine de tüm bu kimlikleri listelemeniz gerekir.

Kimlikleri olan tüm öğeleri istiyorsanız bunu daha da basitleştirebilirsiniz :

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

Ancak birçok öğeniz varsa, bu işlevi çağırmak oldukça pahalı olacaktır.

Yani teorik olarak, withanahtar kelimeyi kullanırsanız şu şekilde kod yazabilirsiniz:

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

Ama kullanımını teşvik etmek istemiyorum with. Muhtemelen bunu yapmanın daha iyi bir yolu vardır.

Bir steno işlevi yaratabilirsiniz, ben de öyle yapıyorum.

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

ve sonra onu almak istediğinde, sadece yaparsın

$('yourid')

Ayrıca, bulduğum başka bir kullanışlı numara da, bir öğe kimliğinin değerini veya innerHTML'sini almak istiyorsanız, aşağıdaki gibi işlevler yapabilmenizdir:

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

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

Umarım beğenirsin!

Aslında tüm bu fikirden yola çıkarak bir tür mini javascript kitaplığı yaptım. İşte burada .

Sık kullanıyorum:

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


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

Bunun harici bir işlevden daha iyi olduğunu düşünüyorum (örneğin $()veya byId()), çünkü aşağıdaki gibi şeyler yapabilirsiniz:

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

Btw, bunun için jQuery kullanmayın, jQuery çok daha yavaştır daha document.getElementById()gibi harici bir fonksiyon $()ya byId(), ya da benim yöntemi: http://jsperf.com/document-getelementbyid-vs-jquery/5

Bu kendi sitenizdeyse, size bunu ve tarayıcı farklılıklarını ortadan kaldıran diğer birçok yararlı kısayolu vermek için jQuery gibi bir kitaplık kullanmayı düşünün . Şahsen, elimden rahatsız olacak kadar kod yazarsam, jQuery'yi eklerdim.

JQuery'de sözdizimi olacaktır $("#someid"). Daha sonra jQuery sarmalayıcısını değil de gerçek DOM öğesini istiyorsanız, bu $("#someid")[0], ancak büyük olasılıkla jQuery sarmalayıcısıyla peşinde olduğunuz her şeyi yapabilirsiniz.

Veya bunu bir tarayıcı geliştirici konsolunda kullanıyorsanız, yerleşik yardımcı programlarını araştırın. Başka birinin bahsettiği gibi, Chrome JavaScript konsolu bir $("someid")yöntem içerir ve ayrıca geliştirici araçları "Öğeler" görünümündeki bir öğeyi tıklayabilir ve ardından $0konsoldan ona başvurabilirsiniz . Önceden seçilen eleman olur $1ve böyle devam eder.

Buradaki tek sorun yazmaksa, belki de kendinize intellisense ile bir JavaScript editörü almalısınız.

Amaç daha kısa kod almaksa, jQuery gibi bir JavaScript kitaplığı düşünebilir veya kendi kısayol işlevlerinizi yazabilirsiniz, örneğin:

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

Daha iyi performans için yukarıdakileri yapardım. Geçen yıl öğrendiğim şey, sıkıştırma teknikleriyle sunucunun bunu sizin için otomatik olarak yaptığıydı, bu nedenle kısaltma tekniğim aslında kodumu ağırlaştırıyordu. Şimdi tüm document.getElementById dosyasını yazmaktan memnunum.

Bir steno işlevi istiyorsan ...

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

veya

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

Ok işlevleri daha kısadır.

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

document.querySelectorAll ... select gibi bir jquery sarın

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

// usage: $('$myId')

Peki, elemanın kimliği global nesnenin herhangi bir özelliğiyle rekabet etmiyorsa, herhangi bir işlev kullanmanız gerekmez.

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

düzenleme: Ama yok bu 'özelliğinin faydalanmak istiyoruz.

Başka bir paketleyici:

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>

Bu, düşünülemez olanı kullanmak istemiyorsanız yukarıya bakın.

Şunun gibi bir sarmalayıcı işlevi kullanabilirsiniz:

const byId = (id) => document.getElementById(id);

Veya

Nesne document.getElementById ile bağlayarak bir değişkene atayın document.

const byId = document.getElementById.bind(document);

Not: İkinci yaklaşımda, eğer bağlanmazsanız document.getElementById, documenthata alırsınız:

Uncaught TypeError: Illegal invocation

Yaptığı Function.bindşey, thisanahtar kelimesi değere ayarlanmış, argüman olarak sağladığınız yeni bir işlev yaratmasıdır Function.bind.

Function.bind için belgeleri okuyun

Bunu dün yazdım ve oldukça faydalı buldum.

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

Bunu nasıl kullanıyorsun.

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