কিউইউইলেক্টোর সব কি এবং এলিমেটস বাই * পদ্ধতিগুলি কী ফিরে আসে?

151

ডু getElementsByClassName(এবং মত অনুরূপ ফাংশন getElementsByTagNameএবং querySelectorAll) কাজ হিসাবে একই getElementByIdঅথবা তারা উপাদানের একটি অ্যারের ফিরে আসে?

আমার জিজ্ঞাসার কারণ হ'ল আমি ব্যবহার করে সমস্ত উপাদানগুলির স্টাইল পরিবর্তন করার চেষ্টা করছি getElementsByClassName। নিচে দেখ.

//doesn't work
document.getElementsByClassName('myElement').style.size = '100px';

//works
document.getElementById('myIdElement').style.size = '100px';

javascript getelementsbyclassname dom-traversal

— dmo
সূত্র

37

ক্লুটি হ'ল নামে, নামটি: getElementsByClassName()বহুবচন getElementById()বোঝায় , যেখানে বোঝায় একক উপাদান উপাদান।

— ডেভিড বলেছেন মনিকা

1

আমি এটি পেয়েছি, এটি কেবল আমার কাছে বোঝায় নি যে আপনি অ্যারের মাধ্যমে লুপ না করে উপরের কোডটি ব্যবহার করে class শ্রেণীর নাম সহ সমস্ত উপাদান পরিবর্তন করতে পারবেন না। jquery উপায় আরও ভাল, আমি

— জেএস

1

দরকারীও

— কাপা

152

আপনার getElementById()কোডগুলি কাজ করে যেহেতু আইডিগুলিকে অনন্য থাকতে হবে এবং সুতরাং ফাংশনটি সর্বদা ঠিক একটি উপাদান দেয় (বা nullযদি কিছুই খুঁজে পাওয়া যায় না)।

যাইহোক, getElementsByClassName(), querySelectorAll(), এবং অন্যান্য getElementsBy*পদ্ধতি উপাদানের একটি অ্যারের মত সংগ্রহ ফিরে যান। আপনি সত্যিকারের অ্যারের সাথে এটির মতো উদ্বিগ্ন:

var elems = document.getElementsByClassName('myElement');
for(var i = 0; i < elems.length; i++) {
    elems[i].style.size = '100px';
}

আপনি যদি কিছু খাটো পছন্দ করেন, jQuery ব্যবহার বিবেচনা করুন :

$('.myElement').css('size', '100px');

— ThiefMaster
সূত্র

1

যে ক্ষেত্রে প্রযোজ্য না <iframe>যা আপনার ডোমেনের অংশ

— JMASTER বি

3

এটি 2018 ... এর জন্য কেবল একটি র‍্যাপার ফাংশন তৈরি করুন querySelectorAll()এবং আপনার বড়, পুরানো-স্কুল নির্ভরতা ছাড়াই দুর্দান্ত শর্ট কোড থাকতে পারে। qSA(".myElement").forEach(el => el.style.size = "100px")সম্ভবত মোড়ক একটি কলব্যাক পেয়েছেন। qSA(".myElement", el => el.style.size = "100px")

2

"আপনি যদি ছোট কিছু পছন্দ করেন তবে আপনার প্রকল্পে একটি বিশাল গ্রন্থাগার যুক্ত করার কথা বিবেচনা করুন" আমি জানি 2012 কে আলাদা সময় ছিল, তবে তারপরেও আমি সেই বিটটি হাস্যকর বলে খুঁজে পেয়েছি।

— CoryCoolguy

1

" আপনি এটির মতো সত্যিকারের অ্যারের সাথে ইচ্ছুক হন ... সাবধানী , getElementsByClassName একটি লাইভ নোডলিস্ট প্রত্যাবর্তন করবে যা লুপ চলাকালীন অপ্রত্যাশিতভাবে পরিবর্তিত হতে পারে, উদাহরণস্বরূপ যদি তারা নির্বাচিত শ্রেণীর নামটি সরিয়ে ফেলা হয়। ;-)

— রবজি

20

আপনি একটি অবজেক্ট হিসেবে একটি অ্যারের ব্যবহার করছেন, এর মধ্যে পার্থক্য getElementbyIdএবং getElementsByClassNameযে:

