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

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

হোম-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


 

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


এইচটিএমএল এলিমেন্টকে কিভাবে খুজে বের করতে হয় এবং এক্সেস করতে হবে তা এই পেজে শিখতে পারবো।


এইচটিএমএল এলিমেন্টকে খোঁজা

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

সেটা করার জন্য আপনাকে প্রথমে এলিমেন্টটিকে খুঁজে বের করতে হবে। একটি এলিমেন্টকে খুঁজে বের করার কয়েকটি উপায় রয়েছেঃ

  • id দ্বারা এইচটিএমএল এলিমেন্টটিকে খুঁজে বের করা
  • ট্যাগের নাম দ্বারা এইচটিএমএল এলিমেন্টটিকে খুঁজে বের করা
  • class নাম দ্বারা এইচটিএমএল এলিমেন্টটিকে খুঁজে বের করা
  • সিএসএস সিলেক্টর দ্বারা এইচটিএমএল এলিমেন্টটিকে খুঁজে বের করা
  • এইচটিএমএল অবজেক্ট কালেকশন দ্বারা এইচটিএমএল এলিমেন্টটিকে খুঁজে বের করা

Id দ্বারা এইচটিএমএল এলিমেন্টকে খুঁজে বের করা

একটি এলিমেন্টকে ডোম এর ভেতর খুঁজে বের করার সবচেয়ে সহজ উপায় হলো এলিমেন্টের Id ব্যবহার করা।

নিচের উদাহরণে id="intro" যুক্ত এলিমেন্টটিকে খুঁজে বের করা হল:

উদাহরণ

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

<h3 id="heading">স্যাট একাডেমী</h3>

<p id="test"></p>

<script>
var el = document.getElementById("heading");
document.getElementById("test").innerHTML = el.innerHTML + " বাংলাদেশের বৃহত্তম ওয়েবসাইট।";
</script>

</body>
</html>

ফলাফল



যদি এলিমেন্টটি খুঁজে পাওয়া যায় তাহলে মেথডটি এলিমেন্টকে অবজেক্ট হিসেবে রিটার্ন করবে।

যদি এলিমেন্টটি খুঁজে পাওয়া না যায় তাহলে el ভ্যারিয়েবলটি খালি থাকবে।


ট্যাগের নাম দ্বারা এইচটিএমএল এলিমেন্টকে খুঁজে বের করা

নিচের উদাহরণে সকল <p> এলিমেন্টকে খুঁজে বের করা হলোঃ

উদাহরণ

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

<p>স্যাট একাডেমী!</p>
<p>বাংলাদেশের বৃহত্তম ওয়েবসাইট।</p>
<p>এই উদাহরনে <b>getElementsByTagName</b> মেথড ব্যবহার করা হয়েছে।</p>

<p id="test"></p>

<script>
var el = document.getElementsByTagName("p");
document.getElementById("test").innerHTML = "প্রথম প্যারাগ্রাফের কন্টেন্ট হলো " + el[0].innerHTML;
</script>

</body>
</html>

ফলাফল



নিচের এই উদাহরণটি প্রথমে id="main" যুক্ত এলিমেন্টকে খুঁজে বের করবে এবং তারপর "main" এর মাঝের সকল <p> এলিমেন্টকে খুঁজে বের করবেঃ

উদাহরণ

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

<p>স্যাট একাডেমী!</p>

<div id="main">
<p>বাংলাদেশের বৃহত্তম ওয়েবসাইট।</p>
<p>এই উদাহরনে <b>getElementsByTagName</b> মেথড ব্যবহার করা হয়েছে।</p>
</div>

<p id="test"></p>

<script>
var mainEl = document.getElementById("main");
var el = mainEl.getElementsByTagName("p");
document.getElementById("test").innerHTML = "প্রথম প্যারাগ্রাফের কন্টেন্ট হলো " + el[0].innerHTML;
</script>

</body>
</html>

ফলাফল




Class নামের দ্বারা এইচটিএমএল এলিমেন্টকে খুঁজে বের করা

