উত্তর:
আপনি .attributeযদি জাভাস্ক্রিপ্টে প্রোগ্রামেটিক অ্যাক্সেস চান তবে আপনার সর্বদা সরাসরি ফর্মটি ব্যবহার করা উচিত (তবে নীচের অংশে লিঙ্কটি দেখুন)। এটি বিভিন্ন ধরণের বৈশিষ্ট্যগুলি ("ভাবাবেগ" মনে করে) সঠিকভাবে পরিচালনা করতে হবে।
আপনি getAttribute/ setAttributeযখন ডোমটি যেমন হয় তেমন আচরণ করতে চান তখন ব্যবহার করুন (যেমন কেবল আক্ষরিক পাঠ্য)। বিভিন্ন ব্রাউজার দুটি বিভ্রান্ত। কুইর্কস মোডগুলি দেখুন : বৈশিষ্ট্য (ইন) সামঞ্জস্য ।
জাভাস্ক্রিপ্ট থেকে : সংজ্ঞা নির্দেশিকা , এটি বিষয়গুলি স্পষ্ট করে। এটি নোট করে যে এইচটিএমএল ডক্টের এইচটিএমলেমেন্ট উপাদানগুলি জেএস বৈশিষ্ট্য সংজ্ঞায়িত করে যা সমস্ত মানক এইচটিএমএল বৈশিষ্ট্যের সাথে মিল রাখে।
সুতরাং আপনাকে কেবল setAttributeঅ-মানক বৈশিষ্ট্যের জন্য ব্যবহার করতে হবে ।
উদাহরণ:
node.className = 'test'; // works
node.frameborder = '0'; // doesn't work - non standard attribute
node.setAttribute('frameborder', '0'); // worksnode.frameborderসংজ্ঞায়িত হয় না, সুতরাং মানটি ফিরে পেতে আপনাকে অবশ্যই অ্যাট্রিবিউট পেতে হবে।
frameBorderসরাসরি সেট করার ক্ষেত্রে কোনও ভুল নেই , তবে মূলধনটি নোট করুন। কেউ ভাবেন যে এইচটিএমএল বৈশিষ্ট্যের জাভাস্ক্রিপ্ট সমতুল্য উটকে কেস করা এটি একটি খুব ভাল ধারণা। আমি এর জন্য কোনও স্পেসিফিকেশন সন্ধান করতে সক্ষম হই নি, তবে নেটটি 12 টি নির্দিষ্ট ক্ষেত্রে (কমপক্ষে এইচটিএমএল 4 এর জন্য) এটি বলে মনে হচ্ছে agree উদাহরণস্বরূপ নিম্নলিখিত পোস্টটি দেখুন: drupal.org/node/1420706#comment-6423420
usemapঅ্যাট্রিবিউট যখন একটি চিত্রের জন্য পরিবর্তনশীল মানচিত্র তৈরি করার ডট স্বরলিপি ব্যবহার করে নির্ধারণ করা যাবে না। এটির জন্য প্রয়োজনীয় img.setAttribute('usemap', "#MapName");আপনার উত্তরটি কি usemapতাই বোঝায় যে এটি "অ-মানক"?
পূর্ববর্তী উত্তরগুলির কোনওটিই সম্পূর্ণ নয় এবং বেশিরভাগটিতে ভুল তথ্য রয়েছে।
একটি ডিওএম এলিমেন্টের বৈশিষ্ট্য অ্যাক্সেসের তিনটি উপায় রয়েছেজাভাস্ক্রিপ্টে । তিনটি ততক্ষণ আধুনিক ব্রাউজারগুলিতে নির্ভরযোগ্যভাবে কাজ করে যতক্ষণ আপনি সেগুলি কীভাবে ব্যবহার করবেন তা বুঝতে পারছেন।
element.attributesউপাদানসমূহ একটি সম্পত্তি আছে বৈশিষ্ট্যাবলী যে আয় একটি লাইভ NamedNodeMap এর ATTR অবজেক্ট। এই সংগ্রহের সূচকগুলি ব্রাউজারগুলির মধ্যে আলাদা হতে পারে। সুতরাং, আদেশ নিশ্চিত হয় না। NamedNodeMapবৈশিষ্ট্যগুলি যোগ করার এবং অপসারণের পদ্ধতি রয়েছে ( getNamedItemএবং setNamedItemযথাক্রমে)।
লক্ষ্য করুন যে এক্সএমএল স্পষ্টভাবে কেস সংবেদনশীল হলেও, ডিওএম স্পেক স্ট্রিংয়ের নামগুলিকে স্বাভাবিক করার জন্য আহ্বান জানিয়েছে , তাই নামগুলি getNamedItemকার্যকরভাবে ক্ষেত্রে সংবেদনশীল হয়ে উঠেছে।
var div = document.getElementsByTagName('div')[0];
//you can look up specific attributes
var classAttr = div.attributes.getNamedItem('CLASS');
document.write('attributes.getNamedItem() Name: ' + classAttr.name + ' Value: ' + classAttr.value + '<br>');
//you can enumerate all defined attributes
for(var i = 0; i < div.attributes.length; i++) {
var attr = div.attributes[i];
document.write('attributes[] Name: ' + attr.name + ' Value: ' + attr.value + '<br>');
}
//create custom attribute
var customAttr = document.createAttribute('customTest');
customAttr.value = '567';
div.attributes.setNamedItem(customAttr);
//retreive custom attribute
customAttr = div.attributes.getNamedItem('customTest');
document.write('attributes.getNamedItem() Name: ' + customAttr.name + ' Value: ' + customAttr.value + '<br>');<div class="class1" id="main" data-test="stuff" nonStandard="1234"></div>element.getAttributeওelement.setAttributeএই পদ্ধতিগুলি Elementঅ্যাক্সেস attributesএবং তার পদ্ধতিগুলির প্রয়োজন ছাড়াই সরাসরি উপস্থিত থাকে তবে একই ফাংশন সম্পাদন করে।
আবার, লক্ষ্য করুন যে স্ট্রিংয়ের নামটি সংবেদনশীল।
var div = document.getElementsByTagName('div')[0];
//get specific attributes
document.write('Name: class Value: ' + div.getAttribute('class') + '<br>');
document.write('Name: ID Value: ' + div.getAttribute('ID') + '<br>');
document.write('Name: DATA-TEST Value: ' + div.getAttribute('DATA-TEST') + '<br>');
document.write('Name: nonStandard Value: ' + div.getAttribute('nonStandard') + '<br>');
//create custom attribute
div.setAttribute('customTest', '567');
//retreive custom attribute
document.write('Name: customTest Value: ' + div.getAttribute('customTest') + '<br>');<div class="class1" id="main" data-test="stuff" nonStandard="1234"></div>element.idDOM অবজেক্টে সুবিধাজনক বৈশিষ্ট্য ব্যবহার করে অনেক বৈশিষ্ট্য অ্যাক্সেস করা যায়। কোন বৈশিষ্ট্য বিদ্যমান তা ডিওএম নোডের ধরণের উপর নির্ভর করে, কোন বৈশিষ্ট্য এইচটিএমএলে সংজ্ঞায়িত করা হয় তা নয়। বৈশিষ্ট্যগুলি ডিওএম অবজেক্টের প্রোটোটাইপ শৃঙ্খলে কোথাও সংজ্ঞায়িত করা হয়েছে। নির্দিষ্ট বৈশিষ্ট্যগুলি সংজ্ঞায়িত করা এলিমেন্টের ধরণের উপর নির্ভর করবে যা আপনি অ্যাক্সেস করছেন। উদাহরণস্বরূপ, classNameএবং সমস্ত ডিওএম নোডগুলিতে idসংজ্ঞায়িত Elementএবং উপস্থিত রয়েছে যা উপাদান (যেমন পাঠ্য বা মন্তব্য নোড নয়)। তবে valueআরও সংকীর্ণ। এটি সংজ্ঞায়িত হয়েছে HTMLInputElementএবং অন্যান্য উপাদানগুলির মধ্যে এটি উপস্থিত থাকতে পারে।
লক্ষ্য করুন যে জাভাস্ক্রিপ্টের বৈশিষ্ট্যগুলি কেস সংবেদনশীল। যদিও বেশিরভাগ বৈশিষ্ট্য ছোট হাতের ব্যবহার করবে তবে কিছুটি উটকেস। তাই নিশ্চিত হওয়ার জন্য সবসময়ই অনুমানটি পরীক্ষা করে দেখুন।
এই "চার্ট" এই ডিওএম অবজেক্টগুলির জন্য প্রোটোটাইপ চেইনের একটি অংশ ক্যাপচার করে। এটি সম্পূর্ণ করার কাছাকাছিও নয়, তবে এটি সামগ্রিক কাঠামোটি ধারণ করে।
____________Node___________
| | |
Element Text Comment
| |
HTMLElement SVGElement
| |
HTMLInputElement HTMLSpanElementvar div = document.getElementsByTagName('div')[0];
//get specific attributes
document.write('Name: class Value: ' + div.className + '<br>');
document.write('Name: id Value: ' + div.id + '<br>');
document.write('Name: ID Value: ' + div.ID + '<br>'); //undefined
document.write('Name: data-test Value: ' + div.dataset.test + '<br>'); //.dataset is a special case
document.write('Name: nonStandard Value: ' + div.nonStandard + '<br>'); //undefined<div class="class1" id="main" data-test="stuff" nonStandard="1234"></div>ক্যাভেট: এইচটিএমএল স্পেস কীভাবে সংজ্ঞা দেয় এবং আধুনিক ব্রাউজারগুলি বৈশিষ্ট্যগুলি পরিচালনা করে তা এই ব্যাখ্যা। আমি প্রাচীন, ভাঙ্গা ব্রাউজারগুলির সীমাবদ্ধতাগুলি মোকাবেলার চেষ্টা করিনি। আপনার যদি পুরানো ব্রাউজারগুলি সমর্থন করতে হয় তবে এই তথ্য ছাড়াও, আপনাকে সেই ব্রাউজারগুলিতে কী ভাঙা আছে তা জানতে হবে।
setAttributeএআরআইএর বৈশিষ্ট্যগুলি পরিবর্তন করার সময় যেখানে প্রয়োজনীয় ছিল সেখানে একটি ঘটনা খুঁজে পেয়েছি , কারণ এখানে কোনও সম্পর্কিত বৈশিষ্ট্য নেই। উদাহরণ স্বরূপ
x.setAttribute('aria-label', 'Test');
x.getAttribute('aria-label');এর মতো কোনও x.arialabelবা কিছুই নেই , সুতরাং আপনার সেটঅ্যাট্রিবিউট ব্যবহার করতে হবে।
সম্পাদনা করুন: x ["আরিয়া-লেবেল"] কাজ করে না । আপনার সত্যিকারের সেটঅ্যাট্রিবিউট দরকার।
x.getAttribute('aria-label')
null
x["aria-label"] = "Test"
"Test"
x.getAttribute('aria-label')
null
x.setAttribute('aria-label', 'Test2')
undefined
x["aria-label"]
"Test"
x.getAttribute('aria-label')
"Test2"এই উত্তরগুলি বৈশিষ্ট্য এবং বৈশিষ্ট্যগুলির মধ্যে বিশাল বিভ্রান্তিকে সত্যই সম্বোধন করছে না । এছাড়াও, জাভাস্ক্রিপ্ট প্রোটোটাইপের উপর নির্ভর করে, কখনও কখনও আপনি কোনও বৈশিষ্ট্য অ্যাক্সেস করতে কোনও উপাদানটির সম্পত্তি ব্যবহার করতে পারেন এবং কখনও কখনও আপনি পারেন না।
প্রথমত, আপনাকে মনে রাখতে হবে যে HTMLElementএটি একটি জাভাস্ক্রিপ্ট অবজেক্ট। সমস্ত বস্তুর মতো, তাদেরও বৈশিষ্ট্য রয়েছে। অবশ্যই, আপনি নিজের অভ্যন্তরে যে কোনও কিছু বলতে চান এমন একটি সম্পত্তি তৈরি করতে পারেন HTMLElementতবে এটি ডোমের সাথে (পৃষ্ঠায় কী রয়েছে) কিছুই করার দরকার নেই। ডট স্বরলিপি ( .) বৈশিষ্ট্যের জন্য । এখন, কিছু বিশেষ সম্পত্তি আছে যা ম্যাপ করা হয়েছে এবং সেই সময় বা লেখার সময় কেবলমাত্র 4 রয়েছে যা নিশ্চিত করা হয় (এর পরে আরও কিছু)।
সমস্ত HTMLElementগুলি বলা সম্পত্তি অন্তর্ভুক্তattributes । HTMLElement.attributesএটি একটি লাইভ NamedNodeMap অবজেক্ট যা ডিওমের উপাদানগুলির সাথে সম্পর্কিত। "লাইভ" এর অর্থ হ'ল যখন নোডটি ডোমে পরিবর্তিত হয় তখন সেগুলি জাভাস্ক্রিপ্টের দিকে পরিবর্তিত হয় এবং এর বিপরীতে। এই ক্ষেত্রে, ডিওএম বৈশিষ্ট্যগুলি হ'ল প্রশ্নযুক্ত নোড। এ Nodeএর একটি .nodeValueসম্পত্তি রয়েছে যা আপনি পরিবর্তন করতে পারবেন। NamedNodeMapঅবজেক্টগুলির একটি ফাংশন বলা হয় setNamedItemযেখানে আপনি পুরো নোড পরিবর্তন করতে পারেন। আপনি কী দ্বারা সরাসরি নোড অ্যাক্সেস করতে পারেন। উদাহরণস্বরূপ, আপনি বলতে পারেন .attributes["dir"]যা কোনটি সমান .attributes.getNamedItem('dir');(সাইড নোট, NamedNodeMapকেস-সংবেদনশীল, তাই আপনি পাসও করতে পারেন 'DIR');
HTMLElementযেখানে আপনি কেবল কল করতে পারেন সেখানে সরাসরি একটি অনুরূপ ফাংশন রয়েছেsetAttribute যা অস্তিত্বহীন নোড তৈরি করে যদি এটি উপস্থিত না থাকে এবং সেট করে nodeValue। এছাড়াও রয়েছে কিছু বৈশিষ্ট্য আপনি বৈশিষ্ট্য যেমন সরাসরি অ্যাক্সেস করতে পারেন HTMLElementমাধ্যমে বিশেষ বৈশিষ্ট্য যেমন dir। এটি দেখতে কেমন লাগে তার মোটামুটি ম্যাপিং এখানে দেওয়া হয়েছে:
HTMLElement {
attributes: {
setNamedItem: function(attr, newAttr) {
this[attr] = newAttr;
},
getNamedItem: function(attr) {
return this[attr];
},
myAttribute1: {
nodeName: 'myAttribute1',
nodeValue: 'myNodeValue1'
},
myAttribute2: {
nodeName: 'myAttribute2',
nodeValue: 'myNodeValue2'
},
}
setAttribute: function(attr, value) {
let item = this.attributes.getNamedItem(attr);
if (!item) {
item = document.createAttribute(attr);
this.attributes.setNamedItem(attr, item);
}
item.nodeValue = value;
},
getAttribute: function(attr) {
return this.attributes[attr] && this.attributes[attr].nodeValue;
},
dir: // Special map to attributes.dir.nodeValue || ''
id: // Special map to attributes.id.nodeValue || ''
className: // Special map to attributes.class.nodeValue || ''
lang: // Special map to attributes.lang.nodeValue || ''
}সুতরাং আপনি dirবৈশিষ্ট্যগুলি 6 টি পরিবর্তন করতে পারেন :
// 1. Replace the node with setNamedItem
const newAttribute = document.createAttribute('dir');
newAttribute.nodeValue = 'rtl';
element.attributes.setNamedItem(newAttribute);
// 2. Replace the node by property name;
const newAttribute2 = document.createAttribute('dir');
newAttribute2.nodeValue = 'rtl';
element.attributes['dir'] = newAttribute2;
// OR
element.attributes.dir = newAttribute2;
// 3. Access node with getNamedItem and update nodeValue
// Attribute must already exist!!!
element.attributes.getNamedItem('dir').nodeValue = 'rtl';
// 4. Access node by property update nodeValue
// Attribute must already exist!!!
element.attributes['dir'].nodeValue = 'rtl';
// OR
element.attributes.dir.nodeValue = 'rtl';
// 5. use setAttribute()
element.setAttribute('dir', 'rtl');
// 6. use the UNIQUELY SPECIAL dir property
element["dir"] = 'rtl';
element.dir = 'rtl';
আপনি পদ্ধতি # 1-5 সঙ্গে সব সম্পত্তি আপডেট করতে পারেন, কিন্তু শুধুমাত্র dir, id, lang, এবং classNameপদ্ধতি # 6।
HTMLElementএই 4 টি বিশেষ সম্পত্তি আছে। কিছু উপাদান HTMLElementআরও ম্যাপযুক্ত বৈশিষ্ট্যযুক্ত শ্রেণীর বর্ধিত হয় । উদাহরণস্বরূপ, HTMLAnchorElementআছেHTMLAnchorElement.href , HTMLAnchorElement.relআর HTMLAnchorElement.target। তবে, সাবধান , যদি আপনি সেই বৈশিষ্ট্যগুলিকে এমন বৈশিষ্ট্যগুলি সেট করে থাকেন যার বিশেষ বৈশিষ্ট্যগুলি নেই (ক এর মতো HTMLTableElement) তবে বৈশিষ্ট্যগুলি পরিবর্তন করা হয় না এবং সেগুলি কেবল সাধারণ কাস্টম বৈশিষ্ট্য। আরও ভালভাবে বুঝতে, এর উত্তরাধিকারের উদাহরণ এখানে:
HTMLAnchorElement extends HTMLElement {
// inherits all of HTMLElement
href: // Special map to attributes.href.nodeValue || ''
target: // Special map to attributes.target.nodeValue || ''
rel: // Special map to attributes.ref.nodeValue || ''
}এখন বড় সতর্কতা: সমস্ত জাভাস্ক্রিপ্ট অবজেক্টের মতো , আপনি কাস্টম বৈশিষ্ট্য যুক্ত করতে পারেন। তবে, এগুলি ডোমে কোনও পরিবর্তন করবে না। আপনি করতে পারেন:
const newElement = document.createElement('div');
// THIS WILL NOT CHANGE THE ATTRIBUTE
newElement.display = 'block';তবে এটি একই রকম
newElement.myCustomDisplayAttribute = 'block';এর অর্থ একটি কাস্টম সম্পত্তি যুক্ত করা যুক্ত করার সাথে লিঙ্ক দেওয়া হবে না.attributes[attr].nodeValue ।
কর্মক্ষমতা
পার্থক্যটি দেখানোর জন্য আমি একটি জেএসপিআইপি পরীক্ষার কেস তৈরি করেছি: https://jsperf.com/set-attribute-compistance । মূলত, ক্রম:
dir,id , className)।element.attributes.ATTRIBUTENAME.nodeValue = element.attributes.getNamedItem(ATTRIBUTENAME).nodeValue = newValueelement.attributes.ATTRIBUTENAME = newNode element.attributes.setNamedItem(ATTRIBUTENAME) = newNodeউপসংহার (টিএল; ডিআর)
থেকে বিশেষ সম্পত্তি ম্যাপিং ব্যবহার করুন HTMLElement: element.dir, element.id, element.className, অথবা element.lang।
আপনি যদি 100% নিশ্চিত হন যে উপাদানটি HTMLElementএকটি বিশেষ সম্পত্তি সহ একটি বর্ধিত , তবে সেই বিশেষ ম্যাপিংটি ব্যবহার করুন। (আপনি চেক করতে পারেন if (element instanceof HTMLAnchorElement))।
আপনি যদি 100% নিশ্চিত হন যে গুণটি ইতিমধ্যে বিদ্যমান, ব্যবহার করুন element.attributes.ATTRIBUTENAME.nodeValue = newValue।
যদি না হয়, ব্যবহার করুন setAttribute()।
classListএটির 100% নিশ্চয়তা রয়েছে, তবে এটি কোনও স্ট্রিং সম্পত্তি নয়, এটি একটি লাইভ DOMTokenListঅবজেক্ট। .classNameসরাসরি সেট করা ম্যানিপুলেট করার চেয়ে দ্রুত classList, তবে আপনি পুরো জিনিসটি ওভাররাইট করে তুলবেন।
.value, আপনি এর অভ্যন্তরীণ মানটি পরিবর্তন করছেন HTMLInputElementযা এর পরে গুণাবলীতে প্রতিফলিত হয়। তাদেরও হতে হবে না string। অভ্যন্তরীণভাবে.valueAsNumber পরিবর্তিত হবে , এবং এর ফর্মটি বৈশিষ্ট্যে প্রদর্শিত হবে । বিকাশকারী.মোজিলা.আর.ইন-value stringvalue
"জাভাস্ক্রিপ্টে সেটঅ্যাট্রিবিউট বনাম .attribute = কখন ব্যবহার করবেন?"
একটি সাধারণ নিয়ম ব্যবহার করা হয় .attribute এবং এটি ব্রাউজারে কাজ করে কিনা তা পরীক্ষা করে দেখা হয়।
..যদি এটি ব্রাউজারে কাজ করে, আপনি যেতে ভাল।
..If এটা না, ব্যবহার .setAttribute(attribute, value)পরিবর্তে .attributeজন্য যে অ্যাট্রিবিউট।
সমস্ত বৈশিষ্ট্যের জন্য ধুয়ে ফেলা - পুনরাবৃত্তি।
ঠিক আছে, আপনি যদি অলস হন তবে আপনি সহজভাবে ব্যবহার করতে পারেন .setAttribute। এটি বেশিরভাগ ব্রাউজারে সূক্ষ্মভাবে কাজ করা উচিত। (যদিও সমর্থনকারী ব্রাউজারগুলি এর .attributeচেয়ে ভাল এটি অনুকূল করতে পারে .setAttribute(attribute, value)))
এটি এমন এক ক্ষেত্রে দেখায় যেখানে সেটএট্রিবিউট ব্যবহার করা ভাল:
Dev.Opera - দক্ষ জাভাস্ক্রিপ্ট
var posElem = document.getElementById('animation');
var newStyle = 'background: ' + newBack + ';' +
'color: ' + newColor + ';' +
'border: ' + newBorder + ';';
if(typeof(posElem.style.cssText) != 'undefined') {
posElem.style.cssText = newStyle;
} else {
posElem.setAttribute('style', newStyle);
}posElem.style = newStyleসমস্ত ব্রাউজার (FIREFOX আমার জন্য চাকরি করতেন) কাজ নাও? এটি কি কেবল সম্পাদনার কারণে পুনরায় setAttributeরঙগুলি এড়িয়ে চলা পছন্দ করা হয়? কি posElem.style.cssText = newStyleতারপর আরো perfomrant posElem.style = newStyle?
কোনও উপাদানটিতে বৈশিষ্ট্য স্থাপনের জন্য পদ্ধতি (উদাহরণস্বরূপ শ্রেণি): 1. এলক্লাসনেম = স্ট্রিং ২. এল.সেটআট্রিবিউট ('শ্রেণি', স্ট্রিং) ৩. এল.ট্রিবিউটস.সেটনমেড আইটেম (অবজেক্ট) ৪. এল.সেটআট্রিবিউটনোড (নোড)
আমি একটি সাধারণ বেনমার্ক পরীক্ষা করেছি ( এখানে )
এবং এটি দেখে মনে হয় যে সেটএট্রিবিউটনোড সেটআট্রিবিউট ব্যবহার করে প্রায় 3 গুণ বেশি দ্রুত।
সুতরাং যদি কর্মক্ষমতা একটি সমস্যা হয় - "setAttributeNode" ব্যবহার করুন
এটি সম্পর্কিত গুগল এপিআই স্ক্রিপ্ট থেকে আকর্ষণীয় গ্রহণ :
তারা এটি এটি করে:
var scriptElement = document.createElement("script");
scriptElement = setAttribute("src", "https://some.com");
scriptElement = setAttribute("nonce", "https://some.com");
scriptElement.async = "true";লক্ষ্য করুন, তারা কীভাবে setAttribute"src" এবং "ননস" .async = ...ব্যবহার করে তবে "async" বৈশিষ্ট্যের জন্য।
আমি ১০০% নিশ্চিত নই, তবে সম্ভবত এ কারণেই "অ্যাসিঙ্ক" কেবলমাত্র ব্রাউজারগুলিতে সমর্থিত যা সরাসরি .attr =অ্যাসাইনমেন্ট সমর্থন করে । সুতরাং, চেষ্টা করার কোনও বুদ্ধি নেইsestAttribute("async") কারণ ব্রাউজার যদি বুঝতে না পারে.async=... - এটি "অ্যাসিঙ্ক" বৈশিষ্ট্যটি বুঝতে পারে না।
আশা করি, এটি আমার চলমান "আন-মিনিফাইটি জিএপিআই" গবেষণা প্রকল্পের সহায়ক অন্তর্দৃষ্টি । আমি ভুল হলে শুধরে.
.setAttribute()করতে[key] = value, সবকিছু জাদুর কাজ শুরু করে।