ইনটারটেক্সট বনাম অভ্যন্তরীণ এইচটিএমএল বনাম লেবেল বনাম পাঠ্য বনাম টেক্সট কনসেন্ট বনাম আউটটেক্সট

Question

আমার একটি ড্রপডাউন তালিকা রয়েছে যা জাভাস্ক্রিপ্ট দ্বারা জনপ্রিয়।

লোডে প্রদর্শনের জন্য ডিফল্ট মানটি কী হবে তা স্থির করে আমি বুঝতে পেরেছি যে নিম্নলিখিত বৈশিষ্ট্যগুলি একই মানগুলি দেখিয়েছে:

• innerText
• innerHtml
• label
• text
• textContent
• outerText

আমার নিজস্ব গবেষণাটি বেঞ্চ চিহ্নিতকরণ পরীক্ষা বা সেগুলির কয়েকটিগুলির মধ্যে তুলনা দেখায়, তবে সবকটি নয়।

আমি আমার নিজস্ব জ্ঞান ব্যবহার করতে পারি এবং 1 বা অন্যটিকে একই ফলাফল প্রদান করার জন্য বেছে নিতে পারি, তবে, আমি উদ্বিগ্ন যে ডেটা পরিবর্তিত হলে এটি কোনও ভাল ধারণা হবে না।

আমার অনুসন্ধানগুলি হ'ল:

• innerText মানটি যেমন রয়েছে তেমন প্রদর্শন করবে এবং অন্তর্ভুক্ত থাকতে পারে এমন কোনও HTML বিন্যাসকে উপেক্ষা করবে
• innerHTML মানটি দেখায় এবং কোনও HTML ফর্ম্যাটিং প্রয়োগ করে
• labelহিসাবে একই হিসাবে প্রদর্শিত হয় innerText, তাই আমি পার্থক্যটি দেখতে পাচ্ছি না
• textinnerTextjQuery শর্টহ্যান্ড সংস্করণ হিসাবে একই হিসাবে প্রদর্শিত হবে
• textContentহিসাবে একই হিসাবে উপস্থিত হয় innerTextতবে ফর্ম্যাটিং রাখে (যেমন \n)
• outerText হিসাবে একই হিসাবে প্রদর্শিত হবে innerText

আমার গবেষণা শুধুমাত্র আমার এতদূর নিতে পারেন যেমন আমি শুধু পরীক্ষা করতে পারেন কি আমি মনে বা পড়তে কি প্রকাশিত হয় করতে পারেন, করতে পারেন যে কোনো একটি নিশ্চিত যদিও যদি আমার গবেষণা সঠিক এবং যদি বিশেষ কিছু সম্পর্কে আছে labelএবং outerText?

Comments

পাঠ্যটি অ্যাক্সেস করার বিভিন্ন উপায় থাকার একটি কারণ ক্রস ব্রাউজারের পার্থক্য। আপনি যদি ইতিমধ্যে jQuery ব্যবহার করে থাকেন তবে আপনার .text()কোনও উপাদানটির পাঠ্য সামগ্রী পেতে ব্যবহার করা উচিত , যেহেতু এটি সর্বাধিক ক্রস ব্রাউজার সমর্থন সরবরাহ করবে।

— জেএলরিশ

বিকাশকারী.মোজিলা.আর.ইন-

— ইউএস

Answer 1

এমডিএন থেকে :

ইন্টারনেট এক্সপ্লোরার এলিমেন্ট.ইনটেক্সট চালু করে। উদ্দেশ্য বেশ কয়েকটি একই সাথে [টেক্সট কনটেন্ট হিসাবে] বেশ কয়েকটি পার্থক্য সহ:

• মনে রাখবেন যে টেক্সট কনটেন্টটি সমস্ত উপাদানগুলি <script>এবং <style>উপাদানগুলি সহ সামগ্রী পেয়েছে, বেশিরভাগই সমতুল্য আই-নির্দিষ্ট সম্পত্তি, ইনটারটেক্সট না করে।

• ইনারটেক্সট স্টাইল সম্পর্কেও সচেতন এবং লুকানো উপাদানগুলির পাঠ্য ফিরিয়ে দেবে না, যেখানে পাঠ্য সামগ্রীটি করবে।

