GetElementById के लिए जावास्क्रिप्ट शॉर्टहैंड

Question

क्या जावास्क्रिप्ट दस्तावेज़ के लिए कोई आशुलिपि है ।getElementById? या क्या कोई तरीका है जिससे मैं एक को परिभाषित कर सकता हूं? यह दोहरावदार हो जाता है और फिर से खत्म हो जाता है ।

Comments

मैं नहीं जानता कि किसने उन्हें अपमानित किया, लेकिन कोई ऐसा व्यक्ति जो जावास्क्रिप्ट से अपरिचित है कि वह यह नहीं जानता कि इस तरह से शॉर्टकट कैसे बनाए जाते हैं, जब वह इसका उपयोग करने की कोशिश करता है, तो वह समस्या से टकरा सकता है, कह सकता है, jQuery, और पाता है कि $ चर सुसंगत नहीं है। सही उत्तर है, "नहीं, मूल रूप से जावास्क्रिप्ट एक शॉर्टहैंड की पेशकश नहीं करता है, लेकिन कई रूपरेखाएं हैं जो चयन करने में आसान हैं। डीएनएस आसान है।"

— कोजिरो

Answer 1

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

$( 'someID' )

यहां मैंने उपयोग किया है $, लेकिन आप किसी भी मान्य चर नाम का उपयोग कर सकते हैं।

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

byId( 'someID' )

Comments

@patrick dw मुझे वह पसंद है। विशेष रूप से मान्य चर नामों की संपत्ति के साथ :)

— फॉक्स विल्सन

"वैध चर नामों की संपत्ति के साथ" - क्या आपका मतलब है "कम से कम दो प्रमुख जेएस फ्रेमवर्क पहले से ही उपयोग कर रहे हैं $, वह भी चुनने पर बधाई?"

— पिस्कोर ने

इससे कोई फर्क नहीं पड़ता कि $यदि आप उन्हें लोड नहीं करते हैं तो कितने पुस्तकालय उपयोग करते हैं।

— user113716

सिर्फ रिकॉर्ड के लिए, मैं करता था var $ = document.getElementById.bind(document), लेकिन bindसभी ब्राउज़रों में उपलब्ध नहीं है। हालांकि यह तेजी से है, क्योंकि मैं केवल देशी तरीकों का उपयोग कर रहा हूं। बस यही जोड़ना चाहता था।

— pimvdb

@ मूल्य: मैं अज्ञानता को समायोजित करने के लिए कभी भी कोड नहीं करता। अज्ञान टूटे हुए कोड की ओर जाता है। टूटा हुआ कोड अनुसंधान की ओर जाता है। शोध से जानकारी मिलती है। अज्ञान ठीक हो जाता है।

— user113716

Answer 2

एक अतिरिक्त चरित्र को बचाने के लिए आप स्ट्रिंग प्रोटोटाइप को इस तरह से प्रदूषित कर सकते हैं:

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

मैंने लगभग बेतरतीब ढंग से संपत्ति का नाम चुना है। यदि आप वास्तव में इस आशुलिपि का उपयोग करना चाहते हैं, तो मैं सुझाव देना चाहूंगा कि टाइप करना कुछ आसान है।

Comments

- (Y Chinese)

— अनवारेल

आपको लगता है कि यह दक्षता में एक उचित हिट लेता है। प्रोटोटाइप पर परिभाषित गेटटर / सेटर परिमाण धीमे का एक क्रम है।

— रेयानोस

यह भी, कि केवल एक दृश्य चरित्र हो सकता है , लेकिन यह फ़ाइल में एक से अधिक बाइट लेगा ...

— Alnitak

@Alnitak: ओह ठीक है, मैंने ऐसा नहीं सोचा है। इसके अलावा कुछ लोगों (मेरे जैसे) के पास अपने कीबोर्ड पर me कुंजी नहीं है, इसलिए वे इसे कॉपी करने और चिपकाने में बहुत समय बिताएंगे। लेकिन नाम वास्तव में महत्वपूर्ण नहीं है। मूल रूप से मैंने संपत्ति का नाम 'ई' (तत्व की तरह) रखा था, लेकिन मुझे लगा कि इस नाम का दावा कुछ पुस्तकालय पहले ही कर सकते हैं।

— रॉबर्ट

@ रेयानोस: हां, मेरे बेंचमार्क में यह नियमित कार्य के रूप में लगभग तीन गुना धीमा है। 0.4s * 3 = 1.2µs

— रॉबर्ट

Answer 3

