↩ プログラミング言語 Web関連 javascript JS 属性オブジェクト (要素属性オブジェクト)

JS 属性オブジェクト (要素属性オブジェクト)

要素属性は、タグの動作を制御したり、タグに関する情報を提供したりするために、HTML 要素の開始タグで使用される特別な単語です。

HTML DOM では、HTML 属性は属性オブジェクトによって表されます。このオブジェクトは、次の表に示すように、HTML 属性を追加、変更、および削除するためのさまざまなメソッドを提供します。

プロパティ/メソッド	説明
attributes.isId	プロパティのタイプが ID の場合は true を返し、それ以外の場合は false を返します
attributes.name	属性名を返す
attributes.value	プロパティの値を設定または返す
attributes.specified	指定されたプロパティが定義されている場合は true を返し、そうでない場合は false を返します
nodemap.getNamedItem()	ノードリストから返された指定された属性ノード
nodemap.item()	ノードリスト内の指定されたインデックス番号にあるノードを返します
nodemap.length	ノードリスト内のノードの数を返します
nodemap.removeNamedItem()	指定された属性ノードを削除します
nodemap.setNamedItem()	指定された属性ノードを (名前で) 設定します

サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <a href="javascript:;" target="_blank" id="myLink">JavaScript</a><br>
    <script type="text/javascript">
        var atag = document.getElementById('myLink');
        var attr = atag.attributes;
        document.write(attr.target.value + "<br>");                 // 出力：_blank
        document.write(attr.target.name + "<br>");                  // 出力：target
        document.write(attr.target.specified + "<br>");             // 出力：true
        document.write(attr.getNamedItem('href').textContent + "<br>");  // 出力：javascript:;
        document.write(attr.item(0).name + "<br>");                 // 出力：href
        document.write(attr.length + "<br>");                       // 出力：3
        document.write(attr.removeNamedItem('target') + "<br>");    // 出力：[object Attr]
        var cla = document.createAttribute('class');
        cla.value = 'democlass';
        document.write(attr.setNamedItem(cla) + "<br>");            // 出力：null
    </script>
</body>
</html>

実行結果は次の図のとおりです。

「JS 属性オブジェクト (要素属性オブジェクト)」についてわかりやすく解説！絶対に観るべきベスト2動画

JavaScriptで属性（attribute）を設定（setAttribute）・取得（getAttribute）・確認（hasAttribute）する方法と活用例！

https://www.youtube-nocookie.com/watch?v=Zpxhqw_zNg8&pp=ygVCSlMg5bGe5oCn44Kq44OW44K444Kn44Kv44OIICjopoHntKDlsZ7mgKfjgqrjg5bjgrjjgqfjgq_jg4gpJmhsPUpB

JavaScriptで属性（attribute）を設定（setAttribute）・取得（getAttribute）・確認（hasAttribute）する方法と活用例！ (https://www.youtube-nocookie.com/watch?v=Zpxhqw_zNg8&pp=ygVCSlMg5bGe5oCn44Kq44OW44K444Kn44Kv44OIICjopoHntKDlsZ7mgKfjgqrjg5bjgrjjgqfjgq_jg4gpJmhsPUpB)

【JavaScript】オブジェクトの使い方をわかりやすくカンタン解説

https://www.youtube-nocookie.com/watch?v=Kh7oqryEl-s&pp=ygVCSlMg5bGe5oCn44Kq44OW44K444Kn44Kv44OIICjopoHntKDlsZ7mgKfjgqrjg5bjgrjjgqfjgq_jg4gpJmhsPUpB

【JavaScript】オブジェクトの使い方をわかりやすくカンタン解説 (https://www.youtube-nocookie.com/watch?v=Kh7oqryEl-s&pp=ygVCSlMg5bGe5oCn44Kq44OW44K444Kn44Kv44OIICjopoHntKDlsZ7mgKfjgqrjg5bjgrjjgqfjgq_jg4gpJmhsPUpB)

javascript