जावास्क्रिप्ट में setAttribute बनाम .attribute = का उपयोग कब करें?

234

setAttributeडॉट ( .) विशेषता अंकन के बजाय उपयोग करने के आसपास एक सर्वोत्तम-प्रथा विकसित की गई है?

उदाहरण के लिए:

myObj.setAttribute("className", "nameOfClass");
myObj.setAttribute("id", "someID");

या

myObj.className = "nameOfClass";
myObj.id = "someID";
javascript  attributes  setattribute 
— Francisc
स्रोत
1
जब मैंने स्विच .setAttribute()किया [key] = value, तो सब कुछ जादुई रूप से काम करने लगा।
— एंड्रयू

जवाबों:

73

.attributeयदि आप जावास्क्रिप्ट में प्रोग्रामेटिक एक्सेस चाहते हैं तो आपको हमेशा डायरेक्ट फॉर्म का उपयोग करना चाहिए (लेकिन नीचे दिए गए quirksmode लिंक को देखें)। इसे विभिन्न प्रकार की विशेषताओं ("ऑनलोड") को सही ढंग से संभालना चाहिए।

उपयोग करें getAttribute/ setAttributeजब आप DOM से निपटना चाहते हैं तो यह है (उदाहरण के लिए केवल शाब्दिक पाठ)। विभिन्न ब्राउज़र दोनों को भ्रमित करते हैं। Quirks मोड देखें : विशेषता (इन) संगतता ।

127
यह उत्तर पर्याप्त रूप से स्पष्ट नहीं है ... मुझे नहीं लगता कि मैं अभी तक इसे समझ पाया हूं।
— temporary_user_name
1
@ एरोविस्टा - इस पर आपसे सहमत हैं। एक नया उत्तर जोड़ा जो स्पष्ट रूप से स्पष्ट है।
— जैतून
1
लेकिन अगर आप एलिमेंट के इनर HTML को प्रभावित करना चाहते हैं, तो आपको setAttribute का उपयोग करना होगा ...
— Michael
3
आपका मतलब है outterHTML * :)
— megawac
4
मैंने पाया कि a.href पूर्ण url देता है, लेकिन getAttribute ('href') उस विशेषता में ठीक वैसा ही देता है (<a href = "/ help" ...)।
— प्लास्टिक खरगोश
144

से जावास्क्रिप्ट: यह निश्चित गाइड , यह चीजों को स्पष्ट करता है। यह नोट करता है कि HTML डॉक्यूमेंट के HTMLElement ऑब्जेक्ट जेएस गुणों को परिभाषित करते हैं जो सभी मानक HTML विशेषताओं के अनुरूप हैं।

इसलिए आपको केवल setAttributeगैर-मानक विशेषताओं के लिए उपयोग करने की आवश्यकता है ।

उदाहरण:

node.className = 'test'; // works
node.frameborder = '0'; // doesn't work - non standard attribute
node.setAttribute('frameborder', '0'); // works
— olan
स्रोत
2
और इसके अलावा, यह आपके उदाहरण में अंतिम सेटट्रेक्टर के बाद दिखाई देता है, इसे node.frameborderपरिभाषित नहीं किया गया है, इसलिए आपको मूल्य वापस पाने के लिए getAttribute करना होगा।
— माइकल
5
@ मिचेल सही - यदि आप सेटअटेरिब्यूट का उपयोग मूल्य निर्धारित करने के लिए करते हैं, तो आपको इसे पुनः प्राप्त करने के लिए getAttribute का उपयोग करना होगा।
— जैतून
3
frameBorderसीधे सेटिंग में कुछ भी गलत नहीं है , लेकिन कैपिटलाइज़ेशन पर ध्यान दें। किसी ने सोचा कि यह HTML विशेषताओं के जावास्क्रिप्ट समकक्षों को व्यवस्थित करने के लिए एक अच्छा विचार है। मैं इसके लिए कोई विनिर्देश खोजने में कामयाब नहीं हुआ, लेकिन नेट इस बात से सहमत है कि यह 12 विशिष्ट मामलों (HTML 4 के लिए कम से कम) का मामला है। उदाहरण के लिए निम्न पोस्ट देखें: drupal.org/node/1420706#comment-6423420
— aaaaaaaaaaaa
1
usemapविशेषता किसी छवि के लिए गतिशील रूप से नक्शा बनाने डॉट नोटेशन का उपयोग कर सेट नहीं किया जा सकता। इसके लिए img.setAttribute('usemap', "#MapName");आपके उत्तर का मतलब है कि usemap"अमानक" है?
— mseifert
1
यह ज्यादातर गलत है। कुछ विशेषताओं में परिभाषित गुण हैं, इसलिए नहीं। यह वास्तव में है कि उन्होंने कैसे युक्ति लिखी है। यह विशेषताओं के मानक होने या न होने के कारण कुछ भी नहीं है। हालाँकि, यह सच है कि कोई भी मानक गुण केवल getAttribute () के साथ ही एक्सेस किए जा सकते हैं।
— बेन
79

