ডকুমেন্ট.জেটএলিমেন্টবাই আইডি বনাম jQuery $ ()

Question

এটি কি:

var contents = document.getElementById('contents');

এই হিসাবে একই:

var contents = $('#contents');

দেওয়া হয়েছে যে jQuery লোড হয়?

Comments

উত্তরে উত্থাপিত পয়েন্টগুলি ছাড়াও, jQuery সংস্করণটি অ্যাপ্লিকেশন। 100x ধীর।

এটি কোথাও প্রমাণিত?

— ফ্র্যানব্রান

@ ট্যারাজাবুরো প্রকৃতপক্ষে, jQuery সংস্করণ 3 গুণও কম নয় (অন্তত সর্বশেষতম ক্রোম)। দেখুন: jsperf.com/getelementbyid-vs-jquery-id/44

— মাইকেল পেরেকোস্কি

এই লিঙ্কটিতে @ মাইকাপেরাকোভস্কি জ্যাকারি সংস্করণটি 10 ​​গুণ ধীর। 26 মিলিল বনাম 2.4 মিলিল

— ক্লাদিউ ক্রিঙ্গা

জেএসপিফার জন্য সঠিক আপডেট হওয়া লিঙ্কটি হ'ল: jsperf.com/getelementbyid-vs-jquery-id আমার ক্ষেত্রে (এফএফ 58) এটি 1000 গুণ বেশি ধীর। যাইহোক, jQuery এখনও প্রতি সেকেন্ডে 2.5 মিলিয়ন অপ্স করে। সাধারণভাবে এটি কোনও সমস্যা নয় এবং কার্যকারিতার দিক থেকে এটি অবশ্যই তুলনা করা যায় না।

— দিয়েগো জ্যানসিক

Answer 1

বেপারটা এমন না!!

document.getElementById('contents'); //returns a HTML DOM Object

var contents = $('#contents');  //returns a jQuery Object

---

JQuery এ, একই ফলাফল পেতে document.getElementById, আপনি jQuery অবজেক্ট অ্যাক্সেস করতে পারেন এবং অবজেক্টে প্রথম উপাদানটি পেতে পারেন (মনে রাখবেন জাভাস্ক্রিপ্ট অবজেক্টগুলি এসোসিয়েটিভ অ্যারেগুলির অনুরূপ কাজ করে)।

var contents = $('#contents')[0]; //returns a HTML DOM Object

Comments

আগ্রহী প্রত্যেকের জন্য document.getElementBy<IE8 এ সঠিকভাবে কাজ করে না। এটি nameতাত্ত্বিকভাবে তর্ক করতে পারে document.getElementByIdকেবল বিভ্রান্তিকর নয়, তবে ভুল মানগুলিও ফিরিয়ে দিতে পারে বলে এটি উপাদানও পেয়ে যায় । আমি মনে করি @ জন এটি নতুন, তবে আমি ভেবেছিলাম এটি এতে যুক্ত করে ক্ষতি করবে না

— লিম

আপনার সনাক্তকারী স্থির না হলে যত্ন নিন। $('#'+id)[0]এর সমান নয় document.getElementById(id)কারণ idএমন অক্ষর থাকতে পারে যা jQuery এ বিশেষ হিসাবে বিবেচিত হয়!

— Jakob

এটি খুব সহায়ক ছিল - এটি কখনই জানত না! আমি নিশ্চিত যে আমি এটি আসলে আগে ব্যবহার করেছি , যদিও এটিই আমাকে অবাক করে । আরে, আপনি প্রতিদিন কিছু শিখেন! ধন্যবাদ!

— jedd.ahyoung

গুগল jquery equivalent of document.getelementbyidএবং প্রথম ফলাফলটি এই পোস্ট। ধন্যবাদ!!!

— আজাকব্ল্যাকগোট

$('#contents')[0].idআইডি নামটি ফেরত দেয়।

— ওমর

Answer 2

না।

কলিং document.getElementById('id')কোনও কাঁচা ডিওএম অবজেক্ট ফিরিয়ে দেবে।

কলিং $('#id')এমন একটি jQuery অবজেক্ট ফিরিয়ে দেবে যা DOM অবজেক্টকে আবৃত করে এবং jQuery পদ্ধতি সরবরাহ করে।

