setAttribute

JavaScriptで要素の属性値を設定する基本的な方法は、setAttributeメソッドを使うことです。このメソッドは、指定した属性に新しい値を設定します。

      let element = document.getElementById('example');
      element.setAttribute('id', 'newID');
    

上記の例では、ID属性をnewIDに変更しています。setAttributeは、属性名と値を引数として受け取り、属性の変更が行われます。

getAttributeNode

次に紹介するのは、getAttributeNodeメソッドです。このメソッドは、指定した属性の属性ノードを返します。その後、属性ノードのvalueプロパティを使って属性値を設定することができます。

      let element = document.getElementById('example');
      let attrNode = element.getAttributeNode('id');
      attrNode.value = 'newID';
    

このコードは、getAttributeNodeでID属性のノードを取得し、そのvalueプロパティを使って新しい値newIDを設定しています。

getNamedItem

getNamedItemメソッドは、要素の属性の名前を指定して、その属性ノードを取得します。これを使って、属性の値を変更することもできます。

      let element = document.getElementById('example');
      let attrNode = element.attributes.getNamedItem('id');
      attrNode.value = 'newID';
    

この方法では、属性ノードを取得して、直接そのvalueプロパティを変更しています。

setAttributeNode

setAttributeNodeメソッドは、新しい属性ノードを設定するために使用されます。これは、属性ノードを作成して、それを要素に追加する方法です。

      let element = document.getElementById('example');
      let attr = document.createAttribute('id');
      attr.value = 'newID';
      element.setAttributeNode(attr);
    

この方法では、まず新しい属性ノードを作成し、その後そのノードを要素に追加しています。setAttributeNodeは、新しい属性を追加したり、既存の属性を更新するために使用されます。