কম্পিউটার টিউটোরিয়াল

HTML DOM attributes প্রোপার্টি

HTML ট্যাগের ভিতরে অ্যাট্রিবিউটের সাথে যুক্ত HTML DOM attributes প্রোপার্টি একটি দিয়ে যেও নোডের অ্যাট্রিবিউটের কালেকশন NamedNodeMap টাইপের একটি অবজেক্ট হিসেবে রিটার্ন করে। এই নোডগুলো অ্যাক্সেস করতে আমরা ইনডেক্স নম্বর ব্যবহার করতে পারি। ইনডেক্সিং 0 থেকে শুরু হয়।

সিনট্যাক্স

HTML DOM attributes প্রোপার্টির সিনট্যাক্স নিচে দেওয়া হলো:

node.attributes

উদাহরণ

attributes প্রোপার্টির একটি উদাহরণ দেখি:

<!DOCTYPE html> <html> <body> <p>Click the button the second attribute of the below list</p> <button id="Btn" onclick="attributeFunc()">ATTR NAME</button> <button id="Btn" onclick="attrLength()">ATTR LENGTH</button> <ol id="LIST" type="A" start="5" reversed> <li>ONE</li> <li>TWO</li> <li>THREE</li> </ol> <p id="SAMPLE"></p> <script>    function attributeFunc() {       var x = document.getElementById("LIST").attributes[2].name;       document.getElementById("SAMPLE").innerHTML = x;    }    function attrLength(){       var x = document.getElementById("LIST").attributes.length;       document.getElementById("SAMPLE").innerHTML = x;    } </script> </body> </html>

আউটপুট

এটি নিচের আউটপুট দেবে:

HTML DOM attributes প্রোপার্টি

ATTR NAME বাটনে ক্লিক করার পর:

HTML DOM attributes প্রোপার্টি

ATTR LENGTH বাটনে ক্লিক করার পর:

HTML DOM attributes প্রোপার্টি

উপরের উদাহরণে:

আমরা প্রথমে id, type এবং reversed অ্যাট্রিবিউট সহ একটি অর্ডার্ড লিস্ট তৈরি করেছি।

<ol id="LIST" type="A" start="5" reversed> <li>ONE</li> <li>TWO</li> <li>THREE</li> </ol>

আমরা তারপর ATTR NAME এবং ATTR LENGTH নামে দুটি বাটন তৈরি করেছি যারা যথাক্রমে attributeFunc() এবং attrLength() ফাংশন এক্সিকিউট করবে।

<button id="Btn" onclick="attributeFunc()">ATTR NAME</button> <button id="Btn" onclick="attrLength()">ATTR LENGTH</button>

attributeFunc() ফাংশন id "LIST" সহ এলিমেন্টটি পায় এবং attributes.name প্রোপার্টি ব্যবহার করে এর ২য় অ্যাট্রিবিউটের নাম পায়। ২য় ইনডেক্সের অ্যাট্রিবিউট নামটি তারপর id "Sample" সহ প্যারাগ্রাফে প্রদর্শিত হয়:

function attributeFunc() {    var x = document.getElementById("LIST").attributes[2].name;    document.getElementById("SAMPLE").innerHTML = x; }

attrLenght() ফাংশনও id "LIST" সহ এলিমেন্টটি পায় এবং attributes.length ব্যবহার করে সেই নির্দিষ্ট এলিমেন্টের কতগুলো অ্যাট্রিবিউট আছে সেটা পায়, যা আমাদের কেসে 4 রিটার্ন করে। মান 4টি তারপর id SAMPLE সহ প্যারাগ্রাফে প্রদর্শিত হয়:

function attrLength(){    var x = document.getElementById("LIST").attributes.length;    document.getElementById("SAMPLE").innerHTML = x; }

  1. HTML DOM Style listStyleImage প্রপার্টি

  2. HTML DOM name প্রপার্টি

  3. HTML DOM textContent প্রপার্টি

  4. HTML DOM Ol type প্রপার্টি