पिछले उत्तरों में से कोई भी पूर्ण नहीं है और अधिकांश में गलत सूचना है।

जावास्क्रिप्ट में एक DOM तत्व की विशेषताओं तक पहुँचने के तीन तरीके हैं । तीनों आधुनिक ब्राउज़रों में मज़बूती से काम करते हैं जब तक आप समझते हैं कि उनका उपयोग कैसे करना है।

1। element.attributes

तत्वों कोई संपत्ति है, जिम्मेदार बताते हैं कि रिटर्न एक जीवित NamedNodeMap की ATTR वस्तुओं। इस संग्रह के सूचकांक ब्राउज़रों के बीच भिन्न हो सकते हैं। इसलिए, आदेश की गारंटी नहीं है। NamedNodeMapविशेषताओं को जोड़ने और हटाने की विधियाँ हैं ( getNamedItemऔर setNamedItem, क्रमशः)।

ध्यान दें कि यद्यपि XML स्पष्ट रूप से संवेदनशील है, लेकिन स्ट्रिंग के नामों के लिए DOM कल्पना सामान्यीकृत है , इसलिए पारित किए गए नाम 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>
स्निपेट का विस्तार करें

2. 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>
स्निपेट का विस्तार करें

3. DOM ऑब्जेक्ट पर गुण, जैसे element.id

DOM ऑब्जेक्ट पर सुविधाजनक गुणों का उपयोग करके कई विशेषताओं तक पहुँचा जा सकता है। कौन सी विशेषताएँ मौजूद हैं यह DOM नोड के प्रकार पर निर्भर करता है, न कि कौन सी विशेषताएँ HTML में परिभाषित की गई हैं। गुणों को प्रश्न में DOM ऑब्जेक्ट के प्रोटोटाइप चेन में कहीं परिभाषित किया गया है। परिभाषित विशिष्ट गुण आपके द्वारा एक्सेस किए जाने वाले तत्व के प्रकार पर निर्भर करेगा। उदाहरण के लिए, classNameऔर idउन Elementसभी डोम नोड्स पर परिभाषित और मौजूद हैं जो तत्व हैं (यानी पाठ या टिप्पणी नोड नहीं)। लेकिन valueअधिक संकीर्ण है। यह HTMLInputElementअन्य तत्वों पर मौजूद नहीं है और इसमें परिभाषित नहीं है।

ध्यान दें कि जावास्क्रिप्ट गुण संवेदनशील हैं। हालांकि अधिकांश संपत्तियां लोअरकेस का उपयोग करेंगी, कुछ ऊंट हैं। इसलिए हमेशा सुनिश्चित होने के लिए जांच करें।

यह "चार्ट" इन DOM ऑब्जेक्ट्स के लिए प्रोटोटाइप चेन के एक हिस्से को कैप्चर करता है। यह पूर्ण होने के करीब भी नहीं है, लेकिन यह समग्र संरचना को पकड़ लेता है।

                      ____________Node___________
                      |               |         |
                   Element           Text   Comment
                   |     |
           HTMLElement   SVGElement
           |         |
