এই নির্দেশিকা জাভাস্ক্রিপ্টে HTML DOM এলিমেন্ট 'টেক্সট কনটেন্ট' প্রপার্টি কীভাবে অ্যাক্সেস এবং ম্যানিপুলেট করতে হয় তা ব্যাখ্যা করবে।
প্রথমে, HTML DOM 'টেক্সট কনটেন্ট' প্রপার্টির মূল বিষয়গুলি দেখুন৷
জাভাস্ক্রিপ্টে HTML DOM 'টেক্সট কনটেন্ট' প্রপার্টি কি?
দ্য ' পাঠ্য বিষয়বস্তু ” হল অন্তর্নির্মিত সম্পত্তি যা একটি নির্দিষ্ট উপাদান বা নোডের সমস্ত বংশধর সহ পাঠ্য সেট, পুনরুদ্ধার এবং সংশোধন করে। বংশধর হল শিশু উপাদান যেমন , , , এবং আরও অনেক কিছু যা ফর্ম্যাট করার উদ্দেশ্যে ব্যবহৃত হয়। 'টেক্সট কনটেন্ট' প্রপার্টি ব্যবহার করে টেক্সট সেট করার সময়, টার্গেট করা এলিমেন্টের ডিসেন্ড্যান্ট সম্পূর্ণ নতুন টেক্সট দিয়ে প্রতিস্থাপিত হয়।
সিনট্যাক্স (পাঠ্য বিষয়বস্তু সেট করুন)
' ব্যবহার করে একটি উপাদান/নোডের পাঠ্য সেট করার জন্য মৌলিক সিনট্যাক্স পাঠ্য বিষয়বস্তু 'সম্পত্তি নীচে লেখা আছে:
উপাদান পাঠ্য বিষয়বস্তু = পাঠ্য | নোড পাঠ্য বিষয়বস্তু = পাঠ্য
উপরের সিনট্যাক্সটি পছন্দসই নেয় ' পাঠ্য ” একটি মান হিসাবে যা ব্যবহারকারী একটি উপাদান বা নোডের জন্য সেট করতে চায়।
সিনট্যাক্স (পাঠ্য সামগ্রী পান)
'এর মাধ্যমে একটি উপাদান বা নোডের পাঠ্য ফেরত দেওয়ার জন্য সাধারণ সিনট্যাক্স পাঠ্য বিষয়বস্তু 'সম্পত্তি এখানে বলা হয়েছে:
উপাদান পাঠ্য বিষয়বস্তু | নোড পাঠ্য বিষয়বস্তুফেরত মূল্য: দ্য ' পাঠ্য বিষয়বস্তু 'সম্পত্তি ফেরত দেয়' পাঠ্য ব্যবধান সহ একটি উপাদান বা নোডের কিন্তু ভিতরের HTML ট্যাগ ছাড়াই।
এখন 'টেক্সট কনটেন্ট' প্রপার্টি অ্যাক্সেস এবং ম্যানিপুলেট করতে ব্যবহারিকভাবে উপরে-সংজ্ঞায়িত সিনট্যাক্স ব্যবহার করুন।
কিভাবে জাভাস্ক্রিপ্টে HTML DOM এলিমেন্ট 'টেক্সট কনটেন্ট' প্রপার্টি অ্যাক্সেস এবং ম্যানিপুলেট করবেন?
'innerHTML' এবং 'innerText' বৈশিষ্ট্যের অনুরূপ, ' পাঠ্য বিষয়বস্তু ” প্রপার্টি ব্যবহারকারীদের পছন্দসই উপাদানের পাঠ্য সহজেই সেট, অ্যাক্সেস এবং পরিবর্তন করতে দেয়। এই বিভাগটি নিম্নোক্ত উদাহরণগুলি ব্যবহার করে একটি উপাদানের উপর এই সমস্ত ক্রিয়াকলাপ সম্পাদন করে।
উদাহরণ 1: উপাদান/নোড টেক্সট অ্যাক্সেস করতে 'টেক্সট কনটেন্ট' প্রপার্টি প্রয়োগ করা
এই উদাহরণটি একটি নির্দিষ্ট উপাদান বা নোডের সমস্ত সন্তান সহ পাঠ্য ফেরত দিতে 'টেক্সট কনটেন্ট' বৈশিষ্ট্য প্রয়োগ করে।
HTML কোড
< div আইডি = 'myDiv' মাউসওভার = 'getText()' শৈলী = 'সীমানা: 3px কঠিন কালো; প্রস্থ: 400px; প্যাডিং: 5px 5px; মার্জিন: স্বয়ংক্রিয়;' >< h1 > প্রথম শিরোনাম < / h1 >
< h2 > দ্বিতীয় শিরোনাম < / h2 >
< h3 > তৃতীয় শিরোনাম < / h3 >
< h4 > চতুর্থ শিরোনাম < / h4 >
< h5 > পঞ্চম শিরোনাম < / h5 >
< h6 > ষষ্ঠ শিরোনাম < / h6 >
< / div >
HTML কোডের উপরের লাইনগুলিতে:
- দ্য ' 'myDiv' আইডি থাকা ট্যাগ একটি ডিভ উপাদান তৈরি করে যা নিম্নলিখিত বৈশিষ্ট্যের সীমানা, প্রস্থ, প্যাডিং (উপর এবং নীচে, বাম এবং ডান) এবং মার্জিন দিয়ে স্টাইল করা হয়। এটি সংযুক্ত করে ' মাউসওভার 'ইভেন্ট যা আহ্বান করে' getText() ” ফাংশন যখন ব্যবহারকারী এটির উপর মাউস ঘোরায়।
- div-এর ভিতরে, সমস্ত নির্দিষ্ট শিরোনাম (h1,h2,h3,h4,h5, এবং h6) ট্যাগগুলি তাদের নির্দিষ্ট স্তর অনুসারে শিরোনাম উপাদানগুলি সন্নিবেশ করায়।
জাভাস্ক্রিপ্ট কোড
< লিপি >
ফাংশন getText ( ) {
elem ছিল = নথি getElementById ( 'myDiv' ) ;
সতর্ক ( উপাদান পাঠ্য বিষয়বস্তু ) ;
}
লিপি >উপরে লিখিত জাভাস্ক্রিপ্ট কোড ব্লকে:
- 'নামক একটি ফাংশন সংজ্ঞায়িত করুন getText() ”
- এই ফাংশনের ভিতরে, 'elem' ভেরিয়েবলটি প্রয়োগ করে ' getElementById() ” এর আইডির মাধ্যমে div উপাদান অ্যাক্সেস করার পদ্ধতি।
- দ্য ' সতর্কতা() ' পদ্ধতি একটি সতর্কতা বাক্স তৈরি করে যা ব্যবহার করে ' পাঠ্য বিষয়বস্তু ” সম্পত্তি তার সমস্ত নির্ভরশীল সহ পিতামাতার ডিভের পাঠ্য ফেরত দিতে।
আউটপুট
নীচের আউটপুটটি একটি সতর্কতা বাক্স পপ আপ করে যা div উপাদানের পাঠ্য বিষয়বস্তু প্রদর্শন করে:
উদাহরণ 2: একটি উপাদান পাঠ্য বিষয়বস্তু এর বংশধর সহ প্রতিস্থাপন করতে 'টেক্সট সামগ্রী' সম্পত্তি প্রয়োগ করা
এই উদাহরণটি দেখায় কিভাবে 'টেক্সট কনটেন্ট' বৈশিষ্ট্য একটি উপাদানের সমস্ত বাচ্চাদের প্রতিস্থাপন করে যখন এর পাঠ্য পরিবর্তন করে।
HTML কোড
< কেন্দ্র >
< h1 আইডি = 'আমার মাথা' অনক্লিক = 'modifyText()' < খ > এই খ > হয় < স্প্যান > শিরোনাম < স্প্যান > < i > উপাদান i >> h1 >
কেন্দ্র >কোডের উপরে বর্ণিত লাইনগুলিতে:
- দ্য ' ' ট্যাগ লেভেল 1 এর একটি শিরোনাম উপাদান যুক্ত করে একটি সংযুক্ত ' অনক্লিক 'ইভেন্ট যা আহ্বান করে' modifyText() ব্যবহারকারী এটিতে ক্লিক করলে ফাংশন।
- শিরোনাম উপাদান এছাড়াও রয়েছে ' ', ' ', এবং ' ” এর বংশধর হিসেবে ট্যাগ করে। “ ” ট্যাগটি আবদ্ধ স্ট্রিংকে বোল্ড করতে ব্যবহৃত হয়, কোন স্টাইলিং প্রপার্টি ছাড়াই “” ট্যাগটি প্রদত্ত স্ট্রিং-এ কোন স্টাইলিং প্রয়োগ করতে ব্যবহার করা হয়, এবং “ ” ট্যাগটি প্রদর্শন করতে ব্যবহৃত হয় তির্যক হিসাবে নির্দিষ্ট স্ট্রিং.
জাভাস্ক্রিপ্ট কোড
< লিপি >
যেখানে h1 = নথি getElementById ( 'আমার মাথা' ) ;
কনসোল লগ ( h1 ) ;
ফাংশন modifyText ( ) {
h1. পাঠ্য বিষয়বস্তু = 'লিনাক্সহিন্টে স্বাগতম!' ;
কনসোল লগ ( h1 )
}
লিপি >উপরের জাভাস্ক্রিপ্ট কোডে:
- 'h1' ভেরিয়েবল ব্যবহার করে ' document.getElementById() ' এর নির্ধারিত আইডির মাধ্যমে শিরোনাম উপাদান অ্যাক্সেস করার পদ্ধতি।
- দ্য ' console.log() ” পদ্ধতি কনসোলে তার বিষয়বস্তু পরিবর্তন করার আগে অ্যাক্সেস করা শিরোনাম উপাদান প্রদর্শন করে।
- ফাংশনটির নাম ' modifyText() ' ব্যবহার করে ' পাঠ্য বিষয়বস্তু প্রাপ্ত শিরোনাম উপাদানের পাঠ্য পরিবর্তন করার জন্য সম্পত্তি।
- সর্বশেষ 'console.log()' পদ্ধতিটি পরিবর্তনের পরে আবার 'h1' মান প্রদর্শন করে।
আউটপুট
কনসোল স্পষ্টভাবে দেখায় যে প্রদত্ত শিরোনাম উপাদানের সমস্ত শিশু এটিতে ক্লিক করার পরে নতুন নির্দিষ্ট পাঠ্যের সাথে প্রতিস্থাপিত হয়েছে:
উদাহরণ 3: উপাদানের সন্তানের পাঠ্য পরিবর্তন করতে 'টেক্সট সামগ্রী' সম্পত্তি প্রয়োগ করা
এই উদাহরণটি নির্দিষ্ট উপাদানের সন্তানের পাঠ্য পরিবর্তন করতে 'টেক্সট কনটেন্ট' বৈশিষ্ট্য ব্যবহার করে।
HTML কোড
< div আইডি = 'myDiv' শৈলী = 'সীমানা: 3px কঠিন কালো; প্রস্থ: 400px; প্যাডিং: 5px 5px; মার্জিন: স্বয়ংক্রিয়;' >
< কেন্দ্র >
< বোতাম আইডি = 'বিটিএন' মাউসওভার = 'চেঞ্জ টেক্সট()' > পুরানো বোতাম < / বোতাম >
< / কেন্দ্র >
< / div >এই পরিস্থিতিতে:
- 'div' উপাদানটির একটি 'বোতাম' উপাদান রয়েছে যা 'এর সাহায্যে তৈরি করা হয়
ট্যাগ - বোতাম উপাদানটিতে আরও একটি নির্ধারিত আইডি এবং একটি ' মাউসওভার ' ঘটনা যা ' টেক্সট পরিবর্তন() ” ফাংশন যখন এটির উপর মাউস ঘোরে।
জাভাস্ক্রিপ্ট কোড
< লিপি >
প্যারেন্ট এলিমেন্ট ছিল = নথি getElementById ( 'myDiv' ) ;
var লক্ষ্য = নথি getElementById ( 'বিটিএন' ) ;
আমাকে খুঁজেছিল = প্যারেন্ট এলিমেন্ট। ধারণ করে ( লক্ষ্য ) ;
যদি ( প্যারেন্ট এলিমেন্ট। ধারণ করে ( লক্ষ্য ) == সত্য ) {
কনসোল লগ ( আমাকে খুজে বের কর ) ;
ফাংশন পরিবর্তন পাঠ্য ( ) {
লক্ষ্য পাঠ্য বিষয়বস্তু = 'নতুন বোতাম' ;
}
} অন্য {
কনসোল লগ ( 'এটির অস্তিত্ব নেই' )
}
লিপি >উপরের কোড স্নিপেটে:
- 'প্যারেন্ট এলিমেন্ট' ভেরিয়েবলটি ' getElementById() প্যারেন্ট ডিভ এলিমেন্ট অ্যাক্সেস করার পদ্ধতি। 'টার্গেট' ভেরিয়েবলটি 'getElementById()' পদ্ধতিটিও ব্যবহার করে তার আইডি ব্যবহার করে যোগ করা বোতাম উপাদান আনার জন্য।
- 'find_me' ভেরিয়েবলটি ব্যবহার করে ' রয়েছে() টার্গেট করা বাটন উপাদানটি div-এর সন্তান কিনা তা পরীক্ষা করার পদ্ধতি। এই পদ্ধতি ফিরে আসবে ' সত্য 'এর জন্য 'হ্যাঁ' অন্যথায় 'মিথ্যা'।
- দ্য ' অন্যথায় যদি ' বিবৃতি একটি কোড ব্লক সংজ্ঞায়িত করে।
- যদি লক্ষ্যযুক্ত উপাদানটি পিতামাতার উপাদানের সন্তান হয়, তাহলে ' টেক্সট পরিবর্তন() ' ফাংশন 'এর মাধ্যমে তার পাঠ্য পরিবর্তন করবে পাঠ্য বিষয়বস্তু 'সম্পত্তি। অন্যথায়, 'অন্য' কোড ব্লক ব্যবহার করে নির্দিষ্ট বার্তা প্রদর্শন করতে কার্যকর হবে console.log() 'পদ্ধতি।
আউটপুট
কনসোল একটি দেখায় ' সত্য ” বুলিয়ান মান যা বোতাম উপাদানটিকে যাচাই করে তা প্রদত্ত ডিভের চাইল্ড এবং তারপর এটির উপর মাউস ঘোরালে এর পাঠ্য পরিবর্তন হয়:
টেক্সট কনটেন্ট, ইনারটেক্সট এবং ইনারএইচটিএমএল প্রোপার্টির মধ্যে পার্থক্য?
সাধারণত, ' পাঠ্য বিষয়বস্তু ', ' অভ্যন্তরীণ পাঠ্য ', এবং ' innerHTML বৈশিষ্ট্যগুলি একটি উপাদান বা নোডের টেক্সট সেট করার এবং পাওয়ার উপায়ে কাজ করে। যাইহোক, এই বৈশিষ্ট্যগুলি কিছু কারণের উপর ভিত্তি করে একে অপরের থেকে আলাদা। এই বিভাগটি তাদের সকলের মধ্যে প্রধান পার্থক্য তুলে ধরে:
শর্তাবলী 'পাঠ্য বিষয়বস্তু' 'অভ্যন্তরীণ পাঠ্য' 'innerHTML' রিটার্ন টাইপ এটি একটি এলিমেন্টের টেক্সট রিটার্ন করে যার মধ্যে রয়েছে তার সমস্ত শিশু (ফরম্যাটিং ট্যাগ), CSS লুকানো টেক্সট এবং স্পেস। এটি একটি উপাদানের HTML ট্যাগ ফেরত দেয় না। এটি লক্ষ্যযুক্ত এইচটিএমএল উপাদানের পাঠ্য বিষয়বস্তু তার সমস্ত শিশু (ফরম্যাটিং ট্যাগ) সহ ফেরত দেয়। এটি