【JavaScript / DOM】属性ノードの取得・設定・削除 - 属性ノードを要素ノードで扱う方法

JavaScript/DOMにおける属性ノードの取得・設定・削除について解説します。

検証環境

JavaScript -

macOS

14.1

取得（getAttributeNode）

要素ノードの属性ノードを取得するにはgetAttributeNodeメソッドを使用します。

基本構文

要素ノード.getAttributeNode("属性名")

サンプル

sample.html

<input id="item" type="text" name="content" value="Hello World" required>

<script type="text/javascript">
    let element = document.getElementById("item");
    
    ___ih_hl_start
    let attr = element.getAttributeNode("value");
    ___ih_hl_end
    
    console.log(attr.name);
    console.log(attr.value);
</script>

Console

value
Hello World

６行目でvalue属性ノードを取得しており、実行結果から指定した属性とその値が正常に得られたことが分かります。

設定（setAttributeNode）

要素ノードに属性ノードを設定するにはsetAttributeNodeメソッドを使用します。

基本構文

要素ノード.setAttributeNode(属性ノード)

サンプル

sample.html

<input id="item" type="text" name="content" value="Hello World" required>

<script type="text/javascript">
    let element = document.getElementById("item");
    
    let attr = document.createAttribute("style");
    attr.value = "color: red;";
    
    ___ih_hl_start
    element.setAttributeNode(attr);
    ___ih_hl_end
</script>

プレビュー

テキストカラーを赤色にするstyle属性を生成し、要素ノードに設定しています。

プレビューのテキストカラーが赤色であることから、正常に設定できたことが分かります。

削除（removeAttributeNode）

要素ノードから属性ノードを削除するにはremoveAttributeNodeメソッドを使用します。

基本構文

要素ノード.removeAttributeNode(属性ノード)

サンプル

sample.html

<input id="item" type="text" name="content" value="Hello World" style="color: red;" required>

<script type="text/javascript">
    let element = document.getElementById("item");
    
    let attr = element.getAttributeNode("style");
    
    ___ih_hl_start
    element.removeAttributeNode(attr);
    ___ih_hl_end
</script>

プレビュー

テキストカラーを赤色にするstyle属性を削除しています。

プレビューのテキストカラーが黒色であることから正常に削除できたことが分かります。