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

« পূর্ববর্তী

পরবর্তী »

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

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

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

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

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>

ফলাফল

« পূর্ববর্তী

পরবর্তী »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

জেএস টিউটোরিয়াল

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

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

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

জেএস ফাংশন-Function

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

জেএস ফর্ম-Form

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

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

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

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

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

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

উদাহরণ

ফলাফল

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

উদাহরণ

ফলাফল

উদাহরণ

ফলাফল

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

উদাহরণ

ফলাফল

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

উদাহরণ

ফলাফল

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

উদাহরণ

ফলাফল

ফলাফল

ফলাফল

ফলাফল

ফলাফল

ফলাফল

ফলাফল

ফলাফল

ফলাফল

ফলাফল

ফলাফল

আমাদের টিউটোরিয়াল সমূহ

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য