GetElementsByClassName থেকে "অ্যারেটার: অপরিবর্তিত কোনও ফাংশন নয়" - এ ফলাফলের জন্য অ্যারের উপর অ্যারের জন্য প্রতিটি ব্যবহার করা হয়

ইন আমার JSFiddle , আমি কেবল উপাদানের একটি অ্যারের উপর বারবার চেষ্টা করছি। লগ বিবৃতি প্রমাণ হিসাবে অ্যারেটি খালি নয়। তবুও forEachআমাকে কলটি (এতটা সহায়ক নয়) "অব্যাহত TypeError: undefinedকোনও ফাংশন নয়" ত্রুটি দেয়।

আমি অবশ্যই বোকা কিছু করছি; আমি কি ভুল করছি?

আমার কোড:

var arr = document.getElementsByClassName('myClass');
console.log(arr);
console.log(arr[0]);
arr.forEach(function(v, i, a) {
  console.log(v);
});

.myClass {
  background-color: #FF0000;
}

<div class="myClass">Hello</div>

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

javascript foreach

— জের
সূত্র

arrএকটি অ্যারে নয়, তবে একটি HTMLCollection। এটিতে অ্যারের মতো একই পদ্ধতি নেই। বিকাশকারী.মোজিলা.আর । এটি সম্পর্কে এখানে একটি এসও পোস্টও রয়েছে: stackoverflow.com/questions/13433799/…

— আয়ান

কিছু ভালো আছে [1,2,3].forEach(function(v,i,a) { console.log(v); });। আমার উদাহরণে এই এবং অ্যারের মধ্যে পার্থক্য কী?

— জের

আপনি না একটি আছে অ্যারের আপনার উদাহরণে। আপনাকে কী মনে হয় এটি অ্যারে?

— আয়ান

@ জার: arr instanceof Arrayফলাফল হিসাবে falseএটি Arrayবস্তুর কোনও প্রোটোটাইপ পদ্ধতি যেমন অ্যারে.প্রোটোটাইপ.অফচার () এর ব্যবহার করতে পারে না । arrএকটি হল HTMLCollection এবং বস্তুর মত একটি অ্যারের (কিন্তু বা instantiate থেকে উত্তরাধিকারী নেই Array)। সুতরাং আপনার স্ট্যান্ডার্ড forলুপটি কেবলমাত্র বস্তুর সূচকের মাধ্যমে পুনরাবৃত্তি হিসাবে কাজ করবে এবং এর প্রোটোটাইপ নয় Array।

— না,

@ জের — আপনার অন্তর্নির্মিত host এবং হোস্ট অবজেক্টের মধ্যে পার্থক্য সন্ধান করা উচিত। প্রাক্তন ECMA-262 এর সাথে সামঞ্জস্য হয়, পরে কেবলমাত্র হোস্টের ইচ্ছায়। করে DOM অনেক বস্তু যা ইনডেক্স (document.images, document.forms, form.elements, select.options, ইত্যাদি), বেশিরভাগ উপর ভিত্তি করে সদস্যদের অ্যাক্সেস মঞ্জুর হয়েছে NodeList ইন্টারফেস ।

— রবজি

উত্তর:

164

এটা এ কারণে যে এর document.getElementsByClassNameআয় একটি HTMLCollection না একটি অ্যারের।

ভাগ্যক্রমে এটি একটি "অ্যারে-জাতীয়" অবজেক্ট (এটি ব্যাখ্যা করে যে এটি কেন লগ-ইন করা হয়েছে এবং কেন আপনি একটি আদর্শ forলুপ দিয়ে পুনরাবৃত্তি করতে পারেন ), সুতরাং আপনি এটি করতে পারেন:

[].forEach.call(document.getElementsByClassName('myClass'), function(v,i,a) {

ES6 (আধুনিক ব্রাউজারগুলিতে বা ব্যাবেল সহ) এর সাহায্যে আপনি ব্যবহার করতে পারেন Array.fromযা অ্যারের মতো বস্তু থেকে অ্যারে তৈরি করে:

Array.from(document.getElementsByClassName('myClass')).forEach(v=>{

বা অ্যারের মতো অ্যারের মতো বস্তুটি ছড়িয়ে দিন:

[...document.getElementsByClassName('myClass'))].forEach(v=>{

— সাগুরেটকে অস্বীকার করেন
সূত্র

@ জের argumentsএকটি। jQuery অবজেক্টস অন্য। আপনি var a = {"0": "str1", "1": "str2", length: 2}

— আয়ান

এখানে আমরা আবার পুরানো ব্রাউজারগুলির সাথে যাচ্ছি ... একটি স্থানীয় পদ্ধতিতে একটি হোস্ট অবজেক্টটি পাস করা IE 8 এবং নিম্নে ব্যর্থ হবে। হয়তো কেউ পাত্তা দিচ্ছে না, তবে কেউ কেউ পারে। ;-) ওহ, এটি এলিটামাইওয়াই ক্লাসনামটি সমর্থন করে না , তবে querySelectorAll('.myClass')এটি কাজ করা উচিত। আমি এখনও পুনরাবৃত্তির নোডলিস্ট এপিআইতে যুক্ত হওয়ার অপেক্ষায় রয়েছি। :-(

— রবজি

@ জের: সাইড-নোট হিসাবে যদি আপনি কোনও কারণে লুপটি সরিয়ে ফেলতে চান তবে আপনাকে এটি করতে Array.prototype.forEachদেবেন না। আপনার যদি সেই প্রয়োজনীয়তা পরে forথাকে তবে স্ট্যান্ডার্ড লুপ ব্যবহার করেন বা আপনি অ্যারে অবজেক্ট ব্যবহার করতে চান Array.prototype.everyবা Array.prototype.some(যদিও প্রত্যেকে / কেউ আইই 8 বা তার চেয়ে কম সমর্থিত নয়)

— নোট করুন

@ আইয়ানটি আপনাকে "অ্যারে-মত" হওয়ার জন্য স্প্লাইস প্রয়োজন। লগগুলি এখানে তুলনা করুন: jsbin.com/sigut/1/edit

— Denys

@ আইয়ান টিবিএইচ "অ্যারে-জাতীয়" এর সংজ্ঞাটি খুব ঝাপসা এবং ব্যবহারের উপর নির্ভর করে। মাঝে মাঝে আমি অন্তর্ভুক্ত নয় spliceযে সংজ্ঞা কিন্তু যখন আমি আরো "অ্যারে-মত" হতে চান ব্যবহার করতে পাবে map, filter, ইত্যাদি, তারপর আমি তা অন্তর্ভুক্ত করুন। সাধারণ পুনরাবৃত্তির ব্যবহারের forEachপ্রয়োজন নেই splice।

— সাগ্রেरेट

এটি কাজ করা উচিত এটি চেষ্টা করুন:

<html>
  <head>
    <style type="text/css">
    </style>
  </head>
  <body>
   <div class="myClass">Hello</div>
   <div class="myClass">Hello</div>

<script type="text/javascript">
    var arr = document.getElementsByClassName('myClass');
    console.log(arr);
    console.log(arr[0]);
    arr = [].slice.call(arr); //I have converted the HTML Collection an array
    arr.forEach(function(v,i,a) {
        console.log(v);
    });
</script>


<style type="text/css">
    .myClass {
    background-color: #FF0000;
}
</style>

  </body>
</html>

— বৈভব জৈন
সূত্র

আপনি যদি নির্দিষ্ট শ্রেণীর প্রতিটি উপাদানটির আইডি অ্যাক্সেস করতে চান তবে আপনি নিম্নলিখিতটি করতে পারেন:

    Array.from(document.getElementsByClassName('myClass')).forEach(function(element) {
        console.log(element.id);
    });

— নেলস
সূত্র