[javascript DOM メモ 途中] Q. 属性の値を変更したい

  • 投稿日:
  • by
A. 属性にアクセスする方法として一番簡単な方法は、
要素ノードのプロパティとしてアクセスする方法です。

要素ノード.属性の名前;
要素ノード.属性の名前 = 属性の値;
*classはclassNameでアクセスする

要素の属性に関するメンバ
プロパティ名 説明
getAttribute() 要素の属性を取得
setAttribute() 要素の属性を設定
removeAttribute() 要素の属性を削除
createAttribute() 属性ノードを設定
atttributes すべての属性を取得
hasAttribute() 要素に属性が設定されてるか調べる
属性ノード.nodeName 属性の名称を取得
属性ノード.nodeValue 属性の値を取得
属性ノード.nodeType 2:属性ノード


実際に試してみる
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>DOM</title>
  <script type="text/javascript">
  window.onload = function() {
    // 基準となるノードを取得する
    var example = document.getElementById('example');
    console.log( "// document.getElementById('example')" );
    console.dir(example.attributes);

    console.log( "\n// example.attributes.length" );
    console.dir(example.attributes.length);
    var length = example.attributes.length;

    console.log( "\n// nodeValusで取得" );
    for(var i = 0; i < length; i++){
      // attributes[配列インデックス].nodeValue
      console.log( example.attributes[i].nodeName + ":"
                   + example.attributes[i].nodeValue );
    }

    // NamedNodeMapオブジェクト.item(インデックス番号)
    console.log( "\n// NamedNodeMapオブジェクト.item(インデックス番号)" );
    console.log( example.attributes.item(1) );

    // NamedNodeMapオブジェクト.getNamedItem('属性名');
    console.log( "\n// NamedNodeMapオブジェクト.getNamedItem('属性名')" );
    console.log( example.attributes.getNamedItem('src').value );

    // 要素ノード.属性の名前で取得
    console.log( "\n// 要素ノード.属性の名前で取得" );
    console.log( example.src );

    // getAttribute('属性の名前')で取得
    console.log( "\n// getAttribute('属性の名前')で取得" );
    console.log( example.getAttribute('src') );

    // 要素ノード.属性の名前 = 属性の値で設定
    /*console.log( "\n// 要素ノード.属性の名前 = 属性の値で設定" );
    example.src = 'http://memo.yoshimax.net/assets_c/2011/02/js_dom_node_w3-thumb-421x672-176.png';
    example.width = "421";
    example.height = "672"; */

    // setAttribute('属性の名前', '属性の値')で設定
    console.log( "\n// setAttribute('属性の名前', '属性の値')で設定" );
    example.setAttribute('src', 'http://memo.yoshimax.net/assets_c/2011/02/js_dom_node_w3-thumb-421x672-176.png');
    example.setAttribute('width', 421);
    example.setAttribute('height', 672);
  };
  </script>
</head>
<body>
<img alt="js_prototype_proto_1.png" src="http://memo.yoshimax.net/assets_c/2011/02/js_prototype_proto_1-thumb-544x454-140.png" width="544" height="454" class="mt-image-none" style="" id="example" />
</body>
</html>

コンソールログ
js_dom_get_set_1.png

参考サイト:
三等兵 JavaScriptのDOM Core基礎
DOM Level 2 Core: getAttribute
DOM Level 1 Core
HTML 5: APIs in HTML documents
MDN Nodeのメンバー一覧
MDN NamedNodeMapのメンバー