আইডিস সহ ডোম গাছের উপাদানগুলি কী বিশ্বব্যাপী পরিবর্তনশীল হয়?


364

একটি সাধারণ এইচটিএমলেমেন্ট র‌্যাপারের জন্য একটি ধারণার উপরে কাজ করে আমি ইন্টারনেট এক্সপ্লোরার এবং ক্রোমের জন্য নিম্নলিখিতগুলি হোঁচট খেয়েছি :

ডিওএম ট্রিতে আইডি সহ প্রদত্ত এইচটিএমলেমেন্টের জন্য, ভেরিয়েবলের নাম হিসাবে আইডি ব্যবহার করে ডিভিটি পুনরুদ্ধার করা সম্ভব। একটি ডিভ মত

<div id="example">some text</div>

মধ্যে ইন্টারনেট এক্সপ্লোরার 8 এবং Chrome আপনি কি করতে পারেন:

alert(example.innerHTML); //=> 'some text'

অথবা

alert(window['example'].innerHTML); //=> 'some text'

সুতরাং, এর অর্থ কি ডিওএম গাছের প্রতিটি উপাদান বিশ্বব্যাপী নেমস্পেসে পরিবর্তনশীল রূপান্তরিত হবে? এবং এর মানে কি এই যে getElementByIdএই ব্রাউজারগুলিতে পদ্ধতির প্রতিস্থাপন হিসাবে কেউ এটি ব্যবহার করতে পারে ?



1
@ বেরগি, মন্তব্যটি যা এটি না করে এখন তা পুরানো এবং এমনকি অবৈধ। অতএব, এই বৈশিষ্ট্যটি ব্যবহার না করার জন্য আমি কোনও ठोस কারণ খুঁজে পাচ্ছি না।
ESR

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

1
@ বেরগি যথেষ্ট ন্যায্য, আপনি ঠিক বলেছেন। আমি এখনও মনে করি এটি যদিও সত্যিই ঝরঝরে বৈশিষ্ট্যযুক্ত তবে এটি কেবল সমস্যাযুক্ত হিসাবে বিবেচিত হয় কারণ লোকেরা এটি সম্পর্কে অবগত নয়। এটি ব্যবহার করে আমি এইভাবেই
ইএসআর

@ এডমন্ডআরইড যদি আপনি সঠিকভাবে বিষয়বস্তু এবং যুক্তিবিজ্ঞান আলাদা না করেন তবে এটি কম সমস্যাযুক্ত। এছাড়াও আমি কখনই ইনলাইন ইভেন্ট হ্যান্ডলারগুলি ব্যবহার না করা বা ডোম উপাদানগুলিকে নেমস্পেস হিসাবে গালি দেওয়া নিয়ে কাস্টম পদ্ধতিগুলি ইনস্টল করার পরামর্শ দিই না (লক্ষ্য করুন এটি কোনও "সুযোগ" নয়)।
বার্গি

উত্তর:


395

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

আইই windowবস্তুর বৈশিষ্ট্য হিসাবে নামযুক্ত উপাদানগুলি যুক্ত করে পরিস্থিতি আরও খারাপ করেছে । এটি দ্বিগুণভাবে খারাপ যে এখন আপনাকে যে কোনও সদস্য documentবা windowআপনার (বা আপনার প্রকল্পের কোনও লাইব্রেরি কোড) যে কোনও সদস্য ব্যবহার করতে চাইতে পারেন তার পরেও আপনার উপাদানগুলির নামকরণ এড়াতে হবে।

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

varএটিকে সাধারণত বাদ দেওয়া যেমন খারাপ অনুশীলন windowহিসাবে বিবেচিত হয় তেমনি বিশ্বব্যাপী বা প্রদর্শিত হিসাবে নামযুক্ত উপাদানগুলির উপর নির্ভর করা । বিদ্ধ করা document.getElementById, যা আরো ব্যাপকভাবে সমর্থিত এবং কম দ্ব্যর্থক। আপনি যদি টাইপিং পছন্দ না করেন তবে একটি সংক্ষিপ্ত নামের সাথে তুচ্ছ র‍্যাপার ফাংশন লিখতে পারেন। যেভাবেই হোক, আইডি-টু-এলিমেন্ট লুচ ক্যাশে ব্যবহার করার কোনও অর্থ নেই, কারণ ব্রাউজারগুলি সাধারণত getElementByIdযেভাবেই তত দ্রুত অনুসন্ধান ব্যবহার করার জন্য কলটি অনুকূলিত করে ; উপাদানগুলি idদস্তাবেজ থেকে পরিবর্তন করা বা যুক্ত করা / সরিয়ে ফেলা হলে আপনি যা কিছু পান তা সমস্যা ।