getElementbyIdআইডি সহ কোনও উপাদান পাওয়া না গেলে একটি এলিমেন্ট অবজেক্ট বা নাল ফেরান
getElementsByClassNameকোনও মিলের উপাদান না পাওয়া গেলে সম্ভবত দৈর্ঘ্যের 0 টি একটি লাইভ এইচটিএমএল সংগ্রহ সংগ্রহ করবে

getElementsByClassName

getElementsByClassName(classNames)পদ্ধতি একটি স্ট্রিং, যাতে অনন্য স্থান বিভাজিত টোকেন শ্রেণীর প্রতিনিধিত্ব একটি unordered সেট রয়েছে লাগে। যখন ডাকা হয়, পদ্ধতিটি অবশ্যই NodeListডকুমেন্টের সমস্ত উপাদান সম্বলিত একটি লাইভ অবজেক্ট ফেরত পাঠাতে হবে যা সেই যুক্তিতে সুনির্দিষ্ট সমস্ত ক্লাস রয়েছে, স্পেসগুলিতে স্ট্রিং বিভাজন করে ক্লাস অর্জন করেছে। যদি আর্গুমেন্টে কোনও টোকেন নির্দিষ্ট না করা থাকে, তবে পদ্ধতিটি অবশ্যই একটি খালি নোডলিস্ট ফিরিয়ে আনতে হবে।

https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#getelementsbyclassname

getElementById

GetElementById () পদ্ধতিটি নির্দিষ্ট আইডি দিয়ে প্রথম উপাদানটি অ্যাক্সেস করে।

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

আপনার কোড লাইন:

1- ডকুমেন্ট.জিটেলমেন্টস বাইক্লাসনেম ('মাই এলিমেন্ট')। স্টাইল.সাইজ = '100px';

প্রত্যাশার মতো কাজ করবে না , কারণ getElementByClassNameএয়ারটি একটি অ্যারে ফিরিয়ে দেবে, এবং অ্যারেটির কোনও সম্পত্তি থাকবে নাstyle , আপনি elementতাদের মাধ্যমে পুনরাবৃত্তি করে প্রতিটি অ্যাক্সেস করতে পারবেন ।

এই কারণেই ফাংশনটি আপনার পক্ষে getElementByIdকাজ করেছে, এই ফাংশনটি সরাসরি অবজেক্টটি ফিরিয়ে দেবে। অতএব আপনি styleসম্পত্তিটি অ্যাক্সেস করতে সক্ষম হবেন ।

— আলভারো জোয়াও
সূত্র

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

— কাইডো

@ কাইদো practical ব্যবহারিক পার্থক্য হচ্ছে…? আমার বোঝার জন্য, একটি নোডলিস্টটি ডিওএম উপাদানগুলির জেনেরিক সংগ্রহ এবং এটি কোনও এইচটিএমএল ডিওএম (যেমন একটি এক্সএমএল ডোম) নয়, যে কোনও ডিওএম এ উপলব্ধ, যেখানে এইচটিএমএল সংগ্রহটি এইচটিএমএল ডিওএম (স্পষ্টতই) এর জন্য। শুধু পার্থক্য আমি দেখতে পারেন namedItem একটি পদ্ধতি HTMLCollection ।

— রবিজি

পিএস নীট চয়ন করুন: WHATWG এইচটিএমএল লিভিং স্ট্যান্ডার্ড এবং ডাব্লু 3 সি এইচটিএমএল 5.2 স্ট্যান্ডার্ডের লিঙ্ক । চয়েস দ্বারা বোকা। ;-) আপনি উত্থাপিত পয়েন্টটিতে কোনও পার্থক্য রাখে না।

— রবজি

@ রবজি নোডলিস্টে এমন অনেকগুলি পদ্ধতি রয়েছে যা এইচটিএমএল সংগ্রহের অ্যাক্সেসযোগ্য নয়।

— কাইদো

@ কাইডো — নিশ্চিত, তবে ফর ডাব্লু 3 সি বা WHATWG দ্বারা সংগ্রহ বা নোডলিস্ট উভয়ের জন্য ইন্টারফেসের অংশ হিসাবে নির্দিষ্ট করা হয়নি, এটি আলাদাভাবে নির্দিষ্ট করা হয়েছে, যেমন ওয়েব আইডিএল স্পেসিফিকেশনে জেনেরিক সংগ্রহের সম্পত্তি হিসাবে তাই সংগ্রহ এবং নোডলিস্ট উভয়ের ক্ষেত্রেই প্রয়োগ করা উচিত (যদিও আমি তোমার বিন্দু গ্রহণ সংগ্রহ দ্বারা ফিরে যে getElementsByClassName একটি নেই foreach পদ্ধতি)। আমি অনুমান করি যে নীচের অংশটি এটির উত্তরের জন্য যথেষ্ট উত্তম গল্প রয়েছে story :-)