আপনি যদি একই নামের Class যুক্ত এইচটিএমএল এলিমেন্টটিকে খুঁজে বের করতে চান তাহলে getElementsByClassName() ব্যবহার করুন।

নিচের এই উদাহরনটিতে class="para" যুক্ত সকল এলিমেন্টকে রিটার্ন করে।

উদাহরণ

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

<p class="para">স্যাট একাডেমী!</p>
<p class="para">বাংলাদেশের বৃহত্তম ওয়েবসাইট।</p>
<p>এই উদাহরনে <b>getElementsByClassName</b> মেথড ব্যবহার করা হয়েছে।</p>

<p id="test"></p>

<script>
var el = document.getElementsByClassName("para");
document.getElementById("test").innerHTML = "প্রথম প্যারাগ্রাফের কন্টেন্ট হলো " + el[0].innerHTML;
</script>

</body>
</html>

ফলাফল



Class এর নাম দ্বারা এলিমেন্টকে খুঁজে বের করা, IE8 এবং এর আগের ভার্সনগুলোতে সাপোর্ট করে না।


CSS সিলেক্টর দ্বারা এইচটিএমএল এলিমেন্টকে খুঁজে বের করা

আপনি যদি নির্দিষ্ট সিএসএস সিলেক্টরযুক্ত(যেমনঃ id, class , type, এট্রিবিউট, এট্রিবিউটের ভ্যালু ইত্যাদি) সকল এইচটিএমএল এলিমেন্টকে খুঁজতে চান তবে querySelectorAll() মেথডটি ব্যবহার করুন।

নিচের এই উদাহরনটিতে class="para" যুক্ত সকল <p> এলিমেন্টকে রিটার্ন করে।

উদাহরণ

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

<p class="para">স্যাট একাডেমী!</p>
<p class="para">বাংলাদেশের বৃহত্তম ওয়েবসাইট।</p>
<p>এই উদাহরনে <b>querySelectorAll</b> মেথড ব্যবহার করা হয়েছে।</p>

<p id="test"></p>

<script>
var el = document.querySelectorAll(".para");
document.getElementById("test").innerHTML = "প্রথম প্যারাগ্রাফের কন্টেন্ট হলো " + el[0].innerHTML;
</script>

</body>
</html>

ফলাফল



querySelectorAll() মেথড দ্বারা এলিমেন্টকে খুঁজে বের করা, IE8 এবং এর আগের ভার্সনগুলোতে সাপোর্ট করে না।


এইচটিএমএল অবজেক্ট কালেকশন দ্বারা এইচটিএমএল এলিমেন্টকে খুঁজে বের করা

নিচের এই উদাহরণটিতে ফর্ম কালেকশনের মধ্য থেকে id="myForm" যুক্ত ফর্ম এলিমেন্টকে খুঁজে বের করে এবং সকল এলিমেন্টের ভ্যালু প্রদর্শন করে:

উদাহরণ

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

<form id="myForm" action="action_page.php">
  First name: <input type="text" name="fname" value="ফাতেমা"><br>
  Last name: <input type="text" name="lname" value="কনিকা"><br><br>
  <input type="submit" value="Submit">
</form> 

<p id="test"></p>

<p>এই ফর্মের ভ্যালু প্রদর্শন করার জন্য বাটনে ক্লিক করুন।</p>
<button onclick="myFunc()">ক্লিক করুন</button>

<script>
function myFunc() {
    var frm = document.forms["myForm"];
    var text = "";
    var i;
    for (i = 0; i < frm.length ;i++) {
        text += frm.elements[i].value + "<br>";
    }
    document.getElementById("test").innerHTML = text;
}
</script>

</body>
</html>

ফলাফল



