javascript - এইচটিএমএল বৈশিষ্ট্য এবং গুণাবলী মধ্যে পার্থক্য কি?




html dom (4)

পার্থক্য এইচটিএমএল বৈশিষ্ট্য এবং গুণাবলী:

এইচটিএমএল মধ্যে পার্থক্য কি মূল্যায়ন করার আগে প্রথমে এই শব্দগুলির সংজ্ঞা তাকান যাক:

ইংরেজি সংজ্ঞা:

  • গুণাবলী একটি বস্তুর অতিরিক্ত তথ্য উল্লেখ করা হয়।
  • বৈশিষ্ট্য একটি বস্তুর বৈশিষ্ট্য বর্ণনা করা হয়।

এইচটিএমএল প্রসঙ্গে:

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

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

এই বৈশিষ্ট্যগুলির ম্যাপিং 1 থেকে 1 নয়। বুঝতে হবে যে, আমরা কোনও HTML উপাদানতে যা দিই তা প্রত্যেকটি বৈশিষ্ট্য নয় যা একই নামের DOM সম্পত্তির নামে থাকবে।

উপরন্তু বিভিন্ন DOM উপাদান বিভিন্ন বৈশিষ্ট্য আছে। উদাহরণস্বরূপ, একটি <input> উপাদানটিতে একটি মান সম্পত্তির বৈশিষ্ট্য রয়েছে যা <div> সম্পত্তিতে উপস্থিত নয়।

উদাহরণ:

আসুন নিম্নলিখিত এইচটিএমএল নথি গ্রহণ করা যাক:

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">  <!-- charset is a attribute -->
  <meta name="viewport" content="width=device-width"> <!-- name and content are attributes -->
  <title>JS Bin</title>
</head>
<body>
<div id="foo" class="bar foobar">hi</div> <!-- id and class are attributes -->
</body>
</html>

তারপর আমরা <div> পরিদর্শন করি, JS কনসোলে:

 console.dir(document.getElementById('foo'));

আমরা নিম্নোক্ত DOM বৈশিষ্ট্যগুলি দেখি (ক্রোম devtools, সমস্ত বৈশিষ্ট্য দেখানো হয় না):

  • আমরা দেখতে পাচ্ছি যে এইচটিএমএল এ এট্রিবিউট আইডি এখন DOM এর একটি আইডি সম্পত্তি। আইডি এইচটিএমএল দ্বারা চালু করা হয়েছে (যদিও আমরা জাভাস্ক্রিপ্ট দিয়ে এটি পরিবর্তন করতে পারে)।
  • আমরা দেখতে পাচ্ছি যে এইচটিএমএল-এ শ্রেণির বৈশিষ্ট্যাবলীটি কোনও সংশ্লিষ্ট শ্রেণির সম্পত্তি ( class JS সংরক্ষিত শব্দ নয়)। কিন্তু প্রকৃতপক্ষে ২ টি বৈশিষ্ট্য, classList এবং className

JQuery 1.6.1 এ পরিবর্তনের পরে, আমি এইচটিএমএল বৈশিষ্ট্য এবং গুণাবলী মধ্যে পার্থক্য সংজ্ঞায়িত করার চেষ্টা করা হয়েছে।

JQuery 1.6.1 রিলিজ নোটগুলির তালিকা (নীচের কাছে) তালিকাটি দেখে মনে হচ্ছে এটি হ'ল এইচটিএমএল বৈশিষ্ট্য এবং বৈশিষ্ট্যাবলী শ্রেণিবদ্ধ করতে পারে:

  • বৈশিষ্ট্যাবলী: যা সমস্ত একটি বুলিয়ান মান আছে বা যে UA যেমন নির্বাচিত ইন্ডেক্স গণনা করা হয়।

  • বৈশিষ্ট্যাবলী: 'গুণাবলী' যা কোনও HTML উপাদানতে যুক্ত করা যেতে পারে যা কোনও বুলিয়ান নয় এবং একটি UA উত্পন্ন মান ধারণ করে না।

থটস?