• ইনারটেক্সট যেহেতু সিএসএস স্টাইলিং সম্পর্কে সচেতন, এটি একটি রিফ্লো ট্রিগার করবে, যেখানে পাঠ্য সামগ্রীটি তা করবে না।

সুতরাং innerTextCSS দ্বারা গোপন করা পাঠ্য অন্তর্ভুক্ত করবে না, তবে textContentহবে।

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

আপনি যদি এটিকে মিস করেন তবে আমাকে আরও স্পষ্টভাবে পুনরাবৃত্তি করতে দিন: আপনি নির্দিষ্টভাবে কোনও উপাদানটির মধ্যে এইচটিএমএল সন্নিবেশ করার ইচ্ছা না করে এবং আপনি যে এইচটিএমএলটি সন্নিবেশ করছেন এটির যাতে দূষিত সামগ্রী থাকতে না পারে তা নিশ্চিত করার জন্য প্রয়োজনীয় সতর্কতা অবলম্বন না করা পর্যন্ত ব্যবহার করবেন না.innerHTML । আপনি যদি কেবল পাঠ্য সন্নিবেশ করতে চান .textContentতবে ব্যবহার করুন বা আপনার যদি IE8 বা তার আগে সমর্থন করতে হয় তবে .textContentএবং এর মধ্যে স্যুইচ অফ করতে বৈশিষ্ট্য সনাক্তকরণ ব্যবহার করুন .innerText।

অনেকগুলি আলাদা আলাদা বৈশিষ্ট্য থাকার একটি প্রধান কারণ হ'ল বিভিন্ন ব্রাউজারের মূলত এই বৈশিষ্ট্যের জন্য আলাদা আলাদা নাম ছিল এবং এখনও তাদের সকলের জন্য সম্পূর্ণ ক্রস ব্রাউজার সমর্থন নেই। আপনি যদি jQuery ব্যবহার করছেন তবে আপনার .text()ক্রমাগত ব্রাউজারের পার্থক্যগুলি সহজ করার জন্য তৈরি করা উচিত *

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

Comments

দস্তাবেজের পরামর্শের সাথে সমস্যাটি in order to retrieve or write text within an element, people use innerHTML. textContent should be used insteadহ'ল, টেক্সট কনটেন্টটি আইই 8 দ্বারা সমর্থিত নয়, যা এখনও মোটামুটি ব্যাপকভাবে ব্যবহারে রয়েছে কারণ এটি উইন্ডোজ with এর সাথে বান্ডিলিত সংস্করণ And এবং ফায়ারফক্স ইনারটেক্সটকে সমর্থন করে না । সুতরাং যদিও অভ্যন্তরীণ এইচটিএমএল আদর্শ উদ্দেশ্যে উপযুক্ত নয় তবে এর ক্রস-ব্রাউজারের নির্ভরযোগ্যতা রয়েছে।

— আদি ইনবার

@AdiInbar আপনি পুরানো ব্রাউজার সমর্থন করার জন্য প্রয়োজন হয়, তাহলে করার সঠিক জিনিস বৈশিষ্ট্য সনাক্তকরণ ব্যবহার করতে মধ্যে সুইচ বন্ধ হয় .textContentএবং .innerTextjQuery মত, নাকি অন্যকিছু ব্যবহারের যে এই ব্রাউজার পার্থক্য মসৃণ করে তোলে।

— জেএলরিশ

এই ব্যাখ্যার জন্য আপনাকে অনেক ধন্যবাদ! আমি চার্টগুলি প্রদর্শন করতে ফ্লোট ব্যবহার করছি এবং এটি এফএফটিতে প্রদর্শিত হচ্ছে না কারণ এফএফ পাঠ্য কনটেন্ট ব্যবহার করে। আমি যখন টিকফর্ম্যাটরটি ব্যবহার করতাম তখন ইনারটেক্সট সর্বদা অপরিজ্ঞাত ছিল।

— রেইনহাইডার 19