HTMLInputElement   HTMLSpanElement

उदाहरण उपयोग:

var 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>
स्निपेट का विस्तार करें

कैविएट: यह एक व्याख्या है कि HTML कल्पना कैसे परिभाषित करती है और आधुनिक ब्राउज़र विशेषताओं को संभालते हैं। मैंने प्राचीन, टूटे हुए ब्राउज़रों की सीमाओं से निपटने का प्रयास नहीं किया। यदि आपको पुराने ब्राउज़रों का समर्थन करने की आवश्यकता है, तो इस जानकारी के अलावा, आपको यह जानना होगा कि उन ब्राउज़रों में क्या टूटा हुआ है।

— बेन
स्रोत
इसे साफ़ करने के लिए धन्यवाद। मैं उत्सुक हूं, IE के कौन से संस्करण 'आधुनिक' माने जाते हैं और HTML युक्ति का अनुसरण करते हैं?
— जकदेव
3
@jkdev IE कभी आधुनिक नहीं हुआ। जो कभी बूढ़ा हो जाता है।
— सूरज जैन
इस तरह के एक विस्तृत जवाब के लिए धन्यवाद, मैंने DOM के बारे में बहुत कुछ पढ़ा है और HTMLElement की तरह इनहेरिटेंस एलीमेंट से विरासत में मिला है और इसी तरह, आपका जवाब सही समझ में आता है।
— सूरज जैन
16

एक मामला मैंने पाया कि setAttributeएआरआईए विशेषताओं को बदलते समय आवश्यक कहां है, क्योंकि इसके अनुरूप गुण नहीं हैं। उदाहरण के लिए

x.setAttribute('aria-label', 'Test');
x.getAttribute('aria-label');

ऐसा x.arialabelकुछ नहीं है या ऐसा कुछ नहीं है, इसलिए आपको सेटआटर्बेंट का उपयोग करना होगा।

