Singkatan Javascript untuk getElementById

Apakah ada singkatan untuk JavaScript document.getElementById? Atau adakah cara saya bisa mendefinisikannya? Ia mendapat mengetik ulang berulang-ulang yang lebih dan lebih .

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

$( 'someID' )

Di sini saya menggunakan $, tetapi Anda dapat menggunakan nama variabel yang valid.

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

byId( 'someID' )

Untuk menyimpan karakter tambahan Anda dapat mencemari prototipe String seperti ini:

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

Ini berfungsi di beberapa browser dan Anda dapat mengakses elemen dengan cara ini:

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

Saya telah memilih nama properti hampir secara acak. Jika Anda benar-benar ingin menggunakan singkatan ini, saya sarankan untuk membuat sesuatu yang lebih mudah untuk diketik.

Anda dapat dengan mudah membuat singkatan sendiri dengan mudah:

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

Alternatif cepat untuk berkontribusi:

HTMLDocument.prototype.e = document.getElementById

Kemudian lakukan saja:

document.e('id');

Ada tangkapan, itu tidak berfungsi di browser yang tidak memungkinkan Anda memperluas prototipe (misalnya IE6).

(Singkatan tidak hanya mendapatkan elemen berdasarkan ID, tetapi juga mendapatkan elemen berdasarkan kelas: P)

Saya menggunakan sesuatu seperti

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

Penggunaan: _(".test")mengembalikan semua elemen dengan nama kelas test, dan _("#blah")mengembalikan elemen dengan id blah.

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

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

id disimpan ke window.

HTML

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

JS

logo.innerHTML;

sama dengan menulis:

document.getElementById( 'logo' ).innerHtml;

Saya tidak menyarankan menggunakan metode sebelumnya karena ini bukan praktik umum.

Ada beberapa jawaban bagus di sini dan beberapa menari di sekitar sintaks seperti jQuery, tetapi tidak ada yang menyebutkan benar-benar menggunakan jQuery. Jika Anda tidak menentang mencobanya, lihat jQuery . Ini memungkinkan Anda memilih elemen super mudah seperti ini ..

Menurut ID :

$('#elementId')

Menurut kelas CSS :

$('.className')

Menurut jenis elemen :

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

Tidak ada yang terintegrasi.

Jika Anda tidak keberatan mencemari namespace global, mengapa tidak:

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

EDIT - Saya mengubah nama fungsi menjadi sesuatu yang tidak biasa , tetapi pendek dan tidak bentrok dengan jQuery atau apa pun yang menggunakan $tanda kosong .

Ya, itu akan berulang-ulang untuk menggunakan fungsi yang sama lebih dan lebih setiap kali dengan argumen yang berbeda:

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

Jadi, hal yang menyenangkan adalah fungsi yang mengambil semua argumen tersebut pada saat yang bersamaan:

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

Maka Anda akan memiliki referensi ke semua elemen Anda yang disimpan dalam satu objek:

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

Tapi Anda masih harus mencantumkan semua id itu.

Anda dapat lebih menyederhanakannya jika Anda menginginkan semua elemen dengan 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;
}

Tetapi akan sangat mahal untuk memanggil fungsi ini jika Anda memiliki banyak elemen.

Jadi, secara teoritis, jika Anda akan menggunakan withkata kunci tersebut, Anda dapat menulis kode seperti ini:

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

Tapi saya tidak ingin mempromosikan penggunaan with. Mungkin ada cara yang lebih baik untuk melakukannya.

Nah, Anda bisa membuat fungsi singkatan, itulah yang saya lakukan.

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

dan kemudian ketika Anda ingin mendapatkannya, lakukan saja

$('yourid')

Juga, trik berguna lainnya yang saya temukan, adalah jika Anda ingin mendapatkan nilai atau innerHTML dari ID item, Anda dapat membuat fungsi seperti ini:

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

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

Harap Anda menyukainya!

Saya sebenarnya membuat semacam pustaka javascript mini berdasarkan seluruh ide ini. Ini dia.

Saya sering menggunakan:

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


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

Saya pikir ini lebih baik daripada fungsi eksternal (misalnya $()atau byId()) karena Anda dapat melakukan hal-hal seperti ini:

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

Btw, jangan gunakan jQuery untuk ini, jQuery jauh lebih lambat daripada document.getElementById(), fungsi eksternal seperti $()or byId(), atau metode saya: http://jsperf.com/document-getelementbyid-vs-jquery/5

Jika ini ada di situs Anda sendiri, pertimbangkan untuk menggunakan pustaka seperti jQuery untuk memberi Anda ini dan banyak singkatan berguna lainnya yang juga mengabstraksi perbedaan browser. Secara pribadi, jika saya menulis cukup banyak kode untuk diganggu dengan cara lama, saya akan menyertakan jQuery.

Di jQuery, sintaksnya adalah $("#someid"). Jika Anda kemudian menginginkan elemen DOM yang sebenarnya dan bukan pembungkus jQuery, itu $("#someid")[0], tetapi Anda kemungkinan besar dapat melakukan apa pun yang Anda cari dengan pembungkus jQuery.

Atau, jika Anda menggunakan ini di konsol pengembang browser, teliti utilitas bawaan mereka. Seperti yang disebutkan orang lain, konsol JavaScript Chrome menyertakan sebuah $("someid")metode, dan Anda juga dapat mengeklik elemen di tampilan "Elemen" alat pengembang lalu mereferensikannya $0dari konsol. Elemen yang dipilih sebelumnya menjadi $1dan seterusnya.

Jika satu-satunya masalah di sini adalah mengetik, mungkin Anda harus mendapatkan editor JavaScript dengan intellisense sendiri.

Jika tujuannya adalah untuk mendapatkan kode yang lebih pendek, Anda dapat mempertimbangkan pustaka JavaScript seperti jQuery, atau Anda dapat menulis fungsi singkat Anda sendiri, seperti:

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

Saya biasa melakukan hal di atas untuk kinerja yang lebih baik. Apa yang saya pelajari tahun lalu adalah bahwa dengan teknik kompresi server melakukannya secara otomatis untuk Anda, jadi teknik pemendekan saya sebenarnya membuat kode saya lebih berat. Sekarang saya senang mengetik seluruh document.getElementById.

Jika Anda meminta fungsi singkatan ...

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

atau

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

Fungsi panah membuat lebih pendek.

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

bungkus document.querySelectorAll ... jquery seperti pilih

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

// usage: $('$myId')

Nah, jika id elemen tidak bersaing dengan properti apa pun dari objek global, Anda tidak perlu menggunakan fungsi apa pun.

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

edit: Tapi Anda tidak ingin menggunakan 'fitur' ini.

Pembungkus lain:

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>

Ini, jika Anda tidak ingin menggunakan yang tidak terpikirkan , lihat di atas.

Saya menulis ini kemarin dan merasa cukup berguna.

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

Beginilah cara Anda menggunakannya.

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