Javascript Shorthand สำหรับ getElementById

มีชวเลขสำหรับ JavaScript document.getElementById หรือไม่ หรือมีวิธีใดที่ฉันสามารถกำหนดได้? จะได้รับการพิมพ์ดีดครั้งใหม่ซ้ำ ๆ ว่ากว่าและมากกว่า

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

$( 'someID' )

ที่นี่ฉันใช้$แต่คุณสามารถใช้ชื่อตัวแปรที่ถูกต้องได้

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

byId( 'someID' )

หากต้องการบันทึกอักขระพิเศษคุณสามารถสร้างมลพิษให้กับต้นแบบ String ได้ดังนี้:

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

ใช้งานได้ในบางเบราว์เซอร์และคุณสามารถเข้าถึงองค์ประกอบด้วยวิธีนี้:

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

ฉันเลือกชื่อของสถานที่ให้บริการเกือบจะสุ่ม หากคุณต้องการใช้ชวเลขนี้จริงฉันขอแนะนำให้พิมพ์สิ่งที่ง่ายกว่า

คุณสามารถสร้างชวเลขได้ง่ายๆด้วยตัวคุณเอง:

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

ทางเลือกที่รวดเร็วในการมีส่วนร่วม:

HTMLDocument.prototype.e = document.getElementById

จากนั้นทำ:

document.e('id');

มีสิ่งที่จับได้ไม่ทำงานในเบราว์เซอร์ที่ไม่อนุญาตให้คุณขยายต้นแบบ (เช่น IE6)

รหัสจะถูกบันทึกลงในไฟล์window.

HTML

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

JS

logo.innerHTML;

เหมือนกับการเขียน:

document.getElementById( 'logo' ).innerHtml;

ฉันไม่แนะนำให้ใช้วิธีการเดิมเพราะไม่ใช่วิธีปฏิบัติทั่วไป

(ชวเลขไม่เพียง แต่รับองค์ประกอบด้วย ID แต่ยังได้รับองค์ประกอบตามคลาสด้วย: P)

ฉันใช้บางอย่างเช่น

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

การใช้งาน: _(".test")ส่งกลับองค์ประกอบทั้งหมดที่มีชื่อชั้นtestและผลตอบแทนที่องค์ประกอบที่มีรหัส_("#blah")blah

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

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

มีคำตอบที่ดีหลายประการที่นี่และหลายคำตอบเกี่ยวกับไวยากรณ์ที่เหมือน jQuery แต่ไม่มีใครพูดถึงการใช้ jQuery จริงๆ หากคุณไม่ได้กับการพยายามตรวจสอบjQuery ให้คุณเลือกองค์ประกอบที่ง่ายสุด ๆ เช่นนี้ ..

โดย ID :

$('#elementId')

ตามคลาส CSS :

$('.className')

ตามประเภทองค์ประกอบ :

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

ไม่มีในตัว

หากคุณไม่รังเกียจที่จะสร้างมลพิษให้กับเนมสเปซทั่วโลกทำไมไม่:

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

แก้ไข - ฉันเปลี่ยนชื่อฟังก์ชั่นเป็นสิ่งที่ผิดปกติแต่สั้นและไม่ปะทะกับ jQuery หรือสิ่งอื่นใดที่ใช้$เครื่องหมายเปล่า

ใช่การใช้ฟังก์ชันเดียวกันซ้ำแล้วซ้ำอีกในแต่ละครั้งด้วยอาร์กิวเมนต์ที่แตกต่างกัน:

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

สิ่งที่ดีคือฟังก์ชันที่รับข้อโต้แย้งเหล่านั้นทั้งหมดในเวลาเดียวกัน:

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

จากนั้นคุณจะมีการอ้างอิงถึงองค์ประกอบทั้งหมดของคุณที่เก็บไว้ในวัตถุเดียว:

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

แต่คุณยังคงต้องแสดงรายการรหัสเหล่านั้นทั้งหมด

คุณสามารถลดความซับซ้อนได้มากขึ้นหากคุณต้องการองค์ประกอบทั้งหมดที่มีรหัส:

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

แต่การเรียกใช้ฟังก์ชันนี้จะค่อนข้างแพงหากคุณมีองค์ประกอบหลายอย่าง

ดังนั้นในทางทฤษฎีหากคุณจะใช้withคำหลักคุณสามารถเขียนโค้ดได้ดังนี้:

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

แต่ฉันไม่ต้องการส่งเสริมการใช้with. อาจมีวิธีที่ดีกว่านี้

คุณสร้างฟังก์ชันชวเลขได้นั่นคือสิ่งที่ฉันทำ

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

แล้วเมื่อคุณต้องการได้รับคุณก็ทำ

$('yourid')

นอกจากนี้เคล็ดลับที่มีประโยชน์อีกอย่างหนึ่งที่ฉันพบก็คือหากคุณต้องการรับค่าหรือ innerHTML ของ ID รายการคุณสามารถสร้างฟังก์ชันดังนี้:

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

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