নিচের এই এইচটিএমএল অবজেক্টকেও এক্সেস করা যায়ঃ

  • document.anchors
  • <!DOCTYPE html>
    <html>
    <head>
    <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
    </head>
    <body>
    
    <a name="html" href="../../html/index.php" target="_blank">এইচটিএমএল টিউটোরিয়াল</a>
    <a name="css" href="../../css/index.php" target="_blank">সিএসএস টিউটোরিয়াল</a>
    <a name="js" href="../../js/index.php" target="_blank">জাভাস্ক্রিপ্ট টিউটোরিয়াল</a>
    
    <p id="test"></p>
    
    <script>
    document.getElementById("test").innerHTML = document.anchors.length;
    </script>
    </body>
    </html>
    
    

    ফলাফল

    
    
    
  • document.body
  • <!DOCTYPE html>
    <html>
    <head>
    <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
    </head>
    <body>
    
    <p id="test">ইহা একটি প্যারাগ্রাফ</p>
    
    <button onclick="myFunc()">ক্লিক করুন</button> 
    
    <script>
    function myFunc(){
      alert(document.body.innerHTML);
    }
    </script>
    </body>
    </html>
    
    

    ফলাফল

    
    
    
  • document.documentElement
  • <!DOCTYPE html>
    <html>
    <head>
    <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
    </head>
    <body>
    
    <p id="test">ইহা একটি প্যারাগ্রাফ</p>
    
    <button onclick="myFunc()">ক্লিক করুন</button> 
    
    <script>
    function myFunc(){
      alert(document.documentElement.innerHTML);
    }
    </script>
    </body>
    </html>
    
    

    ফলাফল

    
    
    
  • document.embeds
  • <!DOCTYPE html>
    <html>
    <head>
    <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
    </head>
    <body>
    
    <p id="test"></p>
    
    <script>
    document.getElementById("test").innerHTML = document.embeds.length;
    </script>
    </body>
    </html>
    
    

    ফলাফল

    
    
    
  • document.forms
  • <!DOCTYPE html>
    <html>
    <head>
    <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
    </head>
    <body>
    
    <form id="myForm" action="action_page.php">
      First name: <input type="text" name="fname" value="ফাতেমা">
      Last name: <input type="text" name="lname" value="কনিকা">
      <input type="submit" value="Submit">
    </form> 
    
    <p id="test"></p>
    
    <script>
    document.getElementById("test").innerHTML = document.forms.length;
    </script>
    </body>
    </html>
    
    

    ফলাফল

    
    
    
  • document.head
  • <!DOCTYPE html>
    <html>
    <head>
    <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
    </head>
    <body> 
    
    <p id="test"></p>
    
    <script>
    document.getElementById("test").innerHTML = document.head;
    </script>
    </body>
    </html>
    
    

    ফলাফল

    
    
    
  • document.images
  • <!DOCTYPE html>
    <html>
    <head>
    <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
    </head>
    <body>
    
    <img src="../pic_htmltree.gif">
    
    <p id="test"></p>
    
    <script>
    document.getElementById("test").innerHTML = document.images.length;
    </script>
    </body>
    </html>
    
    

    ফলাফল

    
    
    
  • document.links
  • <!DOCTYPE html>
    <html>
    <head>
    <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
    </head>
    <body>
    
    <a href="../../html/index.php" target="_blank">এইচটিএমএল টিউটোরিয়াল</a>
    <a href="../../css/index.php" target="_blank">সিএসএস টিউটোরিয়াল</a>
    <a href="../../js/index.php" target="_blank">জাভাস্ক্রিপ্ট টিউটোরিয়াল</a>
    
    <p id="test"></p>
    
    <script>
    document.getElementById("test").innerHTML = document.links.length;
    </script>
    </body>
    </html>
    
    

    ফলাফল

    
    
    
  • document.scripts
  • <!DOCTYPE html>
    <html>
    <head>
    <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
    </head>
    <body>
    
    <p id="test"></p>
    
    <script>
    document.getElementById("test").innerHTML = document.scripts.length;
    </script>
    </body>
    </html>
    
    

    ফলাফল

    
    
    
  • document.title
  • <!DOCTYPE html>
    <html>
    <head>
    <title>জাভাস্ক্রিপ্ট উদাহরণ</title>
    </head>
    <body>
    
    <p id="test"></p>
    
    <script>
    document.getElementById("test").innerHTML = document.title;
    </script>
    </body>
    </html>
    
    

    ফলাফল