आप आसानी से शॉर्टहैंड आसानी से खुद बना सकते हैं:

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

Comments

@ सरफराज क्या इसे एक चर या फ़ंक्शन के रूप में घोषित करना सबसे अच्छा है? क्या इससे भी फर्क पड़ता है?

— user1431627

@ user1431627: यदि वेरिएबल से आपका मतलब फंक्शन एक्सप्रेशन से है तो यह स्कोप के मामले में मायने रखता है। मेरे उत्तर में पोस्ट किया गया फ़ंक्शन इसके निष्पादन संदर्भ में हर जगह उपलब्ध होगा। देखें: stackoverflow.com/questions/1013385/… या kangax.github.io/nfe

— सरफराज

@ सरफराज ओके, धन्यवाद :) jQuery इसे एक चर दायरे में संभालता है, है ना? कारण मैं पूछ रहा हूँ क्योंकि शीर्ष उत्तर एक चर दायरे के साथ लिखा गया था, लेकिन आपने इसे एक नियमित फ़ंक्शन अभिव्यक्ति के रूप में लिखा था।

— user1431627

Answer 4

योगदान करने के लिए एक त्वरित विकल्प:

HTMLDocument.prototype.e = document.getElementById

तो बस करो:

document.e('id');

एक पकड़ है, यह उन ब्राउज़रों में काम नहीं करता है जो आपको प्रोटोटाइप (जैसे IE6) का विस्तार नहीं करने देते हैं।

Comments

@ walle1357: यह लेख आपकी रूचि ले सकता है।

— user113716

@ThiefMaster "कभी मत करो X" सबसे बुरी सलाह है जो आप दे सकते हैं। विकल्पों, पेशेवरों और विपक्षों के बारे में जानें और हर विशेष समस्या के लिए सबसे अच्छा उत्तर चुनें। इस मामले में प्रोटोटाइप का विस्तार करने में कोई बुराई नहीं है (हालांकि मुझे कहना चाहिए कि अन्य उत्तर एक बेहतर फिट हैं, यह केवल पूरा होने के लिए बचा है)

— पाब्लो फर्नांडीज

आप कैसे जानते हैं कि यह कुछ ब्राउज़र में या भविष्य में कुछ भी नहीं टूटेगा?

— ThiefMaster

@PabloFernandez: आप अभी भी होस्ट ऑब्जेक्ट का विस्तार नहीं करना चाहते हैं। यदि कम से कम दो पुस्तकालय पहचान की गई संपत्तियों के साथ एक मेजबान वस्तु का विस्तार करना चाहते हैं तो केवल पहली सावधान पुस्तकालय या अंतिम लापरवाह पुस्तकालय सफल होगा।

— राबर्ट

@Robert यह स्पष्ट रूप से सबसे अच्छा विकल्प नहीं है, लेकिन यह है एक विकल्प। आपको हर एक के पेशेवरों और विपक्षों पर विचार करने की आवश्यकता है। याद रखें कि क्लाइंट साइड जावास्क्रिप्ट लाइब्रेरियों के साथ शुरू हुआ prototype.jsथा, जो बिल्कुल यही काम करता था।

— पाब्लो फर्नांडीज

Answer 5

(न केवल आईडी द्वारा तत्व प्राप्त करने के लिए शॉर्टहैंड, बल्कि कक्षा द्वारा तत्व भी प्राप्त कर रहा है: पी)

मैं कुछ ऐसा उपयोग करता हूं

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।

Comments

आप कस्टम फ़ंक्शन में विधि के document.querySelectorAllएक हिस्से का अनुकरण करने की कोशिश करने के बजाय बेहतर शॉर्टकट बना सकते हैं querySelectorAll।

— रोब डब्ल्यू

Answer 6

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

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

Answer 7

आईडी को बचाया जाता है window ।

एचटीएमएल

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

जे एस

logo.innerHTML;

लेखन के समान है:

document.getElementById( 'logo' ).innerHtml;

मैं पूर्व पद्धति का उपयोग करने का सुझाव नहीं देता क्योंकि यह आम बात नहीं है।

Comments

क्या आप इस बारे में विस्तार से बता सकते हैं कि आप इस पद्धति का उपयोग क्यों नहीं करेंगे?

— ओक्कू

मुझे नहीं लगता कि इसका इस्तेमाल कभी हुआ है क्योंकि मुझे नहीं लगता कि यह शर्त है। लेकिन यह इसे खोजने का सबसे छोटा तरीका है।

— im_benton

@Okku क्योंकि <div id="location"></div>और कॉल करने window.locationसे काम नहीं चलेगा।

