এলিমেন্টবিআইডির জন্য জাভাস্ক্রিপ্ট শর্টহ্যান্ড

Question 1

জাভাস্ক্রিপ্ট ডকুমেন্টের জন্য কোনও শর্টহ্যান্ড আছে? বা আমি কোন একটি উপায় সংজ্ঞায়িত করতে পারেন? এটা যে পুনরাবৃত্তিমূলক পুনরায় টাইপ পায় উপর এবং উপর ।

Question 2

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

$( 'someID' )

এখানে আমি ব্যবহার করেছি $তবে আপনি যে কোনও বৈধ পরিবর্তনশীল নাম ব্যবহার করতে পারেন।

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

byId( 'someID' )

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

আমি প্রায় এলোমেলোভাবে সম্পত্তিটির নামটি বেছে নিয়েছি। আপনি যদি এই শর্টহ্যান্ডটি ব্যবহার করতে চান তবে আমি টাইপ করার সহজ কিছু নিয়ে আসার পরামর্শ দেব।

Question 4

আপনি সহজেই নিজেকে সহজেই শর্টহ্যান্ড তৈরি করতে পারেন:

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

Question 5

অবদানের জন্য একটি দ্রুত বিকল্প:

HTMLDocument.prototype.e = document.getElementById

তারপরে কেবল করুন:

document.e('id');

একটি ধরা আছে, এটি ব্রাউজারগুলিতে কাজ করে না যা আপনাকে প্রোটোটাইপগুলি প্রসারিত করতে দেয় না (উদাঃ আই 6)।

Question 6

(শর্টহ্যান্ড কেবল আইডির মাধ্যমে উপাদান পাওয়ার জন্য নয়, শ্রেণী অনুসারে উপাদান পাওয়ার জন্য: পি)

আমি এরকম কিছু ব্যবহার করি

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।

Question 7

আইডি এর সংরক্ষণ করা হয় window।

এইচটিএমএল

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

জেএস

logo.innerHTML;

লেখার মতোই:

document.getElementById( 'logo' ).innerHtml;

আমি পূর্বের পদ্ধতিটি ব্যবহার করার পরামর্শ দিচ্ছি না কারণ এটি সাধারণ অনুশীলন নয়।

Question 8

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

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

Question 9

এখানে বেশ কয়েকটি ভাল উত্তর রয়েছে এবং বেশ কয়েকটি jQuery- এর মতো সিনট্যাক্সের চারপাশে নাচছে, তবে একটিতে আসলে jQuery ব্যবহারের কথা উল্লেখ করা হয়নি। আপনি যদি এটি চেষ্টা করার বিরোধী না হন তবে jQuery দেখুন । আসুন আপনি এর মত দুর্দান্ত সহজ উপাদান নির্বাচন করুন ..

আইডি দ্বারা :

$('#elementId')

সিএসএস ক্লাস দ্বারা :

$('.className')

উপাদান টাইপ অনুসারে :

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

Question 10

অন্তর্নির্মিত কেউ নেই।

আপনি যদি বিশ্বব্যাপী নেমস্পেসকে দূষিত করতে আপত্তি করেন না তবে কেন:

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

সম্পাদনা করুন - আমি ফাংশনটির নামটি কিছু অসাধারণ বলে পরিবর্তন করেছি , তবে সংক্ষিপ্ত এবং অন্যথায় jQuery বা খালি $চিহ্ন ব্যবহার করে এমন কোনও কিছুর সাথে সংঘর্ষ নয় ।

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

তবে আপনাকে এখনও সেই সমস্ত আইডির তালিকা তৈরি করতে হবে।

আপনি আইডিসহ সমস্ত উপাদান চাইলে আপনি এটিকে আরও সরল করতে পারেন :

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। সম্ভবত এটি করার আরও ভাল উপায় আছে।

Question 12

ঠিক আছে, আপনি একটি শর্টহ্যান্ড ফাংশন তৈরি করতে পারেন, আমি এটি করি।

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

এবং তারপরে আপনি যখন এটি পেতে চেয়েছিলেন, আপনি ঠিক করেন

$('yourid')

এছাড়াও, আর একটি দরকারী কৌশল যা আমি পেয়েছি তা হ'ল আপনি যদি কোনও আইটেম আইডির মান বা অভ্যন্তরীণ এইচটিএমএল পেতে চান তবে আপনি এই জাতীয় ফাংশন তৈরি করতে পারেন:

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

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

আশা করি এটা আপনার ভালো লেগেছে!

আমি আসলে এই পুরো ধারণার উপর ভিত্তি করে এক ধরণের মিনি জাভাস্ক্রিপ্ট লাইব্রেরি তৈরি করেছি। এখানে এটা।

Question 13

আমি প্রায়শই ব্যবহার করি:

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

Question 14

