【JavaScript入門】DOM操作でHTMLタグの属性を操作する | 属性値の取得・更新・削除する方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptのDOM操作でHTMLタグの属性操作・属性(key)に紐づく値を取得・更新・削除する方法を解説します。

1 getAttribute() : HTMLタグの属性の値を取得する
2 setAttribute() : HTMLタグに属性と値を追加する・更新する
3 removeAttribute() : HTMLタグの属性と値を削除する
4 Sample-Code-全文
5 JavaScript書籍 Ver. 中級-上級者向け
6 JavaScript書籍 Ver. 初級者向け
7 Twitterやってます！Follow Me！
8 参考・引用
9 最近の投稿

getAttribute() : HTMLタグの属性の値を取得する

構文: element.getAttribute(‘属性名’);

属性(key)に紐づくvalueを取得します。

属性が設定されていない場合、実行結果(返り値)は null です。

// 1. element.getAttribute('属性名') => 属性(key)に紐づくvalueを取得する
const url = a.getAttribute('href');
console.log({url});
    // {url: 'https://masanyon.com/'}

setAttribute() : HTMLタグに属性と値を追加する・更新する

構文: element.setAttribute(‘属性名’, ‘値’);

すでに属性と値がSetされていれば、更新をして、何もSetされていなければ新たに追加となります。

// 2. element.setAttribute('属性名', '値') => 属性にvalueをSetする 
a.setAttribute('target', '_blank');

removeAttribute() : HTMLタグの属性と値を削除する

属性とその値を削除するにはremoveAttributeメソッドを使います。

構文: element.removeAttribute(‘属性名’);

属性(key)とそれに紐づくvalueを削除します。

// 3. element.removeAttribute('属性名') => 属性(key)に紐づくvalueを削除する
a.removeAttribute('id');

Sample-Code-全文

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attribute-Test</title>
    <script>

        // HTMLがすべて読み込まれたタイミングで自動発火するScript🔥
        document.addEventListener('DOMContentLoaded', ()=> {

            const a = document.querySelector('a#nochange_nolife_io');
            console.log({a});
                // {a: a#nochange_nolife_io}

            // 1. element.getAttribute('属性名') => 属性(key)に紐づくvalueを取得する
            const url = a.getAttribute('href');
            console.log({url});
                // {url: 'https://masanyon.com/'}

            const id = a.getAttribute('id');
            console.log({id});
                // {id: 'nochange_nolife_io'}

            // 2. element.setAttribute('属性名', '値') => 属性にvalueをSetする 
            a.setAttribute('target', '_blank');

            const new_attribute = a.getAttribute('target');
            console.log({new_attribute});
                // {new_attribute: '_blank'}

            a.setAttribute('id', 'robotama');
            const updated_id = a.getAttribute('id');
            console.log({updated_id});
                // {updated_id: 'robotama'}


            // 3. element.removeAttribute('属性名') => 属性(key)に紐づくvalueを削除する
            a.removeAttribute('id');

            const remove_id = a.getAttribute('id');

            console.log({remove_id});
                // {remove_id: null}
        });

    </script>
</head>
<body>
    <h1>Attribute-Test-Robotama🔥</h1>

    <h2>属性の操作</h2>
    <p>属性を取得するには、getAttributeメソッドを使います。</p>
    <p>構文: let value = element.getAttribute(attr);</p>
    <p>引数attrには取得したい属性名を指定します。戻り値は属性の値（文字列）になります。</p>

    <h2>属性の変更（追加）</h2>
    <p>構文: element.setAttribute(attr, value);</p>
    <p>引数attrには属性名をvalueには設定する値を指定します。</p>

    <h2>属性の削除</h2>
    <p>属性を削除するにはremoveAttributeメソッドを使います。</p>
    <p>構文: element.removeAttribute(attr);</p>
    <p>引数attrは削除する属性名を指定します。</p>

    <a id="nochange_nolife_io" href="https://masanyon.com/">No Change No Life I/O🔥</a>

    <h2>参考・引用</h2>
    <a href="https://zenn.dev/ankouh/books/javascript-dom/viewer/b412c3">JavaScriptによるDOM操作入門: 属性の操作</a>

</body>
</html>