— রবিজি

11

নিম্নলিখিত বিবরণটি এই পৃষ্ঠা থেকে নেওয়া হয়েছে :

GetElementsByClassName () পদ্ধতিটি নোডলিস্ট অবজেক্ট হিসাবে নির্দিষ্ট শ্রেণীর নাম সহ নথিতে সমস্ত উপাদানের একটি સંગ્રહ প্রদান করে।

নোডলিস্ট অবজেক্ট নোডগুলির সংকলন উপস্থাপন করে। নোডগুলি সূচক সংখ্যা দ্বারা অ্যাক্সেস করা যায়। সূচকটি 0 থেকে শুরু হয়।

টিপ: নির্দিষ্ট শ্রেণীর নামের সাথে উপাদানের সংখ্যা নির্ধারণ করতে আপনি নোডলিস্ট অবজেক্টের দৈর্ঘ্যের বৈশিষ্ট্যটি ব্যবহার করতে পারেন, তারপরে আপনি সমস্ত উপাদানগুলির মধ্য দিয়ে লুপ করতে পারেন এবং আপনার পছন্দসই তথ্যটি বের করতে পারেন।

সুতরাং, পরামিতি হিসাবে getElementsByClassNameএকটি শ্রেণীর নাম গ্রহণ করবে।

এটি যদি আপনার এইচটিএমএল বডি হয়:

<div id="first" class="menuItem"></div>
<div id="second" class="menuItem"></div>
<div id="third" class="menuItem"></div>
<div id="footer"></div>

তারপর var menuItems = document.getElementsByClassName('menuItem')3 উপরের একটি সংগ্রহ নেই (কোনো অ্যারে) ফিরে আসবে <div>গুলি, তারা দেওয়া বর্গ নাম মেলে না।

তারপরে আপনি এই নোডগুলি ( <div>এই ক্ষেত্রে এর) সংকলনটির মাধ্যমে পুনরাবৃত্তি করতে পারেন :

for (var menuItemIndex = 0 ; menuItems.length ; menuItemIndex ++) {
   var currentMenuItem = menuItems[menuItemIndex];
   // do stuff with currentMenuItem as a node.
}

পড়ুন দয়া করে এই পোস্টে উপাদান এবং নোড মধ্যে পার্থক্য সম্পর্কে আরো জানার জন্য।

— remdevtec
সূত্র

11

ES6 উপলব্ধ Array.from()পদ্ধতি, যা একটি অ্যারের মত বা iterable বস্তুর থেকে একটি নতুন অ্যারে উদাহরণস্বরূপ সৃষ্টি করে।

let boxes = document.getElementsByClassName('box');

Array.from(boxes).forEach(v => v.style.background = 'green');
console.log(Array.from(boxes));

.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: blue;
  display: inline-block;
}

<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

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

আপনি কোড স্নিপেটের ভিতরে দেখতে পাচ্ছেন, Array.from()ফাংশনটি ব্যবহারের পরে আপনি প্রতিটি উপাদানের উপর ম্যানিপুলেট করতে সক্ষম হবেন।

একই সমাধান ব্যবহার করে jQuery।

$('.box').css({'background':'green'});

.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: blue;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

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

— সদয় ব্যবহারকারী
সূত্র

7

অন্যান্য শব্দে

document.querySelector()নির্দিষ্ট নির্বাচকটির কেবলমাত্র প্রথম এক উপাদান নির্বাচন করে। সুতরাং এটি একটি অ্যারের আউট ছিটান না, এটি একটি একক মান। অনুরূপ document.getElementById()যা শুধুমাত্র আইডি-উপাদান নিয়ে আসে, যেহেতু ID- র অনন্য হতে হবে।
document.querySelectorAll()নির্দিষ্ট নির্বাচক সহ সমস্ত উপাদান নির্বাচন করে এবং একটি অ্যারেতে ফেরত দেয় returns শুধুমাত্র document.getElementsByClassName()ক্লাস এবং document.getElementsByTagName()ট্যাগগুলির জন্য অনুরূপ ।