অপেরা কপি ইন্টারনেট, তারপর যোগদান WebKit, এবং নামে উপাদান নির্বাণ এখন উভয় পূর্ববর্তী unstandardised অনুশীলন documentবৈশিষ্ট্য, এবং তাদের উপর স্থাপন এর পূর্বে-আই ই কেবল-অনুশীলন windowকরছে হচ্ছে আদর্শায়িত HTML5 এর, যার পদ্ধতির দস্তাবেজে এবং প্রতি প্রমিত দ্বারা ব্রাউজার লেখকরা তাদেরকে চিরতরে ওয়েবের অংশ হিসাবে বানিয়ে ভয়ানক অনুশীলন আমাদের উপর চাপিয়ে দিয়েছিল। সুতরাং ফায়ারফক্স 4 এটি সমর্থন করবে।

'নামকরণকারী উপাদানগুলি' কী কী? কোনওর সাথে যে কোনও idকিছুই, এবং name'সনাক্তকরণ' উদ্দেশ্যে ব্যবহৃত হচ্ছে এমন কিছু যা : ফর্ম, চিত্র, অ্যাঙ্কর এবং কয়েকটি অন্যান্য, তবে কোনও nameবৈশিষ্ট্যের অন্যান্য সম্পর্কিত নয় , যেমন ফর্ম ইনপুট ক্ষেত্রে নিয়ন্ত্রণ-নাম, প্যারামিটারের নামগুলি <param>অথবা মেটাডেটা টাইপ করুন <meta>। 'সনাক্তকরণগুলি nameসেগুলির পক্ষে যা এড়ানো উচিতid


5
এটি একটি পরিষ্কার উত্তর, ধন্যবাদ। ডকুমেন্ট.টিগমেন্ট এলবাইআইডি বাদ দেওয়া আমার ধারণা ছিল না (ভাল, আসলে আমি আজকাল উপাদানগুলি / উপাদানগুলির সন্ধান করতে যেখানে এক্সপথ ব্যবহার করি)। নামযুক্ত আইটেমগুলির জন্য আমি এই (খারাপ) অনুশীলনকে হোঁচট খেয়েছি এবং কোথা থেকে এসেছে তা সম্পর্কে আগ্রহী। আপনি জোর দিয়ে যথেষ্ট উত্তর দিয়েছেন; এখন আমরা জানি কেন এটি ক্রোমে (ওয়েবকিট) পাওয়া যায়।
KooiInc

18
"এর ব্যবহার nameএড়ানো উচিত " এর একটি ব্যতিক্রম রয়েছে <input>, যেখানে nameবৈশিষ্ট্যটি ফর্ম জমা দেওয়ার জন্য কী-মান জোড়ার কী তৈরিতে গুরুত্বপূর্ণ ভূমিকা পালন করে।
ইয়াহেল

7
এফওয়াইআই ফায়ারফক্স কেবল কুইর্কস মোডে রাখলে এটি করে।
ক্রিসেন্ট টাটকা

4
@ অহেল্যাক: এটাই আমি পার্থক্য করছি। " nameফর্ম ইনপুট ক্ষেত্রগুলিতে নিয়ন্ত্রণের নামগুলির মতো অন্য ব্যবহারগুলি নয় ..."
বোবিনস

