【JavaScript / DOM】要素ノードの属性情報 - getAttribute / setAttribute / removeAttribute

JavaScript/DOMの『要素ノードの属性情報』について解説します。

検証環境

JavaScript -

macOS

14.1

要素ノードの属性情報

JavaScript/DOMの要素ノードは属性に関するプロパティやメソッドを持ちます。

それらを使用し、属性の取得や設定、削除等の操作が可能です。

属性値の取得

属性値の取得はプロパティまたはメソッドを使用した２つの方法があります。

プロパティ（属性名）

属性名と同名の要素ノードのプロパティに属性値が格納されています。

基本構文

要素ノード.属性名

サンプル

sample.html

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

<script type="text/javascript">
    let node = document.getElementById("item");
    
    ___ih_hl_start
    let x = node.value;
    ___ih_hl_end
    
    console.log(x);
</script>

プレビュー

Console

Hello World

メソッド（getAttribute）

要素ノードには属性値を取得するgetAttributeメソッドが備わっています。

基本構文

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

サンプル

sample.html

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

<script type="text/javascript">
    let node = document.getElementById("item");
    
    ___ih_hl_start
    let x = node.getAttribute("value");
    ___ih_hl_end
    
    console.log(x);
</script>

プレビュー

Console

Hello World

属性値の設定

属性値の設定はプロパティまたはメソッドを使用した２つの方法があります。

プロパティ（属性名=値）

属性名と同名の要素ノードのプロパティに値を設定します。

基本構文

要素ノード.属性名 = 値

サンプル

sample.html

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

<script type="text/javascript">
    let node = document.getElementById("item");
    
    ___ih_hl_start
    node.value = "Good Morning";
    ___ih_hl_end
    
    let x = node.value;
    
    console.log(x);
</script>

プレビュー

Console

Good Morning

メソッド（setAttribute）

要素ノードには属性値を設定するsetAttributeメソッドが備わっています。

基本構文

要素ノード.setAttribute("属性名", "値")

サンプル

sample.html

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

<script type="text/javascript">
    let node = document.getElementById("item");
    
    node.setAttribute('value', "Good Morning");
    
    let x = node.value;
    
    console.log(x);
</script>

プレビュー

Console

Good Morning

属性一覧

属性一覧の取得はプロパティまたはメソッドを使用した２つの方法があります。

プロパティ（attributes）

要素ノードのattributesプロパティは属性一覧が格納されています。

基本構文

要素ノード.attributes

サンプル

sample.html

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

<script type="text/javascript">
    let node = document.getElementById("item");
    
    ___ih_hl_start
    let attrs = node.attributes;
    ___ih_hl_end
    
    console.log(attrs);
    
    for( let attr of attrs ) {
        ___ih_hl_start
        console.log(attr.name, attr.value);
        ___ih_hl_end
    }
</script>

Console

NamedNodeMap {0: id, 1: type, 2: name, 3: value, 4: required,  …}
id item
type text
name content
value Hello World
required

属性一覧はNamedNodeMapオブジェクトとして取得します。

各属性は属性ノードになっており、属性名はnameプロパティ、属性値はvalueプロパティです。

メソッド（getAttributeNames）

要素ノードには属性一覧を取得するgetAttributeNamesメソッドが備わっています。

基本構文

要素ノード.getAttributeNames();

サンプル

sample.html

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

<script type="text/javascript">
    let node = document.getElementById("item");
    
    ___ih_hl_start
    let attrs = node.getAttributeNames();
    ___ih_hl_end
    
    console.log(attrs);
    
    for( let attr of attrs ) {
        console.log(attr);
    }
</script>

Console

(5) ['id', 'type', 'name', 'value', 'required']
id
type
name
value
required

attributesプロパティとは異なり、属性名の一覧を取得します。

削除（removeAttribute）

要素ノードには属性を削除するremoveAttributeメソッドが備わっています。

基本構文

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

サンプル

sample.html

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

<script type="text/javascript">
    let node = document.getElementById("item");
    
    console.log(node.getAttributeNames());
    
    node.removeAttribute("value");
    
    console.log(node.getAttributeNames());
</script>

プレビュー

Console

(5) ['id', 'type', 'name', 'value', 'required']
(4) ['id', 'type', 'name', 'required']