HTML DOM setAttributeNode() मेथड

setAttributeNode() मेथड क्या है?

DOM setAttributeNode() मेथड एक विशेषता नोड (Attr ऑब्जेक्ट) को किसी निर्दिष्ट तत्व पर जोड़ता है और जोड़ी गई विशेषता को Attr नोड ऑब्जेक्ट के रूप में लौटाता है। यदि उसी नाम की विशेषता पहले से मौजूद है, तो यह उसे प्रतिस्थापित कर देता है।

सिंटैक्स

element.setAttributeNode(attrNode)

पैरामीटर

• attrNode: जोड़ने के लिए विशेषता नोड (आमतौर पर document.createAttribute() से बनाया गया)।

रिटर्न मान

प्रतिस्थापित विशेषता नोड (यदि कोई था), अन्यथा null।

उदाहरण

यह उदाहरण दर्शाता है कि कैसे setAttributeNode() का उपयोग करके एक पैराग्राफ पर स्टाइल विशेषता सेट की जाती है:

<!DOCTYPE html>
<html>
<head>
<style>
  html { height: 100%; }
  body {
    text-align: center;
    color: #fff;
    background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
    height: 100%;
  }
  .btn {
    background: #0197F6;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 35%;
    margin: 2rem auto;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
  }
</style>
</head>
<body>
<h1>DOM setAttributeNode() मेथड डेमो</h1>
<p>नमस्ते! मैं HTML में कुछ रैंडम टेक्स्ट वाला एक पैरा तत्व हूँ।</p>
<button onclick="setAttr()" class="btn">विशेषता सेट करें</button>
<script>
  function setAttr() {
    var p = document.querySelector("p");
    var attr = document.createAttribute("style");
    attr.value = "color: #db133a; font-size: 1.2rem;";
    p.setAttributeNode(attr);
  }
</script>
</body>
</html>

आउटपुट

"विशेषता सेट करें" बटन पर क्लिक करने पर, <p> तत्व पर एक स्टाइल विशेषता जुड़ जाती है, जिससे उसका टेक्स्ट लाल रंग का और बड़ा हो जाता है।

setAttributeNode() बनाम setAttribute()

कब उपयोग करें

• जब आपको जोड़ी गई/प्रतिस्थापित विशेषता नोड तक पहुंच की आवश्यकता हो।
• पहले से बने Attr नोड्स का पुन: उपयोग करते समय।
• नेमस्पेस वाली विशेषताओं के लिए setAttributeNodeNS() का उपयोग करें।

ब्राउज़र समर्थन

सभी आधुनिक ब्राउज़रों में पूर्ण समर्थन।