@bvl আপনি textContentএইচটিএমএল ট্যাগ দিয়ে ব্যবহার করতে পারবেন না । আপনার যদি এইচটিএমএল সন্নিবেশ করানোর দরকার হয় তবে আপনি হয় HTML ব্যবহার করে .innerHTMLবা document.createElement()

— অন্যগুলি

সুরক্ষা:innerHTML (বিপরীতে textContent) এর ভুল ব্যবহার আপনার অ্যাপ্লিকেশনটিতে এক্সএসএস (ক্রস-সাইট স্ক্রিপ্টিং) আক্রমণগুলির দরজা খুলতে পারে। যদি ডিওএম-এর মাধ্যমে সামগ্রীটি প্রবেশ করানো innerHTMLসম্পূর্ণরূপে বিশ্বাসযোগ্য না হয় তবে আক্রমণকারী <script>কোনও ব্যবহারকারীর বা প্রশাসকের অনুমোদনের স্তরের অধীনে আপনার অ্যাপ্লিকেশনটিকে ছিনতাই করার জন্য একটি উপাদান ব্যবহার করতে পারে । অদ্ভুত চেহারার মতো আক্রমণাত্মক আক্রমণ <img src="x.x" onerror="alert('Hacked!');"/>এবং ছিনতাইকারীদের একটি অগণিত সহ সমস্ত আক্রমণকে textContentবিপজ্জনক পরিবর্তে এই প্রসঙ্গে ব্যবহার করে কার্যকরভাবে ধ্বংস করা হয় innerHTML।

— চেসমস্কাল

Answer 2

একটি ড্রপডাউন তালিকার মধ্যে Optionবস্তুর একটি সংগ্রহ রয়েছে , সুতরাং .textউপাদানটির পাঠ্য উপস্থাপনা পরীক্ষা করার জন্য আপনার সম্পত্তিটি ব্যবহার করা উচিত

<option value="123">text goes here</option>
                    ^^^^^^^^^^^^^^

BTW,

.text.innerTextJQuery শর্টহ্যান্ড সংস্করণ হিসাবে একই হিসাবে প্রদর্শিত হবে

এটি সঠিক নয়; সম্পত্তি অ্যাক্সেস সংস্করণ $(element).text()যেখানে jQuery element.textসংস্করণ।

Answer 3

জেএলআরশির অন্যথায় দুর্দান্ত উত্তরটিতে অ্যাডেন্ডাম:

ইনারটেক্সট এবং আউটটারটেক্সট উভয়ের উপস্থিতির কারণটি হ'ল ইনটারএইচটিএমএল এবং আউটআরএইচটিএমএল সহ প্রতিসমতার জন্য। আপনি সম্পত্তি অর্পণ করার সময় এটি গুরুত্বপূর্ণ হয়ে ওঠে ।

মনে করুন আপনি eএইচটিএমএল কোড সহ একটি উপাদান পেয়েছেন <b>Lorem Ipsum</b>:

e.innerHTML = "<i>Hello</i> World!"; => <b><i>Hello</i> World!</b>
e.outerHTML = "<i>Hello</i> World!"; =>    <i>Hello</i> World!
e.innerText = "Hello World!";        => <b>Hello World!</b>
e.outerText = "Hello World!";        =>    Hello World!

Answer 4

textContent বিন্যাস করবে না (\ n)

Answer 5

আপনি যদি নির্দিষ্ট ব্রাউজারগুলি লক্ষ্য করে থাকেন তবে ব্রাউজারগুলির সামঞ্জস্যতা http://www.quirksmode.org/dom/html/ দেখুন । কারণ দেখে মনে হচ্ছে তাদের সবার নিজস্ব কাজ করার পদ্ধতি রয়েছে। এজন্য আপনি যদি চারপাশে ঝাঁকুনি না চান তবে JQuery .text () ( http://api.jquery.com/text/ ) ব্যবহার করা ভাল ।

Answer 6

textএবং labelঅতিরিক্ত স্থান সরিয়ে ফেলুন। ড্রপডাউনে বিকল্প জিজ্ঞাসা করার সময় আমি এই ফলাফলগুলি পেয়েছি:

e.textContent = "A    B C   D     "
e.text = "A B C D"
e.label = "A B C D"