interview - javascript javascript eval atob(' dmf glx



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

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

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

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 साथ एक तत्व देता है।

जावास्क्रिप्ट दस्तावेज़ के लिए कोई शॉर्टेंड है .getElementById? या क्या कोई तरीका है जिसे मैं परिभाषित कर सकता हूं? यह दोबारा दोबारा दोहराया जाता है।


Answer #1

document.querySelectorAll ... को चुनने की तरह एक jquery लपेटें

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

// usage: $('$myId')

Answer #2

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

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

Answer #3

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

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

मैंने संपत्ति का नाम लगभग यादृच्छिक रूप से चुना है। यदि आप वास्तव में इस शॉर्टेंड का उपयोग करना चाहते हैं तो मैं टाइप करने के लिए आसान कुछ के साथ आने का सुझाव दूंगा।


Answer #4

खैर, आप एक शॉर्टेंड फ़ंक्शन बना सकते हैं, यही वह है जो मैं करता हूं।

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

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

$('yourid')

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

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

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

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

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


Answer #5

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

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

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


Answer #6

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

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]


बीटीडब्ल्यू, इसके लिए jQuery का उपयोग न करें, jQuery बहुत अधिक है, document.getElementById() , $() या byId() , या मेरी विधि जैसे बाहरी फ़ंक्शन: http://jsperf.com/document-getelementbyid-vs-jquery/5


Answer #7

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

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

Answer #8

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

JQuery में, वाक्यविन्यास $("#someid") । यदि आप वास्तविक डीओएम तत्व चाहते हैं और jQuery रैपर नहीं, तो यह $("#someid")[0] , लेकिन आप जो कुछ भी कर रहे हैं वह jQuery $("#someid")[0] हो सकता है।

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


Answer #9

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

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

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

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


Answer #10

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

HTMLDocument.prototype.e = document.getElementById

फिर बस करें:

document.e('id');

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


Answer #11

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

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

लेकिन आपको अभी भी उन सभी आईडी को सूचीबद्ध करना होगा।

यदि आप ids के साथ सभी तत्व चाहते हैं तो आप इसे और भी सरल बना सकते हैं:

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

लेकिन मैं इसके उपयोग को बढ़ावा देना नहीं चाहता हूं। शायद इसे करने का एक बेहतर तरीका है।


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

$( 'someID' )

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

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

byId( 'someID' )




javascript