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

このページの最終更新日：2017年9月11日

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

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でよく使うプロパティは、srcやaltなどがあります。それぞれ、そのまま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に変換されているすることがあります。

また、img要素はHTMLで「画像」を表す要素であることはご存知のとおりですが、DOMにおいては、img要素は単に木構造に挿入して画像を表示するという用途の他に、「画像」を扱うためのオブジェクトとしての役割も持ちます。例えば、JavaScriptからcanvas要素に対して画像を描画する場合、描画したい画像を持つimg要素を引数として渡します。これについては機会があれば紹介します。

text

さて、実は、title要素や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要素を取得しています。

属性の操作

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

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ですが、ちゃんとそれぞれ専用のプロパティを使うようにしたほうが見通しもよくなりおすすめです。

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