13
কেন !? এই উন্মাদনা থামাতে কি আমরা কিছু করতে পারি? আমার ক্রিয়াকলাপগুলি উপাদানগুলির রেফারেন্স দ্বারা পুনরায় সংজ্ঞায়িত হয়েছিল এবং আমার ডিবাগ করতে এক ঘন্টা সময় নিয়েছিল। :(
ফারহহর

52

পূর্বের উত্তরে উল্লিখিত হিসাবে এই আচরণটি উইন্ডো অবজেক্টে নাম অ্যাক্সেস হিসাবে পরিচিত । এর মান nameকিছু উপাদানের জন্য অ্যাট্রিবিউটে মান idসব উপাদান জন্য গুণাবলীর বিশ্বব্যাপী বৈশিষ্ট্য হিসাবে উপলব্ধ করা হয় windowঅবজেক্ট। এগুলি নামী উপাদান হিসাবে পরিচিত। যেহেতু windowব্রাউজারে বিশ্বব্যাপী অবজেক্ট তাই প্রতিটি নামক উপাদান বৈশ্বিক চলক হিসাবে অ্যাক্সেসযোগ্য হবে।

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

তবে, ফায়ারফক্স ১৪ অনুসারে, ফায়ারফক্স এখনwindow স্ট্যান্ডার্ড মোডেও নামটির অ্যাক্সেস সমর্থন করে । কেন তারা এটিকে বদলেছে? দেখা যাচ্ছে যে এখনও অনেকগুলি সাইট মানক মোডে এই কার্যকারিতার উপর নির্ভর করে। মাইক্রোসফ্ট এমনকি এমন একটি বিপণন ডেমো প্রকাশ করেছিল যা ফায়ারফক্সে ডেমোকে কাজ করা থেকে বিরত করে।

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

সুতরাং… উন্মাদ বলে মনে হচ্ছে এই আচরণটি এখন স্ট্যান্ডার্ড মোডে সমস্ত বড় ব্রাউজারের সর্বশেষতম সংস্করণে ব্যবহার করা প্রযুক্তিগতভাবে নিরাপদ । নামযুক্ত অ্যাক্সেসটি কিছুটা সুবিধাজনক বলে মনে হলেও এটি ব্যবহার করা উচিত নয়

কেন? বিশ্বব্যাপী ভেরিয়েবলগুলি খারাপ কেন এই প্রবন্ধে প্রচুর যুক্তি সংক্ষিপ্ত করা যেতে পারে । সরল কথায় বলতে গেলে, অতিরিক্ত গ্লোবাল ভেরিয়েবলগুলির একগুচ্ছ থাকা আরও বাগের দিকে নিয়ে যায়। ধরা যাক আপনি দুর্ঘটনাক্রমে একটি এর নাম টাইপ করুন এবং একটি varটাইপ করতে ঘটবেid কোনও ডোম নোড , সারপ্রাইস!

অতিরিক্তভাবে, মানীকৃত হওয়া সত্ত্বেও ব্রাউজারের নামযুক্ত অ্যাক্সেসের বাস্তবায়নে এখনও বেশ কয়েকটি বৈষম্য রয়েছে।

  • IE ভুল করে এর মান তোলে name ফর্ম উপাদানগুলির জন্য বৈশিষ্ট্যের অ্যাক্সেসযোগ্য (ইনপুট, নির্বাচন করুন, ইত্যাদি)।
  • গেকো এবং ওয়েবকিট ভুলভাবে <a>ট্যাগগুলির মাধ্যমে ট্যাগগুলিকে অ্যাক্সেসযোগ্য করে নাname বৈশিষ্ট্যের ।
  • গেকো ভুলভাবে একই নামের সাথে একাধিক নামযুক্ত উপাদান পরিচালনা করে (এটি রেফারেন্সের অ্যারের পরিবর্তে একটি নোডের রেফারেন্স দেয়)।

এবং আমি নিশ্চিত আপনি যদি প্রান্তের ক্ষেত্রে নাম অ্যাক্সেস ব্যবহার করার চেষ্টা করেন তবে আরও কিছু আছে।

অন্যান্য উত্তরে উল্লিখিত হিসাবে এর document.getElementByIdদ্বারা কোনও ডোম নোডের রেফারেন্স পেতে ব্যবহার করুন id। আপনি তার দ্বারা একটি নোড একটি রেফারেন্স পেতে প্রয়োজন তাহলে nameবৈশিষ্ট্য ব্যবহার document.querySelectorAll

দয়া করে আপনার সাইটে নামযুক্ত অ্যাক্সেস ব্যবহার করে এই সমস্যাটি প্রচার করবেন না। অনেক ওয়েব বিকাশকারী এই magন্দ্রজালিক আচরণটি সন্ধান করার জন্য সময় নষ্ট করেছেন । স্ট্যান্ডার্ড মোডে নামযুক্ত অ্যাক্সেস বন্ধ করতে আমাদের সত্যই পদক্ষেপ নিতে এবং রেন্ডারিং ইঞ্জিনগুলি নেওয়া দরকার। স্বল্পমেয়াদে এটি কিছু সাইটকে খারাপ কাজ করে ফেলবে তবে দীর্ঘমেয়াদে এটি ওয়েবকে এগিয়ে নিয়ে যেতে সহায়তা করবে।

আপনি যদি আগ্রহী হন তবে আমি আমার ব্লগে এই সম্পর্কে আরও বিস্তারিতভাবে কথা বলতে পারি - https://www.tjvanoll.com/2012/07/19/dom-element-references-as-global-variables/


3
"এটি ব্যবহার করা উচিত নয়" এই অনুমানের জন্য সুস্পষ্ট সতর্কতার জন্য কেবল একটি নোট। এটি হ'ল, "আপনি কোড কাউবয় হয়ে যাবেন তবে এটি ব্যবহার করা উচিত নয়" " কোড কাউবয় কেবল এটির জন্য যান।
জেরেমি ফস্টার

5
@ জেরেমিফোস্টার যদি না "কোড কাউবয়" এর অর্থ এমন কেউ হয় যা খারাপ বিকাশকারী-বন্ধুত্বপূর্ণ প্রয়োগগুলি ব্যবহার করে এবং প্রচার করে তবে আমি দৃ strongly়ভাবে একমত নই।
প্যাট্রিক রবার্টস

2
ভাল কাউবয়ের একটি চিহ্ন হ'ল অনেকেই এতে একমত নন। তবে এখন আমি দার্শনিক কাউবয়ের মতো বা এরকম কিছু।
জেরেমি ফস্টার

আরও লোককে DOM ব্যবহার করার সময় document.querySelectorAllএবং ব্যবহার করা উচিত document.querySelector। এটি ব্যবহারের ভাল পরামর্শের জন্য +1। নির্বাচক দ্বারা উপাদান অ্যাক্সেস অবশ্যই একটি আরও কার্যকর প্রক্রিয়া।
ট্র্যাভিস জে

20

getElementById()এই ক্ষেত্রে আপনার আটকে থাকা উচিত , উদাহরণস্বরূপ:

document.getElementById('example').innerHTML

আইআই উপাদানগুলির সাথে মিশ্রিত করতে পছন্দ করে name এবং ID বিশ্বব্যাপী নেমস্পেসে বৈশিষ্ট্যগুলিকে মিশ্রিত করতে পছন্দ করে , তাই আপনি কী পাওয়ার চেষ্টা করছেন তা স্পষ্ট করে বলা ভাল।


3

হ্যাঁ তারা করে.


নিম্নলিখিত উদাহরণ সহ ক্রোম 55, ফায়ারফক্স 50, আইই 11, আই এজ 14 এবং সাফারি 10 পরীক্ষিত :

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div id="im_not_particularly_happy_with_that">
    Hello World!
  </div>
  <script>
    im_not_particularly_happy_with_that.innerText = 'Hello Internet!';
  </script>
  <!-- Looking at you W3 HTML5 spec group _ -->
</body>
</html>

http://jsbin.com/mahobinopa/edit?html,output


1
অপেরাতেও। তবে আমি মনে করি এই পৃষ্ঠায় প্রকাশিত এই প্রক্রিয়াটির আপত্তিটি খুব ভালভাবে গ্রহণ করা হয়েছে।
ncmathsadist

1

প্রশ্নটি শোনা উচিত :: "প্রদত্ত আইডি সহ এইচটিএমএল ট্যাগগুলি কি বিশ্বব্যাপী অ্যাক্সেসযোগ্য ডোম উপাদানগুলি হয়ে যায়?"

উত্তরটি হল হ্যাঁ!

এইভাবে এটি কাজ করার জন্য বোঝানো হয়েছিল, এবং সে কারণেই ডাব্লু 3 সি দ্বারা আইডি প্রবর্তন করা হয়েছিল: পার্সড স্ক্রিপ্টিং পরিবেশে একটি এইচটিএমএল ট্যাগের আইডি তার সম্পর্কিত ডোম এলিমেন্ট হ্যান্ডেল হয়ে যায়।

তবে নেটস্কেপ মজিলা W3C (তাদের কাছে অনুপ্রবেশকারী) এর সাথে সামঞ্জস্য করতে অস্বীকার করেছিল এবং অনড় আইডির প্রবর্তন দ্বারা ড্রিপ্টিং কার্যকারিতা এবং কোডিং সুবিধার জন্য স্ক্রিপ্টিং কার্যকারিতা এবং কোডিং সুবিধাকে নষ্ট করে দেয় এবং অনড় হয়ে যায়

নেটস্কেপ নেভিগেটরের ৪.7 ফিয়াস্কোর পরে তাদের বিকাশকারীরা সকলেই গিয়ে ডাব্লু 3 সি তে অনুপ্রবেশ করেছিল, অন্যদিকে তাদের সহযোগীরা ভুল অনুশীলন এবং অপব্যবহারের উদাহরণ দিয়ে ওয়েবকে ছাপিয়ে যাচ্ছিল। ইতোমধ্যে আইডি বৈশিষ্ট্যগুলির সাথে সমানভাবে অবজ্ঞাত নাম অ্যাট্রিবিউট [! যা ​​অনন্য বলে বোঝানো হয়নি] ব্যবহার এবং পুনরায় ব্যবহার করার জন্য বাধ্য করা হচ্ছে যাতে নির্দিষ্ট ডিওএম উপাদানগুলির অ্যাক্সেসের জন্য আইডি হ্যান্ডলগুলি ব্যবহার করা স্ক্রিপ্টগুলি কেবল ভেঙে যায়!

এবং বিভক্ত করে ফেললেন যেহেতু তারা লিখেছেন এবং বিস্তৃত কোডিং পাঠ এবং উদাহরণগুলি প্রকাশ করেছেন (তাদের ব্রাউজারটি যেভাবেই স্বীকৃতি জানাতে পারে না) যেমন কমপক্ষে এটিকে অদক্ষ করে তোলার document.all.ElementID.propertyপরিবর্তে ElementID.propertyব্রাউজারটি কেবল এটি ভঙ্গ না করে সেটিকে আরও ওভারহেড দেয় এইচটিএমএল ডোমেনটি (এখন [1996-97], অবহিত) নাম এবং একই টোকেন মান সহ এটি সরবরাহ করে এমন স্ট্যান্ডার্ড আইডি অ্যাট্রিবিউট ব্যবহার করে to

তারা সহজেই - অতীতের - অজানা কোড-রচনাকারী অপ্রতিরোধ্য বাহিনীকে বোঝাতে সক্ষম হয়েছিল যে নাম এবং আইডি ব্যবহারিকভাবে একই, যে আইডি বৈশিষ্ট্যটি সংক্ষিপ্ত এবং তাই বাইট-সঞ্চয় এবং প্রাচীন নাম সম্পত্তি থেকে কোডারের পক্ষে আরও সুবিধাজনক। যা অবশ্যই মিথ্যা ছিল। বা - এইচটিএমএল-এর তাদের প্রকাশিত নিবন্ধগুলিতে, স্ক্রিপ্টিং ইঞ্জিন দ্বারা অ্যাক্সেসযোগ্য হওয়ার জন্য আপনার ট্যাগগুলিতে আপনার নাম এবং আইডি উভয়ই সরবরাহ করতে হবে এমন প্রবন্ধগুলি নিশ্চিত করে।

মোজাইক কিলাররা [মোজিলা "নামকরণ করা] এতটাই হতাশ হয়েছিলেন যে তারা ভেবেছিল" আমরা যদি নীচে নামি তবে ইন্টারনেটও উচিত "।

অন্যদিকে উদীয়মান মাইক্রোসফ্ট এতটাই নির্বোধ ছিল যে তারা ভেবেছিল তাদের নাম নাম সম্পত্তি মুছে ফেলার জন্য অবজ্ঞাত এবং চিহ্নিত করা উচিত এবং এটি এমন একটি আইডি যা একটি অনন্য সনাক্তকারী যাতে তারা এর স্ক্রিপ্টিং কার্যকারিতা ভঙ্গ না করে treat পুরানো পৃষ্ঠাগুলি নেটস্কেপ প্রশিক্ষণার্থীদের দ্বারা কোডেড। তারা মারাত্মক ভুল ছিল ...

এবং আইডি বিরোধী উপাদানগুলির একটি অ্যারের সংগ্রহটি ফেরত পাঠানো এই ইচ্ছাকৃত মানব-তৈরি সমস্যার সমাধান ছিল না not আসলে এটি পুরো উদ্দেশ্যকে পরাস্ত করেছিল।

এবং এটিই ডাব্লু 3 সিটি কুৎসিত হয়ে ওঠে এবং আমাদের document.getElementByIdসাথে রোকো গডম্যামন বিরক্তিকর বাক্য গঠনের মতো বুদ্ধি দিয়েছিল একমাত্র কারণ ... (...)

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.