HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM setAttributeNode()メソッドとは？構文と使い方を実例付きで解説

DOMのsetAttributeNode()メソッドは、HTMLドキュメント内の指定した要素に対して、パラメータで渡された属性ノード（Attrノード）を設定し、その属性をAttrノードオブジェクトとして返すメソッドです。通常、createAttribute()メソッドで作成した属性ノードと組み合わせて使用されます。

構文

setAttributeNode()メソッドの基本構文は以下のとおりです。

node.setAttributeNode(attributeNode);

パラメータには、document.createAttribute()で生成した属性ノードを指定します。戻り値として、設定された属性のAttrノードオブジェクトが返されます。

使用例

ここでは、ボタンをクリックすると<p>要素にstyle属性を動的に追加するサンプルコードを紹介します。

<!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() method Demo</h1>
<p>Hi! I'm a para element in HTML with some random text</p>
<button onclick="set()" class="btn">Set Attribute</button>
<script>
   function set() {
      var p=document.querySelector("p");
      var attr=document.createAttribute("style");
      attr.value="color:#db133a;font-size:1.2rem;";
      p.setAttributeNode(attr);
   }
</script>
</body>
</html>

コードのポイント

  • document.querySelector("p")で、ページ内の最初の<p>要素を取得します。
  • document.createAttribute("style")で、「style」という名前の新しい属性ノードを作成します。
  • attr.valueに文字色とフォントサイズを指定し、setAttributeNode()で<p>要素に属性を適用します。

出力結果

上記のコードをブラウザで実行すると、次のような画面が表示されます。

HTML DOM setAttributeNode()メソッドとは？構文と使い方を実例付きで解説

この状態で「Set Attribute」ボタンをクリックすると、<p>要素にstyle属性が設定され、テキストの色とフォントサイズが動的に変化します。

HTML DOM setAttributeNode()メソッドとは？構文と使い方を実例付きで解説

まとめ

setAttributeNode()メソッドを使うことで、JavaScriptから要素へ属性ノードを直接追加・置換できます。単純な属性操作であればsetAttribute()の方が手軽ですが、既存のAttrノードオブジェクトを扱いたい場合や、属性ノードを明示的に管理したい場合にはsetAttributeNode()が有効です。

  1. HTML DOMのhasAttributes()メソッドとは？構文・使い方・サンプルコードを解説

    HTML DOMのhasAttributes()メソッドは、ある要素が属性（attribute）を1つでも持っているかどうかを判定するためのメソッドです。要素が属性を保持している場合はtrueを返し、1つも属性を持っていない場合はfalseを返します。また、このメソッドを要素ノード以外のノードに対して呼び出した場合、戻り値は常にfalseになるという特徴があります。 構文 hasAttributes()メソッドの基本構文は以下のとおりです。 node.hasAttributes() 引数は不要で、対象となるノードに対して直接呼び出すだけで、真偽値（Boolean）が返されます。 使用例 ここで

  2. HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説

    HTML DOMのfocus()メソッドは、指定したHTML要素にフォーカスを設定するために使用されるメソッドです。ただし、すべてのHTML要素にフォーカスを適用できるわけではありません。たとえば、<p>タグのようにフォーカスを受け付けない要素も存在します。また、要素からフォーカスを解除したい場合は、blur()メソッドを使用します。 focus()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや