javascript - w3schools - প্রশ্নছাত্রী এবং ক্যোয়ারীছাত্রীএকটি বনাম vsElementsByClassName এবং জাভাস্ক্রিপ্টে getElementById




javascript কি (7)

আমি জানতে চাই যে getElementsByClassName এবং getElementById এর বিরুদ্ধে querySelector এবং querySelectorAll এর মধ্যে পার্থক্য কি ঠিক?

সিনট্যাক্স এবং ব্রাউজার সমর্থন।

আপনি আরো জটিল নির্বাচক ব্যবহার করতে চান যখন querySelector আরো দরকারী।

উদাহরণস্বরূপ সমস্ত তালিকা আইটেম একটি উপাদান থেকে descended যে foo ক্লাসের সদস্য: .foo li

document.queryselector ("# view: _id1: inputText1") এটি কাজ করে না। কিন্তু document.getElementById লেখা ("দেখুন: _id1: inputText1") কাজ করে। কোন ধারনা কেন?

: চরিত্র একটি নির্বাচক ভিতরে বিশেষ অর্থ আছে। আপনি এটি পালাতে হবে। (নির্বাচক পালা চরিত্রটির একটি JS স্ট্রিংয়ে বিশেষ অর্থ রয়েছে, তাই আপনাকে সেটিও পালাতে হবে)।

document.querySelector("#view\\:_id1\\:inputText1")

আমি জানতে চাই যে getElementsByClassName এবং getElementById বিরুদ্ধে querySelector এবং querySelectorAll মধ্যে পার্থক্য কি ঠিক?

এই লিংক থেকে আমি প্রশ্নের সাথে querySelector করতে পারি document.querySelector(".myclass") আইডি myid সাথে উপাদান পেতে শ্রেণীকক্ষে myclass এবং document.querySelector("#myid") myclass document.querySelector("#myid") সাথে উপাদানগুলি পেতে document.querySelector("#myid") myclass document.querySelector("#myid") myid । কিন্তু আমি ইতিমধ্যে যে getElementsByClassName এবং getElementById করতে পারি। কোনটি পছন্দ করা উচিত?

এছাড়াও আমি XPages কাজ XPages যেখানে আইডিটি কোলনের সাথে ডায়নামিকভাবে জেনারেট হয় এবং এই view:_id1:inputText1 দেখে মনে হয় view:_id1:inputText1 । তাই যখন আমি document.querySelector("#view:_id1:inputText1") এটি কাজ করে না। কিন্তু document.getElementById("view:_id1:inputText1") লেখা document.getElementById("view:_id1:inputText1") কাজ করে। কোন ধারনা কেন?


"Queryelector" এবং "query selectorAll" এর মধ্যে পার্থক্য

//querySelector returns single element
let listsingle = document.querySelector('li');
console.log(listsingle);


//querySelectorAll returns lit/array of elements
let list = document.querySelectorAll('li');
console.log(list);


//Note : output will be visible in Console
<ul>
<li class="test">ffff</li>
<li class="test">vvvv</li>
<li>dddd</li>
<li class="test">ddff</li>
</ul>


এই উত্তরের জন্য, আমি querySelector এবং querySelectorAll কে querySelector হিসাবে * উল্লেখ querySelector এবং querySelectorAll পেতে, getElementsByClassName , getElementsByTagName , এবং getElementsByName হিসাবে GetElement *।

প্রধান পার্থক্য

  1. querySelector * আরো নমনীয়, কারণ আপনি এটি কোনও CSS3 সিলেক্টরটি পাস করতে পারেন, আইডি, ট্যাগ বা শ্রেণির জন্য সহজ নয়।
  2. QuerySelector এর কর্মক্ষমতা * DOM আকারে পরিবর্তিত হয় যা এটি চালু হয়। সুনির্দিষ্ট হতে, querySelector * কলগুলি O (n) সময় চলতে এবং callElement * কলগুলি O (1) সময় চালানো হয়, যেখানে এনটি উপাদান বা নথির সমস্ত বাচ্চাদের মোট সংখ্যা। এই বিষয়টি অন্তত সুপরিচিত মনে হয়, তাই আমি এটা সাহসী করছি।
  3. getElement * কল ডোমের সরাসরি রেফারেন্সগুলিকে কল করে, আর কোয়েরিছাত্রী * অভ্যন্তরীণভাবে নির্বাচিত উপাদানগুলির অনুলিপিগুলি তাদের কাছে রেফারেন্সগুলি ফেরত দেওয়ার আগে তৈরি করে। এইগুলিকে "লাইভ" এবং "স্ট্যাটিক" উপাদান হিসাবে উল্লেখ করা হয়। এই তারা ফিরে যে ধরনের কঠোরভাবে সম্পর্কিত হয় না। কোন উপাদানটি লাইভ বা স্ট্যাটিক প্রোগ্রাম্যাটিক হিসাবে বলতে কোন উপায় নেই, কারণ এটি উপাদানটির কোনও সময়ে অনুলিপি করা হয়েছে কিনা তা নির্ভর করে এবং তথ্যটির অন্তর্নিহিত সম্পত্তি নয়। লাইভ উপাদানগুলিতে পরিবর্তনগুলি অবিলম্বে প্রয়োগ হয় - একটি লাইভ উপাদান পরিবর্তন করে এটি সরাসরি DOM- এ পরিবর্তিত হয়, এবং অতএব JS এর ​​পরবর্তী লাইনটি সেই পরিবর্তনটি দেখতে পারে এবং এটি যে উপাদানটিকে অবিলম্বে উল্লেখ করে অন্য কোনও লাইভ উপাদানগুলিতে প্রচার করে। স্ট্যাটিক উপাদানগুলিতে পরিবর্তনগুলি বর্তমান স্ক্রিপ্টটি কার্যকর হওয়ার পরে কেবলমাত্র DOM এ লেখা হয়। এই অতিরিক্ত অনুলিপি এবং লেখার ধাপগুলি কিছু ছোট, এবং সাধারণত নগণ্য, কর্মক্ষমতা প্রভাব।
  4. এই কল ফেরত ধরন পরিবর্তিত হয়। querySelector এবং getElementById উভয় একটি একক উপাদান ফিরে। querySelectorAll এবং querySelectorAll উভয়ই নোডলিস্টগুলি ফেরত দেয়, নতুন ফাংশন যা এইচটিএমএল কলেকশনটি পরে ফ্যাশন থেকে বেরিয়ে যায়। পুরনো getElementsByClassName এবং getElementsByTagName উভয় HTMLCollections ফেরত। আবার, এই উপাদানগুলি লাইভ বা স্ট্যাটিক কিনা তা অপরিহার্যভাবে অপরিসীম।

এই ধারণার নিম্নলিখিত টেবিলে সারসংক্ষেপ করা হয়।

Function               | Live? | Type           | Time Complexity
querySelector          |   N   | Element        |  O(n)
querySelectorAll       |   N   | NodeList       |  O(n)
getElementById         |   Y   | Element        |  O(1)
getElementsByClassName |   Y   | HTMLCollection |  O(1)
getElementsByTagName   |   Y   | HTMLCollection |  O(1)
getElementsByName      |   Y   | NodeList       |  O(1)

বিবরণ, টিপস, এবং উদাহরণ

  • HTMLCollections নোডলিস্ট হিসাবে অ্যারের মত নয় এবং সমর্থন করে না। প্রতিটি ()। আমি এই চারপাশে কাজ করার জন্য স্প্রেড অপারেটর দরকারী খুঁজে পাচ্ছি:

    [...document.getElementsByClassName("someClass")].forEach()]

  • প্রতিটি উপাদান, এবং বিশ্বব্যাপী document , এই সমস্ত ফাংশন অ্যাক্সেস আছে getElementsByName ব্যতীত, যা শুধুমাত্র document প্রয়োগ করা হয়।

  • চ্যায়ারিং getElement * querySelector ব্যবহার করার পরিবর্তে কল * কর্মক্ষমতা উন্নত করবে, বিশেষ করে খুব বড় DOMs এ। এমনকি ছোট DOM এবং / অথবা খুব লম্বা চেইনগুলিতে, এটি সাধারণত দ্রুত। যাইহোক, যদি না আপনি জানেন যে আপনি কর্মক্ষমতা প্রয়োজন, querySelector এর পঠনযোগ্যতা পছন্দ করা উচিত। querySelectorAll পুনঃলিখন করা প্রায়শই কঠিন, কারণ আপনাকে প্রতিটি ধাপে নোডলস্ট বা HTMLCollection থেকে উপাদান নির্বাচন করতে হবে। উদাহরণস্বরূপ, নিম্নলিখিত কোড কাজ করে না :

    document.getElementsByClassName("someClass").getElementsByTagName("div")

    কারণ আপনি শুধুমাত্র একক উপাদানের * উপাদানের ব্যবহার করতে পারেন, সংগ্রহগুলি নয়। উদাহরণ স্বরূপ:

    document.querySelector("#someId .someClass div")

    হিসাবে লেখা যেতে পারে:

    document.getElementById("someId").getElementsByClassName("someClass")[0].getElementsByTagName("div")[0]

    সংগ্রহটি ফেরত দেওয়ার প্রতিটি ধাপে সংগ্রহটির প্রথম উপাদানটি কেবলমাত্র [0] ব্যবহারের জন্য নোট করুন, যার ফলে শেষ পর্যন্ত এক উপাদান যেমন querySelector মতো হয়।

  • যেহেতু সমস্ত উপাদানের অ্যাক্সেস উভয় প্রশ্নের অ্যাক্সেসর * এবং getElement * কলগুলিতে অ্যাক্সেস আছে, তাই আপনি উভয় কল ব্যবহার করে চেইনগুলি তৈরি করতে পারেন, যদি আপনি কিছু কর্মক্ষমতা লাভ করতে চান তবে এটি উপকারী হতে পারে, তবে একটি প্রশ্নউত্তর এড়াতে পারে না যা GetElement * কলগুলির ক্ষেত্রে লেখা যাবে না ।

  • যদিও সহজেই বলা যায় যে কোন নির্বাচক শুধুমাত্র getlement * কল ব্যবহার করে লিখিত হতে পারে তবে একটি মামলা যা সুস্পষ্ট নাও হতে পারে:

    document.querySelectorAll(".class1.class2")

    হিসাবে পুনঃলিখন করা যাবে

    document.getElementsByClassName("class1 class2")

  • Queryelector * এর সাথে প্রাপ্ত স্ট্যাটিক উপাদানটিতে getElement * ব্যবহার করে * কোয়েরিলেকটর দ্বারা অনুলিপি করা DOM এর স্ট্যাটিক উপসেটের সাথে বাস করা একটি উপাদান হতে পারে, তবে সম্পূর্ণ ডকুমেন্টের সাথে সম্পর্কিত নয় ... এটি সহজ লাইভ / উপাদান স্ট্যাটিক ব্যাখ্যা পৃথক্ পড়া শুরু। আপনাকে সম্ভবত এই বিষয়ে চিন্তা করতে হবে এমন পরিস্থিতিগুলি এড়াতে হবে, তবে আপনি যদি মনে করেন তবে অনুসন্ধানকারী নির্বাচন * তাদের কাছে রেফারেন্সগুলি ফেরত দেওয়ার আগে খুঁজে পাওয়া অনুলিপি উপাদানগুলিকে কল করে, কিন্তু পেতে * কলগুলি অনুলিপি ছাড়াই সরাসরি রেফারেন্সগুলি আনতে পারে।

  • একাধিক মিল আছে যদি কোনও API প্রথম কোন উপাদানটি নির্বাচন করা উচিত তা নির্দিষ্ট করে।

  • querySelector কোনও মিল খুঁজে না querySelector DOM এর মাধ্যমে পুনরাবৃত্তি করে, querySelector বোঝায় যে আপনি DOM- এ খুঁজছেন উপাদানটির অবস্থানের উপর নির্ভর করতে পারছেন না যা পারফরম্যান্সটি অপ্টিমাইজ করার জন্য - ব্রাউজারটি DOM এর পিছনে, পিছনে, গভীরতার মাধ্যমে পুনরাবৃত্তি করতে পারে , প্রস্থ প্রথম, অথবা এটি পছন্দ করে কোনো উপায়।


এটা দেখ

https://codepen.io/bagdaulet/pen/bzdKjL

getElementById জিজ্ঞাসা চেয়ে দ্রুততম নির্বাচনী 25%

jquery ধীরতম হয়

var q = time_my_script(function() {

    for (i = 0; i < 1000000; i++) {
         var w = document.querySelector('#ll');
    }

});

console.log('querySelector: '+q+'ms');

মোজিলা ডকুমেন্টেশন থেকে সংগ্রহ :

নোডসইলেকটর ইন্টারফেস ডকুমেন্ট, ডকুমেন্টফ্রেগমেন্ট, বা এলিমেন্ট ইন্টারফেস প্রয়োগকারী কোনও বস্তুতে এই স্পেসিফিকেশন দুটি নতুন পদ্ধতি যোগ করে:

querySelector

নোডের সাবট্রি-র মধ্যে প্রথম মিলিং এলিমেন্ট নোডটি প্রদান করে। যদি কোন মিলিং নোড পাওয়া যায়, নাল ফিরে হয়।

querySelectorAll

নোডের উপ-সারির মধ্যে সমস্ত মিলিং উপাদান নোড ধারণকারী একটি নোডলস্ট প্রদান করে , অথবা কোনো মিল খুঁজে পাওয়া না থাকলে একটি খালি নোডলিস্ট প্রদান করে।

এবং

দ্রষ্টব্য: querySelectorAll() দ্বারা ফেরত querySelectorAll() লাইভ নয়, যার মানে DOM এর পরিবর্তনগুলি সংগ্রহে প্রতিফলিত হয় না। এটি অন্য ডোএম কোয়েরি পদ্ধতির থেকে ভিন্ন যা লাইভ নোড তালিকাগুলি ফেরত দেয়।


querySelector w3c নির্বাচক API এর

getElementBy DOM এপিআই এর

আইএমও সবচেয়ে উল্লেখযোগ্য পার্থক্য হল যে রিটার্ন টাইপ querySelectorAll একটি স্ট্যাটিক নোড তালিকা এবং getElementsBy এর জন্য এটি একটি লাইভ নোড তালিকা। তাই ডেমো 2 এ লুপিং শেষ হয় না কারণ lis লাইভ এবং প্রতিটি পুনরাবৃত্তি সময় নিজেই আপডেট হয়।

// Demo 1 correct
var ul = document.querySelectorAll('ul')[0],
    lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++){
    ul.appendChild(document.createElement("li"));
}

// Demo 2 wrong
var ul = document.getElementsByTagName('ul')[0], 
    lis = ul.getElementsByTagName("li"); 
for(var i = 0; i < lis.length ; i++){
    ul.appendChild(document.createElement("li")); 
}

querySelector সম্পূর্ণ সিএসএস হতে পারে (3) - আইডি এবং ক্লাস এবং ছদ্ম-ক্লাসের সাথে নির্বাচক নির্বাচন করুন:

'#id.class:pseudo'

// or

'tag #id .class .class.class'

getElementByClassName আপনি কেবল একটি বর্গ সংজ্ঞায়িত করতে পারেন

'class'

getElementById আপনি কেবল একটি আইডি সংজ্ঞায়িত করতে পারেন

'id'





javascript