সুতরাং, আপনি শুধুমাত্র মত jQuery এর পদ্ধতি কল করতে পারেন css()বা animate()উপর $()কল।

আপনি এটিও লিখতে পারেন $(document.getElementById('id'))যা কোনও jQuery অবজেক্ট ফিরিয়ে দেবে এবং এর সমতুল্য $('#id')।

আপনি jQuery অবজেক্ট থেকে লেখার মাধ্যমে অন্তর্নিহিত DOM অবজেক্টটি পেতে পারেন $('#id')[0]।

Comments

কোনটি দ্রুত - আপনি know ("# এলিমেন্ট") বনাম document (ডকুমেন্ট.সেটিমেন্টবাইআইডি ('এলিমেন্ট')) দ্রুত জানেন তা কি আপনি জানতে পেরেছেন?

— ইভান Ivković

@ ইভানআইভকোভিঃ: প্রথমটি দ্রুততর হয়, কারণ এতে স্ট্রিং পার্সিং জড়িত না।

— স্ল্যাक्स

@ এসএলক্স কাঁচা ডিওএম অবজেক্ট এবং জিকুয়েরি অবজেক্টের মধ্যে প্রধান পার্থক্য কী? শুধু যে jQuery অবজেক্ট ব্যবহার করে আমাদের jQuery পদ্ধতি প্রয়োগ করার ক্ষমতা আছে?

— রক্সি'প্রো

@ রক্সি'প্রো: এরা বিভিন্ন জিনিস। jQuery অবজেক্টগুলি DOM অবজেক্টগুলিকে মোড়ক করে। ডকুমেন্টেশন দেখুন।

— স্ল্যাक्स

এই ডক জাভাস্ক্রিপ্ট DOM অবজেক্টস বনাম jQuery অবজেক্টগুলি দরকারী মনে হচ্ছে। In one sentence, DOM objects are the objects that the web browser is using to render elements on the web page whereas jQuery objects are basically wrapper objects around a set of DOM elements.

— ব্যবহারকারী3454439

Answer 3

বন্ধ, কিন্তু একই নয়। তারা একই উপাদান পাচ্ছে, তবে jQuery সংস্করণটি একটি jQuery অবজেক্টে আবৃত।

সমতুল্য এই হবে

var contents = $('#contents').get(0);

অথবা এটা

var contents = $('#contents')[0];

এগুলি jQuery অবজেক্ট থেকে উপাদানটি টেনে আনবে।

Answer 4

গতির পার্থক্য সম্পর্কে একটি নোট। একটি অনক্লিক কলটিতে নিম্নলিখিত স্নিপেট সংযুক্ত করুন:

function myfunc()
{
    var timer = new Date();

        for(var i = 0; i < 10000; i++)
        {
            //document.getElementById('myID');
            $('#myID')[0];
        }


    console.log('timer: ' + (new Date() - timer));
}

বিকল্প মন্তব্য এক এবং তারপর অন্য আউট মন্তব্য। আমার পরীক্ষায়,

document.getElementbyId সম্পর্কে গড় 35ms (থেকে fluctuating 25msপর্যন্ত 52msসম্পর্কে 15 runs)

অন্যদিকে,

jQuery সম্পর্কে গড় 200ms (ছোটো থেকে 181msথেকে 222msসম্পর্কে 15 runs)।

এই সাধারণ পরীক্ষা থেকে আপনি দেখতে পাবেন যে jQuery প্রায় 6 বার সময় নিয়েছিল ।

অবশ্যই, শেষ হয়ে গেছে যে 10000পুনরাবৃত্তিও তাই একটি সহজ অবস্থায় আমি সম্ভবত পাবেন ব্যবহারের স্বাচ্ছন্দ মত অন্যান্য শীতল জিনিস সব জন্য jQuery ব্যবহার করবে .animateএবং .fadeTo। তবে হ্যাঁ, প্রযুক্তিগতভাবে getElementByIdকিছুটা দ্রুত ।

Comments