উত্তরগুলি ইতিমধ্যে ব্যাখ্যা করে যে কিভাবে গুণাবলী এবং বৈশিষ্ট্যগুলি ভিন্নভাবে পরিচালিত হয়, তবে আমি সত্যিই এটি সম্পূর্ণভাবে উন্মাদ করাতে চাই। এমনকি যদি এটি কিছু পরিমাণে spec হয়।

এটি ক্রমশ, কিছু বৈশিষ্ট্য (যেমন আইডি, বর্গ, Foo, বার ) DOM- এ শুধুমাত্র এক ধরনের মান বজায় রাখতে, কিছু বৈশিষ্ট্য (যেমন চেক করা, নির্বাচিত ) দুটি মান বজায় রাখতে; অর্থাৎ, "যখন এটি লোড করা হয়" এবং মানটি "গতিশীল রাষ্ট্র" এর মান। (DOM ডকুমেন্টের রাষ্ট্রটিকে সম্পূর্ণ পরিমাণে প্রতিনিধিত্ব করতে অনুমিত হয় না?)

এটি একেবারে অপরিহার্য, যে দুটি ইনপুট ক্ষেত্র , যেমন একটি পাঠ্য এবং একটি চেকবাক্স একই ভাবে আচরণ করে । যদি পাঠ্য ইনপুট ক্ষেত্র পৃথক "যখন এটি লোড হয়" মান এবং "বর্তমান, গতিশীল" মান বজায় রাখে না, তবে চেকবক্স কেন? যদি চেকবক্সটিতে পরীক্ষিত গুণমানের জন্য দুটি মান থাকে তবে তার শ্রেণি এবং আইডি বৈশিষ্ট্যের জন্য এটি কেন দুটি নয়? যদি আপনি একটি টেক্সট * ইনপুট * ক্ষেত্রের মান পরিবর্তন করতে চান এবং আপনি DOM (অর্থাৎ "ক্রমিক প্রতিনিধিত্ব") পরিবর্তন করতে চান এবং এই পরিবর্তনটি প্রতিফলিত করেন, তাহলে কেন আপনি পৃথিবীর ইনপুট ক্ষেত্র থেকে একই প্রত্যাশা করবেন না? চেক করা বৈশিষ্ট্য চেকবক্স টাইপ করুন ?

"এটি একটি বুলিয়ান বৈশিষ্ট্য" এর বৈষম্য কেবল আমার কাছে কোনও ধারণা দেয় না, বা অন্তত এটির জন্য যথেষ্ট কারণ নয়।


ভাল এই একটি W3C দ্বারা নির্দিষ্ট করা হয় একটি বৈশিষ্ট্য এবং কি একটি সম্পত্তি http://www.w3.org/TR/SVGTiny12/attributeTable.html দ্বারা নির্দিষ্ট করা হয়

কিন্তু বর্তমানে attr এবং প্রোট তাই ভিন্ন না এবং প্রায় একই আছে

কিন্তু তারা কিছু জিনিস জন্য প্রপোজ পছন্দ

পছন্দের ব্যবহার সারসংক্ষেপ

.Prop () পদ্ধতিটি বুলিয়ান বৈশিষ্ট্যাবলী / বৈশিষ্ট্যগুলির জন্য এবং এমন বৈশিষ্ট্যগুলির জন্য ব্যবহার করা উচিত যা HTML তে বিদ্যমান নয় (যেমন উইন্ডো.লোকন)। অন্যান্য সমস্ত গুণাবলী (আপনি HTML এ দেখতে পারেন) এবং .attr () পদ্ধতিতে ম্যানিপুলেশন করা চালিয়ে যেতে পারেন।

ভাল যদি আপনি ATR বা prop বা উভয়ই ব্যবহার করেন তবে উভয়টিই কিছু পরিবর্তন করতে হবে না তবে আমি নিজের অ্যাপ্লিকেশনে দেখেছি যে ATRr আমার 1.6 অ্যাপ্লিকেশন prop = তে যেখানে কাজ করেছে সেখানে আমি কাজ করেছি।


