getAttribute () বনাম এলিমেন্টের বৈশিষ্ট্যগুলি?

Question

মত প্রকাশ Element.getAttribute("id")এবং Element.idএকই জিনিস ফিরে।

যখন আমাদের এইচটিএমলেমেন্ট অবজেক্টের বৈশিষ্ট্য প্রয়োজন তখন কোনটি ব্যবহার করা উচিত?

getAttribute()এবং এই পদ্ধতিগুলির সাথে কোনও ক্রস ব্রাউজারের সমস্যা আছে কি setAttribute()?

অথবা এই অ্যাট্রিবিউট পদ্ধতিগুলি ব্যবহার করে সরাসরি বস্তু বৈশিষ্ট্য অ্যাক্সেসের মধ্যে পারফরম্যান্সের কোনও প্রভাব আছে?

Comments

অনুরূপ প্রশ্ন: এইচটিএমএলতে সম্পত্তি এবং বৈশিষ্ট্য

— স্লেজক

Answer 1

getAttributeআহরণ অ্যাট্রিবিউট একটি DOM উপাদান সময়, el.idআহরণ সম্পত্তি এই DOM উপাদান আছে। তারা একই নয়।

বেশিরভাগ সময়, ডিওএম বৈশিষ্ট্যগুলি বৈশিষ্ট্যের সাথে সিঙ্ক্রোনাইজ করা হয়।

তবে সিঙ্ক্রোনাইজেশন একই মানের গ্যারান্টি দেয় না । একটি ক্লাসিক উদাহরণ একটি অ্যাঙ্কর উপাদান এর মধ্যে el.hrefএবং el.getAttribute('href')জন্য।

উদাহরণ স্বরূপ:

<a href="/" id="hey"></a>
<script>
var a = document.getElementById('hey')
a.getAttribute('href') // "/"
a.href // Full URL except for IE that keeps '/'
</script>

এই আচরণটি ঘটে কারণ ডাব্লু 3 সি অনুসারে , href সম্পত্তিটি অবশ্যই একটি সুসংহত লিঙ্ক হওয়া উচিত। বেশিরভাগ ব্রাউজার এই মানটিকে সম্মান করে (অনুমান করেন না কে?)

inputএর checkedসম্পত্তি সম্পর্কে আরও একটি মামলা রয়েছে । করে DOM সম্পত্তি আয় trueবা falseঅ্যাট্রিবিউট স্ট্রিং ফেরৎ যখন "checked"বা একটি খালি স্ট্রিং।

এবং তারপরে, এমন কিছু বৈশিষ্ট্য রয়েছে যা কেবলমাত্র একমুখী সিঙ্ক্রোনাইজ করা হয় । সর্বোত্তম উদাহরণ হ'ল valueএকটি inputউপাদানটির সম্পত্তি । DOM বৈশিষ্ট্যের মাধ্যমে এর মান পরিবর্তন করা বৈশিষ্ট্য পরিবর্তন করবে না (সম্পাদনা করুন: আরও নির্ভুলতার জন্য প্রথম মন্তব্যটি পরীক্ষা করুন)।

এই কারণগুলির কারণে, আমি আপনাকে পরামর্শ দিচ্ছি যে আপনি DOM বৈশিষ্ট্যগুলি ব্যবহার করুন , বৈশিষ্ট্যগুলি নয়, কারণ ব্রাউজারগুলির মধ্যে তাদের আচরণের পার্থক্য রয়েছে।

বাস্তবে, কেবলমাত্র দুটি ক্ষেত্রেই আপনাকে বৈশিষ্ট্যগুলি ব্যবহার করতে হবে:

1. একটি কাস্টম এইচটিএমএল বৈশিষ্ট্য, কারণ এটি কোনও ডিওএম বৈশিষ্ট্যের সাথে সিঙ্ক হয় না।
2. কোনও অন্তর্নির্মিত এইচটিএমএল অ্যাট্রিবিউট অ্যাক্সেস করতে, যা সম্পত্তি থেকে সিঙ্ক হয় না এবং আপনি নিশ্চিত হন যে আপনাকে এট্রিবিউটটি প্রয়োজন (উদাহরণস্বরূপ, valueকোনও inputউপাদানটির মূল )।