এই উত্তরের জন্য ধন্যবাদ। আমি জিজ্ঞাসা করতে চেয়েছিলাম, আমি সব $('#someID') সঙ্গে প্রতিস্থাপন করা উচিত document.getElementById("someID") ? আমি এমন কিছু নিয়ে কাজ করছি যেখানে আমি ব্যাপকভাবে ব্যবহার করেছি $('#someID')এবং বড় পৃষ্ঠা ইনপুটগুলির জন্য আমার পৃষ্ঠাটি ধীর গতিতে চলেছে। আমার চলন কী হওয়া উচিত দয়া করে আমাকে পরামর্শ দিন।

— মাজহার এমআইকে

আপনি যদি একই সুযোগে একাধিকবার পুনরায় ব্যবহার করছেন তবে এটি সংরক্ষণ করুন, সংরক্ষণ করুন var $myId = $('#myId');এবং সংরক্ষণিত ভেরিয়েবলটি পুনরায় ব্যবহার করুন $myId। আইডি দ্বারা সন্ধান করা সাধারণত একটি খুব দ্রুত জিনিস তবে পৃষ্ঠাটি আলস্য হলে সম্ভবত অন্য কোনও কারণ থাকতে পারে।

— nurdyguy

ধন্যবাদ @ নুরডিগুয়ে এটা সহায়ক ছিল। আমি তা বাস্তবায়নের চেষ্টা করব।

— মাজহার এমআইকে 12'19

Answer 5

না। প্রথমটি একটি ডিওএম উপাদান বা নাল দেয়, অন্যদিকে সর্বদা একটি জিকুয়েরি বস্তু দেয়। আইডির সাথে কোনও উপাদান contentsমেলে না হলে jQuery অবজেক্টটি খালি থাকবে ।

ফিরে আসা ডোম উপাদান document.getElementById('contents')আপনাকে .innerHTML(বা .value) ইত্যাদি পরিবর্তন করার মতো জিনিসগুলি করার অনুমতি দেয় তবে আপনাকে jQuery অবজেক্টে jQuery পদ্ধতি ব্যবহার করতে হবে ।

var contents = $('#contents').get(0);

আরও সমানুপাতিক, তবে যদি আইডির সাথে কোনও উপাদান contentsমেলে না তবে তা নালায় document.getElementById('contents')ফিরে আসবে, তবে অপরিবর্তিত $('#contents').get(0)থাকবে।

JQuery অবজেক্টটি ব্যবহার করার একটি সুবিধা হ'ল কোনও বস্তু সর্বদা ফিরে আসায় আপনি কোনও ত্রুটি পাবেন না। তবে আপনি যদি nullফিরে এসে ক্রিয়াকলাপ চালানোর চেষ্টা করেন তবে ত্রুটি পাবেনdocument.getElementById

Answer 6

না, আসলে একই ফলাফলটি হবে:

$('#contents')[0] 

jQuery কোয়েরি থেকে কত ফলাফল ফিরে আসবে তা জানেন না। আপনি কী ফিরে পাবেন তা একটি বিশেষ jQuery অবজেক্ট যা ক্যোয়ারীর সাথে মেলে এমন সমস্ত নিয়ন্ত্রণের একটি সংগ্রহ a

JQuery কে এত সুবিধাজনক করে তুলেছে তার অংশটি হ'ল এই অবজেক্টে ডেকে আনা বেশিরভাগ পদ্ধতিগুলি দেখতে যে এগুলি একটি নিয়ন্ত্রণের জন্য বোঝানো হয়, আসলে সে সমস্ত সদস্যকে আহ্বান করে এমন একটি লুপে যা তিনি সংগ্রহ করেন

আপনি যখন [0] বাক্য গঠন ব্যবহার করেন আপনি অভ্যন্তরীণ সংগ্রহ থেকে প্রথম উপাদানটি গ্রহণ করেন। এই মুহুর্তে আপনি একটি ডিওএম অবজেক্ট পাবেন

Answer 7

যদি অন্য কেউ এটি আঘাত করে ... তবে এখানে আরও একটি পার্থক্য রয়েছে:

যদি আইডিতে এমন অক্ষর থাকে যা এইচটিএমএল স্ট্যান্ডার্ড দ্বারা সমর্থিত নয় ( এখানে এসও প্রশ্ন দেখুন ) তবে জিকুয়েরি getElementById করলেও এটি সন্ধান করতে পারে না।