संपादित करें: x ["aria-label"] काम नहीं करता है । आपको वास्तव में सेटआट्रिब्यूट की जरूरत है।

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"
— सुरमा
स्रोत
वास्तव में वास्तव में जावास्क्रिप्ट में आप इस एक्स ["
— aria-
@fareednamrouti जो काम नहीं करता है। मैंने अभी इसका परीक्षण किया। JS गुण html विशेषताओं को प्रभावित नहीं करते हैं। तुम सच में यहाँ सेट की जरूरत है।
— एंटीमनी
@Antimony यह अजीब है, लेकिन हाँ आप 100% सही हैं, मैं मतदान करूंगा
— फरीद अलनमौरी
2
क्या आप सुनिश्चित हैं कि वहाँ ariaLabel नहीं है?
— jgmjgm
8

ये जवाब वास्तव में गुणों और विशेषताओं के बीच बड़े भ्रम को संबोधित नहीं कर रहे हैं । इसके अलावा, जावास्क्रिप्ट प्रोटोटाइप के आधार पर, कभी-कभी आप किसी गुण को एक्सेस करने के लिए किसी तत्व की संपत्ति का उपयोग कर सकते हैं और कभी-कभी आप नहीं कर सकते।

सबसे पहले, आपको यह याद रखना होगा कि HTMLElementएक जावास्क्रिप्ट ऑब्जेक्ट है। सभी वस्तुओं की तरह, उनके पास गुण हैं। निश्चित रूप से, आप एक संपत्ति बना सकते हैं जिसे लगभग कुछ भी कहा जा सकता है जिसे आप अंदर चाहते हैं HTMLElement, लेकिन इसे DOM (पेज पर क्या है) के साथ कुछ भी करने की ज़रूरत नहीं है। डॉट नोटेशन ( .) गुणों के लिए है । अब, कुछ विशेष गुण हैं जो विशेषताओं के लिए मैप किए जाते हैं, और उस समय या लिखते समय केवल 4 होते हैं जिनकी गारंटी होती है (उस पर बाद में अधिक)।

सभी HTMLElements नामक एक संपत्ति शामिल हैं attributes। HTMLElement.attributesएक जीवित NamedNodeMap वस्तु है जो DOM में तत्वों से संबंधित है। "लाइव" का अर्थ है कि जब डोम में नोड बदलता है, तो वे जावास्क्रिप्ट पक्ष पर बदलते हैं, और इसके विपरीत। इस मामले में DOM विशेषताएँ, प्रश्न में नोड्स हैं। ए के 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 के विस्तार

HTMLElementउन 4 विशेष गुणों है। कुछ तत्व विस्तारित वर्ग के HTMLElementहैं और भी अधिक मैप किए गए गुण हैं। उदाहरण के लिए, HTMLAnchorElementहै HTMLAnchorElement.href, HTMLAnchorElement.relऔर HTMLAnchorElement.target। लेकिन, सावधान रहें , यदि आप उन गुणों को उन तत्वों पर सेट करते हैं, जिनमें वे विशेष गुण नहीं हैं (जैसे कि a 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 जोड़ने से लिंक नहीं किया जाएगा ।

प्रदर्शन

मैंने अंतर दिखाने के लिए एक jsperf टेस्ट केस बनाया है: https://jsperf.com/set-attribute-comparison । मूल रूप से, क्रम में:

  1. कस्टम गुण क्योंकि वे DOM को प्रभावित नहीं करते हैं और विशेषता नहीं हैं ।
  2. ब्राउज़र द्वारा प्रदान की विशेष मैपिंग ( dir, id, className)।
  3. यदि विशेषताएँ पहले से मौजूद हैं ,element.attributes.ATTRIBUTENAME.nodeValue =
  4. setAttribute ();
  5. यदि विशेषताएँ पहले से मौजूद हैं ,element.attributes.getNamedItem(ATTRIBUTENAME).nodeValue = newValue
  6. element.attributes.ATTRIBUTENAME = newNode
  7. element.attributes.setNamedItem(ATTRIBUTENAME) = newNode

निष्कर्ष (TL, DR)

  • से विशेष संपत्ति मैपिंग का प्रयोग करें HTMLElement: element.dir, element.id, element.className, या element.lang।

  • यदि आप 100% सुनिश्चित हैं कि तत्व HTMLElementएक विशेष संपत्ति के साथ विस्तारित है, तो उस विशेष मैपिंग का उपयोग करें। (आप के साथ जाँच कर सकते हैं if (element instanceof HTMLAnchorElement))।

  • यदि आप 100% सुनिश्चित हैं कि विशेषता पहले से मौजूद है, तो उपयोग करें element.attributes.ATTRIBUTENAME.nodeValue = newValue।

  • यदि नहीं, तो उपयोग करें setAttribute()।

— छोटी सी बात पर बुरा मानना
स्रोत
आपने इन चार प्रॉपर्टी मैपिंग का उल्लेख किया है: dir, id, className, और lang। क्लासिस्ट के बारे में क्या? क्या क्लासिस्ट एक संपत्ति मानचित्रण है जो अस्तित्व की गारंटी है?
— बड़ज़ी
classListअस्तित्व के लिए 100% गारंटी है, लेकिन यह एक स्ट्रिंग संपत्ति नहीं है, यह एक जीवित DOMTokenListवस्तु है। .classNameसीधे सेट करना मैनिपुलेट करने की तुलना में तेज़ है classList, लेकिन आप पूरी बात लिख देंगे।
— शॉर्टफ्यूज
<इनपुट> और <textarea> टैग पर .value के बारे में कैसे? वे किस तरह के हैं?
— डैनियल विलियम्स
उत्तर में उल्लिखित हैं जो डब्ल्यू 3 सी कहते हैं "आईडीएल विशेषताओं को दर्शाते हैं"। जब आप बदलते हैं .value, तो आप आंतरिक मूल्य बदल रहे हैं HTMLInputElement, जो तब विशेषताओं पर परिलक्षित होता है। वे भी होना नहीं है string। आंतरिक रूप.valueAsNumber से बदल जाएगा , और यह प्रपत्र विशेषता में दिखाई देगा । developer.mozilla.org/en-US/docs/Web/HTML/Attributesvalue stringvalue
— ShortFuse
3

"जब जावास्क्रिप्ट में सेटटैटर बनाम।

एक सामान्य नियम का उपयोग करना .attributeऔर जांचना है कि क्या यह ब्राउज़र पर काम करता है।

..यदि यह ब्राउज़र पर काम करता है, तो आप जाने के लिए अच्छे हैं।

.. अगर यह नहीं है, तो उस विशेषता .setAttribute(attribute, value)के .attributeलिए उपयोग करें ।

सभी विशेषताओं के लिए कुल्ला-दोहराएँ।

ठीक है, अगर आप आलसी हैं तो आप बस उपयोग कर सकते हैं .setAttribute। यह अधिकांश ब्राउज़रों पर ठीक काम करना चाहिए। (हालांकि वे ब्राउज़र जो समर्थन करते .attributeहैं, वे इसे बेहतर से बेहतर बना सकते हैं .setAttribute(attribute, value)।)

— Pacerier
स्रोत
0

यह एक मामले की तरह दिखता है, जहां setAttribute का उपयोग करना बेहतर होता है:

देव.रूपा - कुशल जावास्क्रिप्ट

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);
}
— tomo7
स्रोत
2
इस tomo7 को साझा करने के लिए धन्यवाद, क्या आप कृपया थोड़ा और समझा सकते हैं। posElem.style = newStyleसभी ब्राउज़रों में काम नहीं करता है (फ़ायरफ़ॉक्स में मेरे लिए काम किया है)? क्या यह केवल प्रदर्शन के कारणों के लिए setAttributeहै, जिसे प्राथमिकता दी जाती है, रिपैट्स से परहेज किया जाता है? क्या posElem.style.cssText = newStyleअधिक सुगंधित है posElem.style = newStyle?
— Noitidart
0