— एलेक्स

Answer 8

यहाँ कई अच्छे उत्तर हैं और कई jQuery जैसे सिंटैक्स के आसपास नृत्य कर रहे हैं, लेकिन वास्तव में jQuery का उपयोग करने वाले एक उल्लेख नहीं है। यदि आप इसे आज़माने के खिलाफ नहीं हैं, तो jQuery देखें । यह आप तत्वों को इस तरह से सुपर आसान का चयन करते हैं ..

आईडी द्वारा :

$('#elementId')

CSS क्लास द्वारा :

$('.className')

तत्व प्रकार से :

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

Comments

मैंने jQuery की कोशिश की, लेकिन क्या मुझे वास्तव में एक getElementById आशुलिपि के लिए पूरी लाइब्रेरी की आवश्यकता है?

— फॉक्स विल्सन

अन्य उत्तरों में "jQuery की तरह वाक्य रचना" क्या है ? ज्यादातर वे केवल सादे पुराने कार्य हैं जिन्हें चर द्वारा संदर्भित किया जाता है। इसके बारे में विशिष्ट jQuery की तरह कुछ भी नहीं है। ; o)

— user113716

@patrick dw, ठीक है, आपका उत्तर $ ('someID') jQuery ID चयनकर्ता $ ('# someID') जैसा कुछ नहीं दिखता है :)

— Kon

Answer 9

कोई भी बिल्ट-इन नहीं है।

यदि आप वैश्विक नाम स्थान को प्रदूषित करने से गुरेज नहीं करते, तो क्यों नहीं:

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

EDIT - मैंने फ़ंक्शन नाम को कुछ असामान्य होने के लिए बदल दिया है , लेकिन संक्षिप्त रूप से नहीं तो jQuery के साथ टकरा रहा है या कुछ और जो नंगे $संकेत का उपयोग करता है ।

Answer 10

हाँ, यह एक ही समारोह का उपयोग करने के दोहराव हो जाता है से अधिक और अधिक एक अलग तर्क के साथ हर बार:

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। संभवतः ऐसा करने का एक बेहतर तरीका है।

Answer 11

ठीक है, आप एक आशुलिपि समारोह बना सकते हैं, वही मैं करता हूँ।

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

और फिर जब आप इसे प्राप्त करना चाहते थे, तो आप बस करते हैं

$('yourid')

इसके अलावा, एक और उपयोगी ट्रिक जो मुझे मिली, वह यह है कि यदि आप किसी आइटम आईडी का मान या इनर HTML प्राप्त करना चाहते हैं, तो आप इस तरह से बना सकते हैं:

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

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

उम्मीद है आप इसे पसंद करते हैं!

मैंने वास्तव में इस पूरे विचार के आधार पर एक तरह की मिनी जावास्क्रिप्ट लाइब्रेरी बनाई। यहाँ यह है।

Comments

मैं बस इस सवाल को फिर से देख रहा था, और यह पाया। यदि आप सभी jQuery को शामिल नहीं करना चाहते हैं तो यह एक बहुत साफ-सुथरी लाइब्रेरी है।

— फॉक्स विल्सन

Answer 12

मैं अक्सर उपयोग करता हूं:

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

Answer 13

यदि यह आपकी अपनी साइट पर है, तो jQuery जैसी लाइब्रेरी का उपयोग करने पर विचार करें तो आपको यह और कई अन्य उपयोगी शॉर्टहैंड देने के लिए कि ब्राउज़र के अंतर को भी सार करता है। व्यक्तिगत रूप से, यदि मैंने लंबे समय से परेशान होने के लिए पर्याप्त कोड लिखा है, तो मैं jQuery शामिल करूंगा।

JQuery में, वाक्यविन्यास होगा $("#someid")। यदि आप वास्तविक डोम तत्व चाहते हैं और jQuery आवरण नहीं है, तो यह है $("#someid")[0], लेकिन आप सबसे अधिक संभावना यह कर सकते हैं कि आप jpg आवरण के बाद जो भी हो।

या, यदि आप ब्राउज़र डेवलपर कंसोल में इसका उपयोग कर रहे हैं, तो उनकी अंतर्निहित उपयोगिताओं पर शोध करें। जैसा कि किसी और ने उल्लेख किया है, क्रोम जावास्क्रिप्ट कंसोल में एक $("someid")विधि शामिल है , और आप डेवलपर टूल "तत्वों" दृश्य में एक तत्व पर भी क्लिक कर सकते हैं और फिर इसे $0कंसोल से संदर्भित कर सकते हैं । पहले से चयनित तत्व बन जाता है $1और इसी तरह।