সিম ভিডাসের উত্তর পড়ার পর, আমি আরো অনুসন্ধান করেছিলাম এবং কৌণিক দস্তাবেজে খুব সোজা এবং সহজে বোঝার ব্যাখ্যা পেয়েছি।

HTML বৈশিষ্ট্য বনাম DOM সম্পত্তি

বৈশিষ্ট্য এইচটিএমএল দ্বারা সংজ্ঞায়িত করা হয়। বৈশিষ্ট্যগুলি DOM (ডকুমেন্ট অবজেক্ট মডেল) দ্বারা সংজ্ঞায়িত করা হয়।

  • কয়েকটি HTML এ্যাট্রিবিউটগুলির বৈশিষ্ট্যগুলিতে 1: 1 ম্যাপিং রয়েছে। id একটি উদাহরণ।

  • কিছু HTML বৈশিষ্ট্যাবলী সংশ্লিষ্ট বৈশিষ্ট্য নেই। colspan একটি উদাহরণ।

  • কিছু DOM বৈশিষ্ট্যাবলী সংশ্লিষ্ট বৈশিষ্ট্য নেই। textContent একটি উদাহরণ।

  • অনেক এইচটিএমএল বৈশিষ্ট্য বৈশিষ্ট্যাবলী মানচিত্র প্রদর্শিত ... কিন্তু আপনি মনে করতে পারে উপায় না!

আপনি এই সাধারণ নিয়মটি উপলব্ধ না হওয়া পর্যন্ত যে শেষ বিভাগ বিভ্রান্তিকর হয়:

গুণাবলী DOM বৈশিষ্ট্য আরম্ভ এবং তারপর তারা সম্পন্ন করা হয়। সম্পত্তি মান পরিবর্তন করতে পারেন; বৈশিষ্ট্য মান না পারে।

উদাহরণস্বরূপ, যখন ব্রাউজারটি <input type="text" value="Bob"> রেন্ডার করে, তখন এটি "বব" থেকে শুরু হওয়া একটি value সম্পত্তির সাথে সংশ্লিষ্ট DOM নোড তৈরি করে।

যখন ব্যবহারকারী ইনপুট বক্সে "স্যালি" প্রবেশ করে, DOM উপাদান value সম্পত্তি "স্যালি" হয়ে যায়। কিন্তু এইচটিএমএল value এ্যাট্রিবিউটটি অপরিবর্তিত থাকে যখন আপনি আবিষ্কার করেন যে আপনি এই বৈশিষ্ট্য সম্পর্কে ইনপুট উপাদানটি জিজ্ঞাসা করেন কিনা: input.getAttribute('value') ফেরত "বব"।

এইচটিএমএল বৈশিষ্ট্য value প্রাথমিক মান নির্ধারণ করে; DOM value সম্পত্তি বর্তমান মান।

disabled বৈশিষ্ট্য অন্য একটি অসাধারণ উদাহরণ। একটি বোতামের disabled সম্পত্তি ডিফল্টরূপে false তাই বাটন সক্ষম করা হয়। যখন আপনি disabled বৈশিষ্ট্যটি যুক্ত করেন, তখন এটির উপস্থিতিটি কেবল বাটনটির disabled সম্পত্তিটি true যাতে বাটনটি অক্ষম থাকে।

disabled বৈশিষ্ট্য যোগ এবং অপসারণ নিষ্ক্রিয় এবং বাটন সক্ষম। বৈশিষ্ট্যটির মান অপ্রাসঙ্গিক, তাই আপনি <button disabled="false">Still Disabled</button>. লিখে একটি বোতাম সক্ষম করতে পারবেন না <button disabled="false">Still Disabled</button>.

বোতামের disabled সম্পত্তি সেট করা বা বাটনটি সক্ষম করে। সম্পত্তি মূল্য গুরুত্বপূর্ণ।

এইচটিএমএল বৈশিষ্ট্য এবং DOM সম্পত্তি একই জিনিস নয়, এমনকি একই নাম থাকা সত্ত্বেও।







properties