এটি যদি আপনার নিজের সাইটে থাকে তবে আপনাকে এই এবং আরও অনেক দরকারী শর্টহ্যান্ডগুলি দেওয়ার জন্য jQuery এর মতো লাইব্রেরি ব্যবহার করে বিবেচনা করুন যা ব্রাউজারের পার্থক্যগুলিও বিমূর্ত করে দেয়। ব্যক্তিগতভাবে, যদি আমি লম্বা হ্যান্ড দ্বারা বিরক্ত করার জন্য যথেষ্ট কোড লিখি তবে আমি jQuery অন্তর্ভুক্ত করব।

JQuery এ বাক্য গঠনটি হবে $("#someid")। আপনি যদি জিকুয়ারি র‌্যাপার না হয়ে প্রকৃত ডিওএম উপাদানটি চান তবে এটি $("#someid")[0]সম্ভবত আপনি jQuery মোড়কের পরে যা কিছু করতে পারেন।

বা আপনি যদি এটি ব্রাউজার বিকাশকারী কনসোলটিতে ব্যবহার করেন তবে তাদের বিল্ট-ইন ইউটিলিটিগুলি অনুসন্ধান করুন। অন্য কারও হিসাবে উল্লেখ করা হয়েছে, Chrome জাভাস্ক্রিপ্ট কনসোলে একটি $("someid")পদ্ধতি অন্তর্ভুক্ত রয়েছে এবং আপনি বিকাশকারী সরঞ্জামসমূহ "এলিমেন্টস" ভিউতে কোনও উপাদানকে ক্লিক করতে পারেন এবং তারপরে $0কনসোলটি থেকে এটি রেফারেন্স করতে পারেন । পূর্বে নির্বাচিত উপাদান হয়ে যায় $1এবং আরও অনেক কিছু।

Question 15

যদি এখানে কেবলমাত্র সমস্যাটি টাইপ করা হয় তবে আপনার নিজের বোধগম্যতার সাথে নিজেকে একটি জাভাস্ক্রিপ্ট সম্পাদক করা উচিত।

যদি উদ্দেশ্যটি সংক্ষিপ্ত কোডটি পাওয়া যায়, তবে আপনি jQuery এর মতো একটি জাভাস্ক্রিপ্ট লাইব্রেরি বিবেচনা করতে পারেন, বা আপনি কেবল নিজের শর্টহ্যান্ড ফাংশন লিখতে পারেন, যেমন:

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

আমি আরও ভাল পারফরম্যান্সের জন্য উপরেরটি করতাম। আমি গত বছর যা শিখেছি তা হ'ল সংকোচনের কৌশলগুলির সাথে সার্ভারটি স্বয়ংক্রিয়ভাবে এটি আপনার জন্য করে তোলে, তাই আমার সংক্ষিপ্তকরণ কৌশলটি আসলে আমার কোডটিকে ভারী করে তুলছিল। এখন আমি পুরো ডকুমেন্টটি টাইপ করে খুশি getgetElementById।

Question 16

আপনি যদি শর্টহ্যান্ড ফাংশন চাইছেন ...

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

Question 17

তীর ফাংশনগুলি কম হয়।

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

Question 18

ডকুমেন্ট.কোয়ারী নির্বাচন করুন সমস্ত নির্বাচন করুন ...

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

// usage: $('$myId')

Question 19

ঠিক আছে, যদি উপাদানটির আইডি গ্লোবাল অবজেক্টের কোনও বৈশিষ্ট্যের সাথে প্রতিযোগিতা না করে তবে আপনাকে কোনও ফাংশন ব্যবহার করতে হবে না।

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

সম্পাদনা: তবে আপনি এই 'বৈশিষ্ট্য' ব্যবহার করতে চান না ।

Question 20

আরেকটি মোড়ক:

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>

স্নিপেট প্রসারিত করুন

এটি, যদি আপনি কল্পনাতীত ব্যবহার করতে না চান তবে উপরে দেখুন।

Question 21

আপনি যেমন একটি মোড়ক ফাংশন ব্যবহার করতে পারেন:

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

বা

document.getElementById কোনও ভেরিয়েবলকে documentঅবজেক্টের সাথে আবদ্ধ করে বরাদ্দ করুন ।

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

দ্রষ্টব্য: দ্বিতীয় পদ্ধতিতে, আপনি যদি এটির document.getElementByIdসাথে আবদ্ধ না হন তবে documentআপনি ত্রুটি পাবেন:

Uncaught TypeError: Illegal invocation

এটি কী Function.bindকরে এটির thisমূলশব্দটি সেট করে একটি নতুন ফাংশন তৈরি করে যা আপনি যুক্তি হিসাবে সরবরাহ করেন Function.bind।

জন্য পড়ুন ডক্স Function.bind

Question 22

আমি গতকাল এটি লিখেছিলাম এবং এটি বেশ দরকারী বলে মনে করি।

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