জাভাস্ক্রিপ্ট জেকুয়েরি এঙ্গুলার জেএস এইচটিএমএল সিএসএস বুটস্ট্রাপ পিএইচপি সি প্রোগ্রামিং
ফোরাম
×

জেএস টিউটোরিয়াল

হোম-HOME পরিচিতি-Introduction ব্যবহার-Uses গঠনপ্রণালী-Syntax আউটপুট-Output তথ্যের ধরণ-Data Type চলক-Variable স্টেটমেন্ট-Statement মন্তব্য-Comment অপারেটর-Operator গণিত-Arithmetic এসাইনমেন্ট-Assignment ফাংশন-Function অবজেক্ট-Object স্কোপ-Scope ইভেন্ট-Event ধরণ পরিবর্তন-Type Conversion রেগুলার এক্সপ্রেশন-RegExp ভুল-Error জেসন-JSON হয়েস্টিং-Hoisting

কন্ট্রোল স্টেটমেন্ট

বুলিয়ান-Boolean তুলনা-Comparison শর্তাবলী-Condition সুইচ-Switch ফর লুপ- For Loop হোয়াইল লুপ-While Loop ব্রেক-Break এবং কন্টিনিউ-continue

স্ট্রিং এবং অ্যারে

স্ট্রিং-String স্ট্রিং পদ্ধতি-String Method অ্যারে-Array অ্যারে পদ্ধতি -Array Method অ্যারে সর্ট-ArraySort

সংখ্যা, গণিত ও তারিখ

সংখ্যা-Number সংখ্যা পদ্ধতি-Number Method গণিত-Math তারিখ-Date তারিখ বিন্যাস-Date Format তারিখ পদ্ধতি-Date Method

জেএস ফাংশন-Function

ফাংশনের সংজ্ঞা-Definition ফাংশন প্যারামিটার-Parameter ফাংশনকে ডাকা-Invocation ফাংশন ক্লোজার-Closure

জেএস অবজেক্ট-Object

অবজেক্টের সংজ্ঞা-Definition অবজেক্ট প্রোপার্টি-Property অবজেক্ট মেথড-Method অবজেক্ট প্রোটোটাইপ-Prototype

জেএস ফর্ম-Form

ফর্ম বৈধকরণ-Validation ফর্ম এপিআই-API

জেএস এইচটিএমএল ডোম-DOM

ডোম(DOM) পরিচিতি ডোম মেথড-Method ডোম ডকুমেন্ট-Document ডোম এলিমেন্ট -Element ডোম এইচটিএমএল-HTML ডোম সিএসএস-CSS ডোম অ্যানিমেশন-Animation ডোম ঘটনা-Event ডোম ইভেন্টলিসেনার-EventListener ডোম নেভিগেশন-Navigation ডোম নোড-Node ডোম নোডতালিকা-Nodelist

জেএস ব্রাউজার বোম-BOM

উইন্ডো-Window স্ক্রিন-Screen লোকেশন-Location হিস্টোরি-History নেভিগেটর-Navigator পপআপ এলার্ট-Popup Alert টাইমিং-Timing কুকি-Cookie

জেএস রেফারেন্স

জাভাস্ক্রিপ্ট অবজেক্ট এইচটিএমএল ডোম অবজেক্ট অপারেটর-Operator স্টেটমেন্ট-Statement অ্যারে-Array বুলিয়ান-Boolean স্ট্রিং-String সংখ্যা-Number রেগুলার এক্সপ্রেশন-RegExp গণিত-Math তারিখ-Date গ্লোবাল-Global কনভার্শন-Conversion


 

জাভাস্ক্রিপ্ট এইচটিএমএল ডোম এলিমেন্ট


নোড(এইচটিএমএল এলিমেন্ট) যোগ করা এবং বাদ দেওয়া


নতুন এইচটিএমএল এলিমেন্ট(নোড) তৈরি

এইচটিএমএল ডোমে একটি নতুন এলিমেন্ট যোগ করার জন্যে প্রথমে অবশ্যই এলিমেন্টটি(এলিমেন্ট নোড) তৈরি করতে হবে এবং তারপর আগের এলিমেন্টের সাধে যুক্ত করতে হবে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>

<div id="DIV">
<p id="para1">এটি একটি প্যারাগ্রাফ</p>
<p id="para2">এটি আরেকটি প্যারাগ্রাফ</p>
</div>

<script>
var para = document.createElement("p"); var textNode = document.createTextNode("ইহা নতুন প্যারাগ্রাফ"); para.appendChild(textNode); var DIV = document.getElementById("DIV"); DIV.appendChild(para); </script> </body> </html>

ফলাফল




উদাহরণের বর্ণনা

এই কোড একটি নতুন <p> এলিমেন্ট তৈরি করেঃ

var para = document.createElement("p");

<p> এলিমেন্টে টেক্সট যোগ করার জন্য প্রথমে আপনাকে অবশ্যই একটি টেক্সট নোড তৈরি করতে হবে। এই কোড দ্বারা একটি টেক্সট নোড তৈরি করা হয়ঃ

var textNode = document.createTextNode("ইহা নতুন প্যারাগ্রাফ");

তারপর আপনাকে অবশ্যই টেক্সট নোডকে <p> এলিমেন্টে যুক্ত করতে হবেঃ

para.appendChild(textNode);

সবশেষে আপনি আগের তৈরিকৃত একটি এলিমেন্টের সাথে নতুন এলিমেন্টটি যুক্ত করবেন।

এই কোডটি দ্বারা আগের তৈরিকৃত এলিমেন্টকে খুঁজে বের করা হয়ঃ

var DIV = document.getElementById("DIV");

এই কোড আগের তৈরিকৃত এলিমেন্টে নতুন এলিমেন্ট যুক্ত করে।

DIV.appendChild(para);

নতুন এইচটিএমএল এলিমেন্ট তৈরি - insertBefore()

পূর্ববর্তী উদাহরণে appendChild() মেথডটি প্যারেন্টের শেষ চাইল্ড হিসেবে নতুন এলিমেন্ট যুক্ত করে।

আপনি যদি এটা করতে না চান তাহলে insertBefore() মেথড ব্যবহার করতে পারেনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>

<div id="DIV">
<p id="para1">এটি একটি প্যারাগ্রাফ</p>
<p id="para2">এটি আরেকটি প্যারাগ্রাফ</p>
</div>

<script>
var para = document.createElement("p"); var textNode = document.createTextNode("ইহা নতুন প্যারাগ্রাফ"); para.appendChild(textNode); var DIV = document.getElementById("DIV"); var PARA = document.getElementById("para1"); DIV.insertBefore(para, PARA); </script> </body> </html>

ফলাফল




বিদ্যমান এইচটিএমএল এলিমেন্ট বাদ দেওয়া

একটি এইচটিএমএল এলিমেন্ট বাদ দেওয়ার জন্য আপনাকে অবশ্যই এলিমেন্টের প্যারেন্টকে জানতে হবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>

<div id="DIV">
<p id="para1">এটি একটি প্যারাগ্রাফ</p>
<p id="para2">এটি আরেকটি প্যারাগ্রাফ</p>
</div>

<script>
var DIV = document.getElementById("DIV");
var PARA = document.getElementById("para1");
DIV.removeChild(PARA);
</script>
</body>
</html>

ফলাফল



node.remove() মেথডটি ডোম ৪ এ যোগ করা হয়েছে।
কিন্তু সকল ব্রাউজারে সাপোর্ট না করার কারণে আপনারা এটি ব্যবহার করবেন না।


উদাহরণের বর্ণনা

এই এইচটিএমএল ডকুমেন্টটিতে একটি <div> এলিমেন্টে দুটি চাইল্ড নোড(দুটি <p> এলিমেন্ট) রয়েছেঃ

<div id="DIV">
<p id="para1">এটি একটি প্যারাগ্রাফ</p>
<p id="para2">এটি আরেকটি প্যারাগ্রাফ</p>
</div>

id= "DIV" যুক্ত এলিমেন্টটি খুঁজে বের করিঃ

var DIV = document.getElementById("DIV");

id="para1" যুক্ত <p> এলিমেন্টটি খুঁজে বের করিঃ

var PARA= document.getElementById("para1");

প্যারেন্ট থেকে চাইল্ডকে বাদ দেইঃ

DIV.removeChild(PARA);

প্যারেন্ট এলিমেন্টকে নির্দেশ না করেই একটি এলিমেন্টকে মুছে ফেলতে খুবই।
কিন্তু দুঃখিত, এলিমেন্টটিকে বাদ দিতে হলে অবশ্যই এর প্যারেন্ট এলিমেন্টকে চিহ্নিত করে দিতে হবে।

একটি ভিন্ন পদ্ধতি দেওয়া হলোঃ

var PARA = ocument.getElementById("para1");
PARA.parentNode.removeChild(PARA);

এইচটিএমএল এলিমেন্ট প্রতিস্থাপন 

এইচটিএমএল ডোমের একটি এলিমেন্টকে প্রতিস্থাপন করতে replaceChild() মেথডটি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>

<div id="DIV">
<p id="para1">এটি একটি প্যারাগ্রাফ</p>
<p id="para2">এটি আরেকটি প্যারাগ্রাফ</p>
</div>

<script>
var para = document.createElement("p"); var textNode = document.createTextNode("ইহা নতুন প্যারাগ্রাফ"); para.appendChild(textNode); var DIV = document.getElementById("DIV"); var PARA = document.getElementById("para1"); DIV.replaceChild(para, PARA); </script> </body> </html>

ফলাফল