কেন অনুসন্ধানকারী নির্বাচন?

এটি কেবল স্বাচ্ছন্দ্য এবং সংকোচনের একমাত্র উদ্দেশ্যে ব্যবহৃত হয়।

কেন getElement / sBy ব্যবহার করবেন? *

দ্রুত পারফরম্যান্স।

এই পারফরম্যান্সের পার্থক্য কেন?

উভয় নির্বাচনের উপায়ের আরও ব্যবহারের জন্য নোডলিস্ট তৈরি করার উদ্দেশ্য রয়েছে । ক্যোয়ারী নির্বাচনকারীরা নির্বাচকদের সাথে একটি স্ট্যাটিক নোডলিস্ট তৈরি করে সুতরাং এটি প্রথমে স্ক্র্যাচ থেকে তৈরি করা আবশ্যক।
getElement / sBy * তাত্ক্ষণিকভাবে বর্তমান ডিওএম এর বিদ্যমান লাইভ নোডলিস্টকে মানিয়ে নেয়।

সুতরাং, কখন আপনার / আপনার প্রকল্প / আপনার ডিভাইসের উপর নির্ভর করে কোন পদ্ধতিটি ব্যবহার করবেন।

infos

সমস্ত পদ্ধতির ডেমো
নোডলিস্ট ডকুমেন্টেশন
পারফরম্যান্স টেস্ট

— Thielicious
সূত্র

4

এটি অ্যারের মতো তালিকা প্রদান করে।

আপনি উদাহরণ হিসাবে একটি অ্যারে করা

var el = getElementsByClassName("elem");
el = Array.prototype.slice.call(el); //this line
el[0].appendChild(otherElem);

— localhoost
সূত্র

4

আপনি চালিয়ে একটি একক উপাদান পেতে পারে

document.querySelector('.myElement').style.size = '100px';

কিন্তু এটি ক্লাসের সাথে প্রথম উপাদানটির জন্য কাজ করতে চলেছে my

আপনি যদি শ্রেণীর সাথে সমস্ত উপাদানগুলির জন্য এটি প্রয়োগ করতে চান তবে আমি আপনাকে ব্যবহার করার পরামর্শ দিই

document.querySelectorAll('.myElement').forEach(function(element) {
    element.style.size = '100px';
});

— সার্জি
সূত্র

4

/*
 * To hide all elements with the same class, 
 * use looping to reach each element with that class. 
 * In this case, looping is done recursively
 */

const hideAll = (className, i=0) => {
if(!document.getElementsByClassName(className)[i]){ //exits the loop when element of that id does not exist
  return; 
}

document.getElementsByClassName(className)[i].style.visibility = 'hidden'; //hide element
return hideAll(className, i+1) //loop for the next element
}

hideAll('appBanner') //the function call requires the class name

— ইরিনা মিতুগোভা
সূত্র

0

ES5 + (আজকাল যে কোনও ব্রাউজ করা - 2017) এর সাথে আপনার করা উচিত

[].forEach.call(document.getElementsByClassName('answer'), function(el) {
    el.style.color= 'red';
});

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

— মাতাস ভাইটকেভিচিয়াস
সূত্র

0

ড্রেঞ্জির নির্দিষ্ট মামলার একটি উত্তর ...

আপনি এমন একটি ফাংশনword তৈরি করতে পারেন যা যে কোনও উপাদানগুলির জন্য কাজ করবে এবং আপনি যে রূপান্তর করতে চান তার সংখ্যায় পাস করবে, যেমন:

// Binds `wordButtons` to an (array-like) HTMLCollection of buttons
const wordButtons = document.getElementsByClassName("word");

// Applies the `slantWord` function to the first word button
slantWord(1);

// Defines the `slantWord` function
function slantWord(wordNumber) {
  const index = wordNumber - 1; // Collection index is zero-based
  wordButtons[index].style.transform = "rotate(7deg)"; // Transforms the specified button
}

<div class="wordGameContainer">
  <button class="word word1">WORD 1</button>
  <button class="word word2">WORD 2</button>
  <button class="word word3">WORD 3</button>
  <button class="word word4">WORD 4</button>
</div>

<div>
  <button onclick="moveWord()" class="playButton">PLAY</button>
</div>

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

— বিড়াল
সূত্র