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

JavaScriptで要素のクラス属性ノードの値を取得する方法

JavaScriptには、要素から指定した名前の属性ノードを属性オブジェクトとして取得するためのgetAttributeNode()メソッドが用意されています。もし指定した属性が存在しない場合は、戻り値としてnullまたは空文字列（""）が返されます。

構文

element.getAttributeNode(attributename);

このメソッドは、指定された属性ノードを表す属性オブジェクトを返します。返されたオブジェクトの .value プロパティにアクセスすることで、属性の実際の値を文字列として取得できます。

使用例

以下の例では、異なるクラスを持つ2つの見出しタグが定義されています。getAttributeNode()メソッドを使ってこれらのタグにアクセスすると、それぞれに設定されたclass属性を取得できます。配列と同じように動作するため、インデックス番号を指定すれば、複数の要素の中から目的のクラスに簡単にアクセスできます。

<html>
<body>
<h2 class="class1">Tutorix</h2>
<h2 class="class2">Tutorialspoint</h2>
<p id = "attribute"></p>
<script>
   var elmnt = document.getElementsByTagName("h2")[1];
   var value = elmnt.getAttributeNode("class").value;
   document.getElementById("attribute").innerHTML = value;
</script>
</body>
</html>

出力結果

Tutorix
Tutorialspoint
class2

この例では、getElementsByTagName("h2")[1]によって2つ目の<h2>要素を取得し、そのclass属性ノードの値である「class2」が画面に出力されています。

補足：よりシンプルな代替手段

なお、単に属性の値だけが必要な場合は、element.getAttribute("class")を使う方が簡潔です。また、モダンなJavaScriptでは、クラス名の操作に特化したclassListプロパティ（add()・remove()・contains()などのメソッドを持つ）を利用するのが一般的です。getAttributeNode()は属性ノードそのものが必要となる特殊なケースで活用するとよいでしょう。

  1. JavaScriptで要素の子ノードを削除する方法（removeChildメソッドの使い方）

    JavaScriptでは、リストなどの要素から子ノードを削除するために、removeChild() メソッドが用意されています。このメソッドを使うと、リスト内の項目をインデックス位置を指定して自由に削除できます。本記事では、その基本的な使い方を具体例とともにわかりやすく解説します。 構文 node.removeChild(node); 親ノードに対して removeChild() を呼び出し、引数として削除したい子ノードを渡します。戻り値として、削除されたノードが返されます。 例1：指定した位置の子ノードを削除する 次の例では、リストに 3つの要素 が存在しますが、子ノードを1つ削除した後は残

  2. JavaScriptでクリックした要素にアクティブクラスを追加する方法

    Webページのボタンやタブメニューなどでは、現在選択されている要素を視覚的に強調表示したいケースがよくあります。JavaScriptを使えば、クリックされた要素に「active」クラスを動的に追加し、それまでアクティブだった要素からクラスを外すことで、この処理を簡単に実装できます。実装のポイント基本的な流れは以下のとおりです。querySelectorAll() ですべてのボタン要素を取得する各ボタンに addEventListener() でクリックイベントを登録するクリック時に、既存の「active」クラスを持つ要素からクラスを削除するクリックされた要素に「active」クラスを追加するサ