এটি আমার সাথে ক্রোম ব্যবহার করে "/" অক্ষর (উদাহরণ: id = "a / b / c") সহ একটি আইডি হয়েছে:

var contents = document.getElementById('a/b/c');

আমার উপাদানটি খুঁজে পেতে সক্ষম হয়েছিল তবে:

var contents = $('#a/b/c');

না।

বিটিডব্লিউ, সরল ফিক্সটি ছিল সেই আইডিটি নাম ক্ষেত্রে সরানো। JQuery ব্যবহার করে উপাদানটি খুঁজে পেতে কোনও সমস্যা হয়নি:

var contents = $('.myclass[name='a/b/c']);

Answer 8

ঠিক যেমনটি বেশিরভাগ লোক বলেছে, মূল পার্থক্যটি হ'ল যে এটি সরল জাভাস্ক্রিপ্ট ব্যবহার করে কাঁচা ডিওএম বস্তু বনাম জিকুয়েরি কল দিয়ে একটি জিকুয়েরি বস্তুতে আবৃত। JQuery অবজেক্ট অবশ্যই এর সাথে অন্যান্য jQuery ফাংশন করতে সক্ষম হবে তবে, যদি আপনাকে কেবল বেসিক স্টাইলিং বা বেসিক ইভেন্ট হ্যান্ডলিংয়ের মতো সাধারণ ডিওএম ম্যানিপুলেশন করতে হয় তবে সরল জাভাস্ক্রিপ্ট পদ্ধতিটি jQuery এর চেয়ে সবসময়ই সামান্য দ্রুততর হয় কারণ আপনি ' টি জাভাস্ক্রিপ্ট উপর নির্মিত কোড একটি বহিরাগত গ্রন্থাগারে লোড করতে হবে। এটি একটি অতিরিক্ত পদক্ষেপ সংরক্ষণ করে।

Answer 9

var contents = document.getElementById('contents');

var contents = $('#contents');

কোড স্নিপেটগুলি এক নয়। প্রথমটি একটি Elementবস্তু ( উত্স ) প্রদান করে। দ্বিতীয়টি, jQuery সমতুল্য শূন্য বা একটি ডিওএম উপাদানগুলির সংকলনযুক্ত jQuery অবজেক্টটি ফিরিয়ে দেবে। ( jQuery ডকুমেন্টেশন )। অভ্যন্তরীণভাবে jQuery document.getElementById()দক্ষতার জন্য ব্যবহার করে।

উভয় ক্ষেত্রেই যদি একাধিক উপাদান পাওয়া যায় তবে কেবলমাত্র প্রথম উপাদানটি ফিরে আসবে।

---

জিকিউরির জন্য গিথুব প্রকল্পটি পরীক্ষা করার সময় আমি নিম্নলিখিত লাইন স্নিপেটগুলি পেয়েছি যা ডকুমেন্ট.সেটমেন্টবিইআইডি কোডগুলি ব্যবহার করছে বলে মনে হচ্ছে ( https://github.com/jquery/jquery/blob/master/src/core/init.js লাইন 68 এর পরে)

// HANDLE: $(#id)
} else {
    elem = document.getElementById( match[2] );

Answer 10

অন্য একটি পার্থক্য: প্রথম ম্যাচটি getElementByIdফেরত দেয় , যখন ম্যাচগুলির সংগ্রহ প্রদান করে - হ্যাঁ, একই আইডি এইচটিএমএল ডকটিতে পুনরাবৃত্তি করা যেতে পারে।$('#...')

আরও, getElementIdডকুমেন্ট থেকে কল করা হয়, যখন $('#...')কোনও নির্বাচকের কাছ থেকে ফোন করা যেতে পারে। সুতরাং, নীচের কোডে, document.getElementById('content')পুরো শরীরটি $('form #content')[0]ফিরিয়ে দেবে তবে ফর্মের অভ্যন্তরে ফিরে আসবে।

<body id="content">
   <h1>Header!</h1>
   <form>
      <div id="content"> My Form </div>
   </form>
</body>

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

Answer 11

jQuery জাভাস্ক্রিপ্ট উপর নির্মিত হয়। এর অর্থ এটি যে কোনওভাবেই জাভাস্ক্রিপ্ট।

document.getElementById ()

ডকুমেন্ট.জেটমেন্টমেন্টবিআইআইডি () পদ্ধতিতে নির্দিষ্ট মানের সাথে আইডি বৈশিষ্ট্যযুক্ত উপাদানটি ফেরত দেয় এবং নির্দিষ্ট আইডির কোনও উপাদান উপস্থিত না থাকলে শূন্য ফিরে আসে nএর আইডি একটি পৃষ্ঠার মধ্যে স্বতন্ত্র হওয়া উচিত।

জকোয়ারি $ ()

আইডি সিলেক্টারের সাথে jQuery () বা $ () কল করা তার যুক্তি হিসাবে কোনও শূন্য বা একটি ডিওএম উপাদানের সংশ্লেষযুক্ত একটি jQuery অবজেক্ট ফিরিয়ে দেবে ach প্রতিটি আইডি মান অবশ্যই একটি দস্তাবেজের মধ্যে একবার ব্যবহার করা উচিত। যদি একাধিক উপাদানকে একই আইডি বরাদ্দ করা হয় তবে যে আইডিটি ব্যবহার করে সেগুলি ডিওমে কেবল প্রথম মিলিত উপাদান নির্বাচন করবে।

Answer 12

ওয়েব ব্রাউজারগুলিতে ডোম গাছ সংরক্ষণ করার জন্য আমি একটি নোএসকিউএল ডাটাবেস তৈরি করেছি যেখানে পৃষ্ঠায় থাকা সমস্ত ডিওএম উপাদানগুলির রেফারেন্স একটি সংক্ষিপ্ত সূচীতে সংরক্ষণ করা হয়েছে। সুতরাং কোনও উপাদান পেতে / পরিবর্তন করতে "getElementById ()" ফাংশনটির প্রয়োজন হয় না। পৃষ্ঠায় DOM গাছের উপাদানগুলি ইনস্ট্যান্ট করা হলে ডাটাবেস প্রতিটি উপাদানকে সারোগেট প্রাথমিক কী বরাদ্দ করে। এটি একটি নিখরচায় সরঞ্জাম http://js2dx.com

Answer 13

উপরের সমস্ত উত্তর সঠিক। আপনি যদি এটিকে ক্রিয়াতে দেখতে চান তবে ভুলে যাবেন না যে আপনার কোনও ব্রাউজারে কনসোল রয়েছে যেখানে আপনি আসল ফলাফল স্ফটিকটি পরিষ্কার দেখতে পাবেন:

আমার একটি এইচটিএমএল আছে:

<div id="contents"></div>

কনসোল এ যান (cntrl+shift+c)এবং আপনার ফলাফলটি পরিষ্কার দেখতে এই আদেশগুলি ব্যবহার করুন

document.getElementById('contents')
>>> div#contents

$('#contents')
>>> [div#contents,
 context: document,
 selector: "#contents",
 jquery: "1.10.1",
 constructor: function,
 init: function …]

আমরা দেখতে পাচ্ছি, প্রথম ক্ষেত্রে আমরা নিজেই ট্যাগটি পেয়েছি (এটি কঠোরভাবে বলতে গেলে, একটি HTMLDivElement অবজেক্ট)। পরবর্তীকালে আমাদের কাছে আসলে একটি সরল অবজেক্ট নেই, তবে অবজেক্টগুলির একটি অ্যারে রয়েছে। এবং উপরের অন্যান্য উত্তর দ্বারা উল্লিখিত হিসাবে, আপনি নিম্নলিখিত কমান্ডটি ব্যবহার করতে পারেন:

$('#contents')[0]
>>> div#contents

Answer 14

2019 এর সমস্ত উত্তর আজই পুরানো হয়েছে আপনি জাভাস্ক্রিপ্টে সরাসরি আইডি কীড ফিল্ডগুলি অ্যাক্সেস করতে পারেন কেবল এটি চেষ্টা করে

<p id="mytext"></p>
<script>mytext.innerText = 'Yes that works!'</script>

অনলাইন ডেমো! - https://codepen.io/frank-dspeed/pen/mdywbre