uhyohyo.net

JavaScript初級者から中級者になろう

二章第十回 img要素とその他

今回は、いろいろな要素の扱い方を紹介します。

img要素

img要素のHTMLElementは、HTMLImageElementといいます。imgタグは、開始タグしかなく、終了タグしかありませんが、扱い方は変わりません。例えば、

<!doctype html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <p><img src="aaaa.gif" alt="aaaa"></p>
  </body>
</html>
            

というHTMLの場合、木構造は

html
 |
 ├――head
 |   |
 |   └――title
 |
 └――body
     |
     └―― p
         |
        └――img
          

となります(改行によって生じるテキストノードは省略しています)。

他の要素と同じ感じですね。ただ、「中身」というものがありえないというのは分かると思います。そのため、子ノードはありません。

プロパティ

さて、HTMLImageElementでよく使うプロパティは、srcaltなどがあります。それぞれ、そのままimg要素のsrc属性、alt属性を表します。文字列で、代入もできます。

<!doctype html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <p><img src="aaaa.gif" alt="aaaa" id="abcd"></p>

    <script type="text/javascript">
      var img = document.getElementById('abcd');

      console.log(img.src);
      console.log(img.alt);
    </script>
  </body>
</html>
          

ちゃんと、src属性、alt属性が表示されていることが分かります。ただし、タグで書いた値そのままでない場合もあります。例えば、URLの場合、絶対URLに変換されていたりすることもあります。

text

また、title要素(headの中にあるやつ)やscript要素には、textというプロパティがあります。これは、その中身です。すなわち、その要素の子ノードのテキストノードの値と同じです。また、書き換えも可能です。

<!doctype html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <p>test</p>

    <script type="text/javascript">
      var title = document.getElementsByTagName('title').item(0);
      console.log(title.text);
    </script>
  </body>
</html>
          

このように、タイトルが表示されます。

ちなみに、今回はいつものgetElemetByIdではなくgetElementsByTagNameでtitle要素を取得しています。

属性の操作

さて、ある要素の属性を取得したり操作したいとき、その多くは上のように要素のプロパティを使って操作します。しかし、どんな属性でも使える汎用的な機能があります。それが、ノートが持つgetAttributesetAttributeメソッドです。

getAttribute

getAttributeは、ある属性を取得するときに使います。

<!doctype html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <p><img src="aaaa.gif" alt="aaaa" id="abcd"></p>

    <script type="text/javascript">
      var img = document.getElementById('abcd');

      console.log(img.getAttribute("src"));

    </script>
  </body>
</html>
          

img.getAttribute("src")を表示しているのが分かります。ここで、getAttributeに引数がありますが、これが取得する属性の名前です。文字列で指定します。

つまり、これは変数imgに入っている要素のsrcという属性を取得するということになります。返り値は当然ながら文字列です。

setAttribute

対して、setAttributeは、ある属性を変更するときに使います。

<!doctype html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <p><img src="aaaa.gif" alt="aaaa" id="abcd"></p>

    <script type="text/javascript">
      var img = document.getElementById('abcd');

      img.setAttribute("alt", "zzzz");
    </script>
  </body>
</html>
          

見た目にはわかりにくいですが、img要素のalt属性が"zzzz"に変更されます。

引数の1つめは変更する属性の名前で、2つめは変更する値です。どちらも文字列です。

つまり、このサンプルでは変数imgに入っている要素の、srcという属性を"zzzz"に変更しているというわけです。

このように便利なgetAttributeとsetAttributeですが、ちゃんとそれぞれ専用のプロパティを使うようにしたほうが見通しもよくなりおすすめです。