নোডভ্যালু বনাম অভ্যন্তরীণ এইচটিএমএল এবং টেক্সট কনটেন্ট। কীভাবে নির্বাচন করবেন?

Question

আমি লেবেলের উপাদানটির অভ্যন্তরীণ পাঠ্য পরিবর্তন করতে প্লেইন জেএস ব্যবহার করছি এবং আমার অভ্যন্তরীণ এইচটিএমএল বা নোডভ্যালু বা টেক্সট কনটেন্টটি কী কারণে ব্যবহার করা উচিত তা সম্পর্কে আমি নিশ্চিত ছিলাম না। আমার কোনও নতুন নোড তৈরি করার বা এইচটিএমএল উপাদান বা কোনও কিছু পরিবর্তন করার দরকার নেই - কেবল পাঠ্যটি প্রতিস্থাপন করুন। কোডের উদাহরণ এখানে:

var myLabel = document.getElementById("#someLabel");
myLabel.innerHTML = "Some new label text!"; // this works

myLabel.firstChild.nodeValue = "Some new label text!"; // this also works.

myLabel.textContent = "Some new label text!"; // this also works.

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

ফার্স্টচিল্ড.নোডভ্যালু যদি এত তাড়াতাড়ি হয় তবে ধরা পড়বে কী? এটি কি বহুল সমর্থনযোগ্য নয়? অন্য কোন সমস্যা আছে?

Answer 1

MDN তে টেক্সট কনটেন্ট / ইনারটেক্সট / ইনারএইচটিএমএল এর মধ্যে পার্থক্য।

এবং ইনটারটেক্সট / নোডভ্যালু সম্পর্কে স্ট্যাকওভারফ্লো উত্তর।

সারসংক্ষেপ

1. ইনারএইচটিএমএল এইচটিএমএল হিসাবে সামগ্রীকে বিশ্লেষণ করে , তাই এটি আরও বেশি সময় নেয়।
2. নোডভ্যালু সরাসরি পাঠ্য ব্যবহার করে, এইচটিএমএলকে বিশ্লেষণ করে না এবং এটি আরও দ্রুত।
3. টেক্সট কনটেন্ট সোজা পাঠ্য ব্যবহার করে, এইচটিএমএলকে বিশ্লেষণ করে না এবং এটি আরও দ্রুত।
4. ইনারটেক্সট শৈলীর বিবেচনায় নেয়। এটি উদাহরণস্বরূপ গোপন পাঠ্য পাবে না।

innerTextফায়ারফক্সে ফায়ারফক্সের অস্তিত্ব ছিল না ক্যানিউজ অনুসারে 45 কিন্তু এখন সমস্ত বড় ব্রাউজারে এটি সমর্থিত।

Comments

উহ, nodeValueএইচটিএমএল

— কেও

"TextContent ব্যবহার XSS আক্রমণের প্রতিরোধ করতে পারি" developer.mozilla.org/en-US/docs/Web/API/Node/textContent

— Drp

Answer 2

.textContentআউটপুট text/plainযখন .innerHTMLআউটপুট text/html।

দ্রুত উদাহরণ:

var example = document.getElementById('exampleId');

example.textContent = '<a href="https://google.com">google</a>';

আউটপুট: <a href="http://google.com"> গুগল </a>

example.innerHTML = '<a href="https://google.com">google</a>';

আউটপুট: গুগল

আপনি প্রথম উদাহরণ থেকে দেখতে পারেন যে প্রকারের আউটপুটটি text/plainব্রাউজার দ্বারা পার্স হয় না এবং ফলাফল সম্পূর্ণ সামগ্রীতে প্রদর্শিত হয়। ধরণের আউটপুট text/htmlব্রাউজারকে প্রদর্শন করার আগে এটি পার্স করতে বলে।

এমডিএন ইনারএইচটিএমএল , এমডিএন টেক্সট কনটেন্ট , এমডিএন নোডভ্যালু

Answer 3

আমি যে দু'জনকে ভাল করে জানি এবং তার সাথে কাজ করি তা হ'ল ইনার এইচটিএমএল এবং টেক্সট কনটেন্ট ।

আমি যখন পাঠ্য অনুচ্ছেদের পাঠ্য পরিবর্তন করতে চাই বা এমনভাবে শিরোনাম চাই তখন আমি টেক্সট কনটেন্টটি ব্যবহার করি:

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.textContent = 'My New Title!'
  paragraph.textContent = 'My second <em>six word</em> story.'
}, 2000)

em { font-style: italic; }

<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>

সুতরাং, টেক্সট কনটেন্টটি কেবল পাঠ্য পরিবর্তন করে, তবে এটি এইচটিএমএলকে বিশ্লেষণ করে না, কারণ ফলস্বরূপ আমরা সরল পাঠ্যে দৃশ্যমান ট্যাগগুলি থেকে বলতে পারি there

যদি আমরা এইচটিএমএলকে বিশ্লেষণ করতে চাই তবে আমরা অভ্যন্তরীণ এইচটিএমএল এর মতো ব্যবহার করি :

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.innerHTML = 'My <em>New</em> Title!'
  paragraph.innerHTML = 'My second <em>six word</em> story.'
}, 2000)

em { font-style: italic; }

<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>

সুতরাং, এই দ্বিতীয় উদাহরণটি এইচটিএমএল হিসাবে ডোম উপাদানটির অন্তর্নিহিত HTML সম্পত্তিকে আমি যে স্ট্রিংটি দিয়েছি তা পার্স করে ।

এটি দুর্দান্ত এবং একটি বড় সুরক্ষার দুর্বলতা:)

(আপনি যদি এর জন্য সুরক্ষা সম্পর্কে জানতে চান তবে এক্সএসএস দেখুন)

Answer 4

ইনারটেক্সট মোটামুটি যা আপনি যদি পাঠ্যটি নির্বাচন করে অনুলিপি করেন তবে আপনি কী পাবেন। যে উপাদানগুলি রেন্ডার করা হয় না সেগুলি ইনটারটেক্সটে উপস্থিত থাকে না।

টেক্সট কনট্যান্ট হ'ল উপ-গাছের সমস্ত পাঠ্য নোডের মানগুলির সংমিশ্রণ । রেন্ডার হোক বা না হোক।

পার্থক্যগুলি বর্ণনা করার জন্য এখানে একটি দুর্দান্ত পোস্ট

ইনারএইচটিএমএলটি ইন্টার্নটেক্সট বা টেক্সট কনটেন্টের সাথে তুলনা করে অন্তর্ভুক্ত করা উচিত নয়, কারণ এটি সম্পূর্ণ আলাদা

Comments

ইনটারএইচটিএমএল সম্পর্কে আপনি যা বলছেন তা আমার কাছে এতটাই স্পষ্ট যে আমি নিশ্চিত যে বুঝতে পারি না কেন এতগুলি কেন এটি পায় নি।

— ব্যবহারকারী 34660

Answer 5

[দ্রষ্টব্য: এই পোস্টটি একটি নির্দিষ্ট ডেটা ভাগ করা সম্পর্কে আরও বেশি যা লোককে কী করতে হবে তার চেয়ে বেশি সাহায্য করতে পারে]

যদি কেউ আজ সবচেয়ে দ্রুত কোনটি ভাবছেন: https://jsperf.com/set-innertext-vs-innerhtml-vs-textcontent & https://jsperf.com/get-innertext-vs-innerhtml-vs-textcontent ( দ্বিতীয় পরীক্ষার জন্য স্প্যানের বিষয়বস্তু সরল পাঠ্য, ফলাফলগুলি এর সামগ্রী অনুযায়ী পরিবর্তন হতে পারে)

.innerHtmlখাঁটি গতির ক্ষেত্রে এটি দুর্দান্ত বিজয়ী বলে মনে হচ্ছে !

(দ্রষ্টব্য: আমি এখানে কেবল গতির কথা বলছি, কোনটি ব্যবহার করবেন তা বেছে নেওয়ার আগে আপনি অন্যের মানদণ্ডগুলি সন্ধান করতে পারেন!)

Answer 6

এলিমেন্ট.ইনার এইচটিএমএল সম্পত্তি setবা getউপাদানটির এইচটিএমএল কোড।

প্রাক্তন: <h1>এটির সাথে আমাদের একটি ট্যাগ এবং শক্তিশালী স্টাইল রয়েছে:

<h1 id="myHeader" style="color: green"><strong>My Header</strong> Normal Text</h1> করার getউপাদান বিষয়বস্তু ID "myHeader" করার সমান, আমরা কি করতে হবে একই রয়েছে:

var element = document.getElementById("myHeader");
element.innerHTML

রিটার্ন ফলাফল:

<strong>My Header</strong> Normal Text`

এই উপাদানটির জন্য নতুন সামগ্রী (মান) সেট করতে, কোডটি এখানে থাকবে:

Element.innerHTML = "My Header My Text";

সুতরাং এই সম্পত্তিটি কেবল সরল পাঠ্যের সাথেই কাজ করে না, তবে এটি HTML কোডটি পাস বা অনুলিপি করার উদ্দেশ্যে।

=> আমাদের এটি ব্যবহার করা উচিত নয়।

তবে, অনেক প্রোগ্রামার (নিজেকে সহ) একটি ওয়েব পৃষ্ঠায় পাঠ্য সন্নিবেশ করার জন্য এই বৈশিষ্ট্যটি ব্যবহার করে এবং এই পদ্ধতিটি একটি সম্ভাব্য ঝুঁকি বহন করে:

1. ভুল ক্রিয়াকলাপ: প্রতিটি পাঠ্য সন্নিবেশ করা কখনও কখনও theোকানো উপাদানটির সমস্ত অন্যান্য এইচটিএমএল কোড মুছে দেয়।
2. সুরক্ষার জন্য: অবশ্যই, উপরের দুটি উদাহরণ সম্পূর্ণ নিরীহ, এমনকি ট্যাগ ব্যবহার করা এখনও কোনও সমস্যা না কারণ এইচটিএমএল 5 স্ট্যান্ডার্ড ট্যাগের অভ্যন্তরে কমান্ড লাইনের কার্যকারিতা রোধ করেছে। অভ্যন্তরীণ HTML বৈশিষ্ট্যের মাধ্যমে ওয়েব পৃষ্ঠায় viaোকানো হয় serted এই নিয়মটি এখানে দেখুন ।

এই কারণে innerHTML, পরিবর্তে ব্যবহার করুন, সরল পাঠ্য সন্নিবেশ করার সময় ব্যবহারের পরামর্শ দেওয়া হয় না textContent। textContentসম্পত্তি বুঝতে পারে না করবে আপনি যে কোডটি পাস একটি HTML সিনট্যাক্স, কিন্তু মাত্র একটি 100% টেক্সট আর ও কম না।

textContentউপরের উদাহরণটিতে ব্যবহার করে ফলাফলটি ফিরে আসে :

My Header My Text