আপনি যদি আরও বিশদ ব্যাখ্যা চান তবে আমি দৃ strongly়ভাবে আপনাকে এই পৃষ্ঠাটি পড়ার পরামর্শ দিচ্ছি । এটি আপনাকে কয়েক মিনিট সময় নেবে তবে আপনি তথ্যের দ্বারা আনন্দিত হবেন (যা আমি এখানে সংক্ষেপে বলেছি))

Comments

সাধারণত ভাল পরামর্শের জন্য +1। সিঙ্ক্রোনাইজেশন জিনিসটি যদিও সামান্য বন্ধ: কোনও ইনপুটটির valueসম্পত্তি গুণাবলীর কাছ থেকে এর প্রাথমিক মান পায় তবে অন্যথায় এটি কোনওভাবে আবদ্ধ হয় না। valueঅ্যাট্রিবিউট সম্পূর্ণরূপে পরিবর্তে সাথে সিঙ্ক্রোনাইজ করা defaultValueসম্পত্তি। তেমনি checkedএবং defaultChecked। পুরানো IE (<= 7 এবং পরে সামঞ্জস্যতা মোড) ব্যতীত, যা ভেঙে গেছে getAttribute()এবং setAttribute()।

— টিম ডাউন

"আরও ব্যাখ্যা" হিসাবে আপনার মন্তব্য যুক্ত করেছে :-)

— ফ্লোরিয়ান মার্জাইন

আমি মনে করি আপনি প্রথম উদাহরণটি ভুল পেয়েছেন। a.hrefসম্পূর্ণ ইউআরএল প্রদান করে, a.getAttribute("href")এইচটিএমএল উত্সে ডিফেন্ড হিসাবে ঠিক মতো বৈশিষ্ট্যটি প্রদান করে।

— সালমান

যদি আপনি মানটি ডিফল্ট না হয় তা নির্ধারণের চেষ্টা করছেন, আপনি গুণাবলী ব্যবহার করা ভাল। অনেক আধুনিক ব্রাউজার একটি ডিফল্ট মান (উদাঃ input.formAction) বা খালি স্ট্রিং (উদাঃ a.download) ফিরিয়ে দেবে , যা বিষয়গুলিকে দ্বিধাগ্রস্ত করে তোলে। একমাত্র ব্যতিক্রম হ'ল মানগুলি যা দ্বি-মুখী সিঙ্ক হয় না, যেমন value।

— কেভিন লি

আইডিকে ডোমে একেবারে সেট না করা থাকলে getAttribute নਾਲ এবং উপাদান ফিরে আসবে। একটি খালি স্ট্রিং ফিরে আসবে। এটা কি স্ট্যান্ডার্ড?

— ম্যাকিয়েজ ক্রাভজাইক

Answer 2

getAttribute('attribute') পৃষ্ঠার এইচটিএমএল উত্সে ঠিক যেমন সংজ্ঞায়িত করা হয় তেমন বৈশিষ্ট্যটির মান সাধারণত স্ট্রিং হিসাবে প্রদান করে।

তবে, element.attributeগুনটির একটি সাধারণ বা গণনা করা মান ফেরত দিতে পারে। উদাহরণ:

• <a href="https://stackoverflow.com/foo"></a>
  • a.href সম্পূর্ণ URL থাকবে
• <input type="checkbox" checked>
  • ইনপুট.চেকডটি সত্য হবে (বুলিয়ান)
• <input type="checkbox" checked="bleh">
  • ইনপুট.চেকডটি সত্য হবে (বুলিয়ান)
• <img src='http://dummyimage.com/64x64/000/fff'>
  • চিত্রটি লোড হওয়ার আগে img.width হবে 0 (সংখ্যা)
  • চিত্র (বা এর প্রথম কয়েকটি বাইট) লোড করা হলে img.width হবে 64 (সংখ্যা)
• <img src='http://dummyimage.com/64x64/000/fff' width="50%">
  • img.width গণনা করা হবে 50%
• <img src='http://dummyimage.com/32x32/000/fff' style='width: 50px'>
  • img.width হবে 50 (সংখ্যা)
• <div style='background: lime;'></div>
  • Div.style একটি অবজেক্ট হবে

Answer 3

এই jscreen অনুযায়ী সম্পত্তি সম্পত্তি getAttributeচেয়ে ধীর id।

পুনশ্চ