หวังว่าคุณจะชอบมัน!

จริงๆแล้วฉันได้สร้างไลบรารีจาวาสคริปต์ขนาดเล็กขึ้นมาจากแนวคิดทั้งหมดนี้ นี่คือ.

ฉันมักใช้:

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


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

ฉันคิดว่ามันดีกว่าฟังก์ชั่นภายนอก (เช่น$()หรือbyId()) เพราะคุณสามารถทำสิ่งนี้ได้:

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

Btw อย่าใช้ jQuery สำหรับสิ่งนี้ jQuery ช้ากว่าdocument.getElementById()มากฟังก์ชั่นภายนอกเช่น$()หรือbyId()หรือวิธีการของฉัน: http://jsperf.com/document-getelementbyid-vs-jquery/5

หากสิ่งนี้อยู่ในไซต์ของคุณเองให้พิจารณาใช้ไลบรารีเช่นjQueryเพื่อให้สิ่งนี้แก่คุณและคำสั่งสั้น ๆ ที่เป็นประโยชน์อื่น ๆ อีกมากมายที่ยังแยกความแตกต่างของเบราว์เซอร์ โดยส่วนตัวแล้วถ้าฉันเขียนโค้ดมากพอที่จะรบกวนผู้ใช้ระยะยาวฉันจะรวม jQuery

ใน jQuery $("#someid")ไวยากรณ์จะเป็น หากคุณต้องการองค์ประกอบ DOM จริงไม่ใช่สิ่งที่ห่อหุ้ม jQuery $("#someid")[0]แต่คุณมักจะทำสิ่งที่คุณต้องการด้วยกระดาษห่อ jQuery

หรือหากคุณกำลังใช้สิ่งนี้ในคอนโซลนักพัฒนาซอฟต์แวร์เบราว์เซอร์ให้ศึกษายูทิลิตี้ในตัว ดังที่ใครบางคนกล่าวถึงคอนโซล Chrome JavaScript มี$("someid")วิธีการและคุณยังสามารถคลิกองค์ประกอบในมุมมอง "องค์ประกอบ" ของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์แล้วอ้างอิง$0จากคอนโซล องค์ประกอบที่เลือกไว้ก่อนหน้านี้จะเปลี่ยน$1ไปเรื่อย ๆ

หากปัญหาเดียวที่นี่คือการพิมพ์บางทีคุณควรจะได้รับตัวแก้ไข JavaScript ด้วย Intellisense

หากมีจุดประสงค์เพื่อรับโค้ดที่สั้นกว่าคุณอาจพิจารณาไลบรารี JavaScript เช่น jQuery หรือคุณสามารถเขียนฟังก์ชันชวเลขของคุณเองเช่น:

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

ฉันเคยทำข้างต้นเพื่อประสิทธิภาพที่ดีขึ้น สิ่งที่ฉันได้เรียนรู้เมื่อปีที่แล้วก็คือด้วยเทคนิคการบีบอัดเซิร์ฟเวอร์จะทำงานให้คุณโดยอัตโนมัติดังนั้นเทคนิคการย่อของฉันจึงทำให้โค้ดของฉันหนักขึ้น ตอนนี้ฉันมีความสุขกับการพิมพ์เอกสารทั้งหมด getElementById

หากคุณกำลังขอฟังก์ชั่นชวเลข ...

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

หรือ

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

ฟังก์ชั่นลูกศรทำให้สั้นลง

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

ห่อ document.querySelectorAll ... a jquery เช่น select

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

// usage: $('$myId')

ถ้า id ขององค์ประกอบไม่แข่งขันกับคุณสมบัติใด ๆ ของ global object คุณก็ไม่ต้องใช้ฟังก์ชันใด ๆ

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

แก้ไข: แต่คุณไม่ต้องการใช้ประโยชน์จาก "คุณลักษณะ" นี้

กระดาษห่ออื่น:

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>

ในกรณีที่คุณไม่ต้องการใช้สิ่งที่คิดไม่ถึงโปรดดูด้านบน

คุณสามารถใช้ฟังก์ชัน Wrapper เช่น:

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

หรือ

กำหนดให้document.getElementById กับตัวแปรโดยผูกกับdocumentวัตถุ

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

หมายเหตุ: ในแนวทางที่สองถ้าคุณไม่ได้ผูกdocument.getElementByIdกับdocumentคุณจะได้รับข้อผิดพลาด:

Uncaught TypeError: Illegal invocation

สิ่งที่Function.bindไม่สามารถจะสร้างฟังก์ชั่นใหม่ที่มีชุดคำหลักเพื่อความคุ้มค่าที่คุณให้เป็นอาร์กิวเมนต์thisFunction.bind

อ่านเอกสารสำหรับFunction.bind

ฉันเขียนเมื่อวานนี้และพบว่ามีประโยชน์มาก

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

นี่คือวิธีที่คุณใช้

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