किसी तत्व पर विशेषताएँ (उदाहरण वर्ग के लिए) सेट करने की विधियाँ: 1. el.className = string 2. el.setAttribute ('class', string) 3. el.attributes.setNamedItem (ऑब्जेक्ट) 4. el.setAntributeNode (नोड)

मैंने एक साधारण बेंचमार्क टेस्ट ( यहाँ ) किया है

और ऐसा लगता है कि setAttributeNode लगभग 3 गुना तेजी से तब setAttribute का उपयोग कर रहा है।

इसलिए यदि प्रदर्शन एक समस्या है - "setAttributeNode" का उपयोग करें

— यार लेवी
स्रोत
मुझे लगता है कि आप क्रोम पर परीक्षण चलाते हैं। मैंने क्रोम, सफारी और फ़ायरफ़ॉक्स का उपयोग करके अपने मैक पर टेट किया; उम्मीद से उनमें से 3 ने 3 अलग-अलग परिणाम दिखाए।
— ओलगुन काया
0

इस बारे में Google API स्क्रिप्ट से दिलचस्प जानकारी:

वे इसे इस तरह करते हैं:

var scriptElement = document.createElement("script");
scriptElement = setAttribute("src", "https://some.com");
scriptElement = setAttribute("nonce", "https://some.com");
scriptElement.async = "true";

ध्यान दें, वे setAttribute"src" और "nonce" के लिए कैसे उपयोग करते हैं, लेकिन फिर .async = ..."async" विशेषता के लिए।

मुझे 100% यकीन नहीं है, लेकिन शायद ऐसा इसलिए है क्योंकि "async" केवल उन ब्राउज़र पर समर्थित है जो प्रत्यक्ष .attr =असाइनमेंट का समर्थन करते हैं । इसलिए, sestAttribute("async")यदि ब्राउज़र समझ नहीं पाता है तो इसका कोई अर्थ नहीं है .async=...- यह "async" विशेषता को नहीं समझेगा।

उम्मीद है, यह मेरी चल रही "अन-मिनिफाइ GAPI" अनुसंधान परियोजना से एक उपयोगी जानकारी है । यदि मैं गलत हूं तो मुझे सही करों।

— मैक्सिम मजूरोक
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.