Answer 14

यदि यहां एकमात्र मुद्दा टाइप कर रहा है, तो शायद आपको खुद को एक जावास्क्रिप्ट संपादक से मिलना चाहिए।

यदि उद्देश्य को छोटा कोड प्राप्त करना है, तो आप jQuery की तरह एक जावास्क्रिप्ट पुस्तकालय पर विचार कर सकते हैं, या आप केवल अपना आशुलिपि लिख सकते हैं, जैसे:

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

मैं ऊपर से बेहतर प्रदर्शन के लिए करता था। पिछले साल मैंने जो सीखा वह यह है कि कम्प्रेशन तकनीकों के साथ सर्वर आपके लिए यह स्वचालित रूप से करता है, इसलिए मेरी छोटी तकनीक वास्तव में मेरे कोड को भारी बना रही है। अब मैं पूरे दस्तावेज़ को टाइप करके खुश हूँ ।getElementById

Answer 15

यदि आप एक आशुलिपि समारोह के लिए पूछ रहे हैं ...

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

Answer 16

एरो फ़ंक्शंस कम है।

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

Comments

idतर्क को घेरते हुए कोष्ठकों को हटाकर आप इसे और भी छोटा कर सकते हैं ।

— झबरा

Answer 17

document.querySelectorAll ... जैसे एक jquery को लपेटें

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

// usage: $('$myId')

Comments

ओह, लेकिन इसके साथ काम करना थोड़ा मुश्किल है। फ़ंक्शन या तो अपरिभाषित, एक HTMLElement या एक NodeList लौट सकता है। बेशक जब आप इसका उपयोग इसकी आईडी द्वारा एक तत्व प्राप्त करने के लिए करते हैं $('#myId')तो यह आमतौर पर उस HTMLElement को वापस करना चाहिए, क्योंकि आपने उम्मीद की थी कि उस आईडी को एक बार सौंपा जाएगा। लेकिन अगर आप इसे ऐसे प्रश्नों के साथ प्रयोग करेंगे जो कई तत्वों से मेल खा सकते हैं तो यह बोझिल हो जाता है।

— रॉबर्ट

Answer 18

ठीक है, अगर तत्व की आईडी वैश्विक ऑब्जेक्ट के किसी भी गुण के साथ प्रतिस्पर्धा नहीं करती है, तो आपको किसी फ़ंक्शन का उपयोग करने की आवश्यकता नहीं है।

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

संपादित करें: लेकिन आप इस 'सुविधा' का उपयोग नहीं करना चाहते हैं।

Comments

:( यह मुझे ब्राउज़र के दुरुपयोग की तरह लगता है। मुझे दिखाओ कि यह HTML5 युक्ति में कहां मान्य है।

— रेयनोस

@Raynos: dev.w3.org/html5/spec/… लेकिन: "यह संभव है कि यह बदल जाएगा। ब्राउज़र विक्रेता इस व्यवहार को क्वर्की मोड तक सीमित करने पर विचार कर रहे हैं।" हालांकि मेरे FF4 और IE8 में काम करता है।

— रॉबर्ट

हाँ, यह अभी काम करता है, लेकिन यह गंदा लगता है और अगर साल के अंत तक इसे ख़राब कर दिया जाता है, तो मुझे आश्चर्य नहीं होगा।

— रेयनोस

@ रेयानोस मुझे उम्मीद है। मुझे ग्लोबल नेमस्पेस प्रदूषित करने के लिए ब्राउज़र पसंद नहीं हैं। लेकिन दूसरी ओर जब यह आविष्कार किया गया था तो यह इतनी बुरी बात नहीं थी। (जब वेबपेज html-केंद्रित थे और जावास्क्रिप्ट एक अच्छी सुविधा थी)

— रॉबर्ट

Answer 19

एक और आवरण:

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>

यह, यदि आप अकल्पनीय का उपयोग नहीं करना चाहते हैं , तो ऊपर देखें।

Answer 20

मैंने इसे कल लिखा था और इसे काफी उपयोगी पाया।

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

Comments

यह eval का अच्छा उपयोग नहीं है। उस तत्व को प्राप्त करने के बारे में कुछ भी नहीं है जिसे eval की आवश्यकता है, और आप गतिशील रूप से ब्रैकेट नोटेशन के साथ एक संपत्ति प्राप्त कर सकते हैं। देखें developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...

— ThatsNoMoon