অদ্ভুতভাবে যথেষ্ট উভয় বিবৃতি আইই 8 (অন্যান্য ব্রাউজারগুলির তুলনায়) এর উপর খুব খারাপ কাজ করে।

Answer 4

আপনার কাছে নির্দিষ্ট কারণ না থাকলে সর্বদা বৈশিষ্ট্যগুলি ব্যবহার করুন।

• getAttribute()এবং setAttribute()পুরানো IE (এবং পরবর্তী সংস্করণে সামঞ্জস্যতা মোড) এ ভাঙা হয়েছে
• বৈশিষ্ট্যগুলি আরও সুবিধাজনক (বিশেষত, বুলিয়ান বৈশিষ্ট্যের সাথে সম্পর্কিত)

আছে কিছু ব্যতিক্রম :

• <form>উপাদান বৈশিষ্ট্য অ্যাক্সেস
• কাস্টম বৈশিষ্ট্য অ্যাক্সেস (যদিও আমি কাস্টম বৈশিষ্ট্যগুলি ব্যবহার করে নিরুৎসাহিত করব)

আমি এই বিষয়ে কয়েকবার এসও-তে লিখেছি:

• https://stackoverflow.com/a/7010268/96100
• https://stackoverflow.com/a/4456805/96100

Comments

আইই 8 এর পূর্বে বৈশিষ্ট্য এবং বৈশিষ্ট্যগুলি একইরকম আচরণ করা হয়েছিল । আপনি যেমন পূর্বে ইঙ্গিত করেছেন, সম্পত্তিগুলি হ'ল উপায়।

@ ম্যাটম্যাকডোনাল্ড: হ্যাঁ, এটাই সেই ব্রেক্সিট যা আমি ইঙ্গিত করেছিলাম। আমি এই উত্তরে এর প্রসারিত করিনি কারণ আমি অনুভব করেছি যে আমি যুক্ত অন্যান্য উত্তরগুলিতে আমি এতটা যথেষ্ট করেছি :)

— টিম ডাউন

Answer 5

.idফাংশন কল ওভারহেড সংরক্ষণ করে। (যা খুব ছোট, তবে আপনি জিজ্ঞাসা করেছেন))

Comments

হাই জিডোরন, কেবল কৌতূহলের খাতিরে: আমি এর একটি 'অফিসিয়াল' ব্যাখ্যা খুঁজে পাওয়ার চেষ্টা করেছি (এম্পিরিকাল পরীক্ষার বাইরে, যা যথেষ্ট স্পষ্ট;)) তবে কোনও সাফল্যই পেল না। এটি সম্পর্কে আপনার কোনও লিঙ্ক আছে?

— মামু

Answer 6

এটি সম্পূর্ণরূপে বুঝতে নীচের উদাহরণের চেষ্টা করুন। নীচের ডিআইভির জন্য

<div class="myclass"></div>

Element.getAttribute('class')ফিরে আসবে myclassকিন্তু আপনি ব্যবহার করতে হবে Element.classNameযার ফলে এটি করে DOM সম্পত্তি থেকে প্রাপ্ত করে।

Answer 7

এমন একটি ক্ষেত্র যেখানে বৈশিষ্ট্যগুলির উপর ভিত্তি করে CSS স্টাইলিং রয়েছে this

নিম্নোক্ত বিবেচনা কর:

const divs = document.querySelectorAll('div');

divs[1].custom = true;
divs[2].setAttribute('custom', true);

div {
  border: 1px solid;
  margin-bottom: 8px;
}

div[custom] {
  background: #36a;
  color: #fff;
}

<div>A normal div</div>
<div>A div with a custom property set directly.</div>
<div>A div with a custom attribute set with `setAttribute`</div>

কাস্টম সম্পত্তি সেট সহ ডিভ সরাসরি গুণকের মান প্রতিফলিত করে না, এবং সিএসএসে আমাদের বৈশিষ্ট্য নির্বাচক ( div[custom]) দ্বারা নির্বাচিত হয় না ।

কাস্টম অ্যাট্রিবিউট সেট ব্যবহার করে ডিভিও setAttribute, তবে, সিএসএস অ্যাট্রিবিউট সিলেক্টর ব্যবহার করে নির্বাচিত হতে সক্ষম, এবং সেই অনুসারে স্টাইলড।