山傘のプログラミング勉強日記

プログラミングに関する日記とどうでもよい雑記からなるブログです。

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで その10

Chapter 6 HTML や XML の文書を操作する - DOM (Document Object Model) -

今回はスクリプトからページを操作する方法を学びます。

不特定の属性を取得

<html>
<head>
</head>
<body>
    <script type="text/javascript" src="../js/sample6.js"></script>
  <img id= "icon" src="https://cdn.profile-image.st-hatena.com/users/yamakasa3/profile.png?1521986743" height="100" width="100" />
</body>
</html>

attributes を使って要素に含まれる属性を取り出します。

document.addEventListener('DOMContentLoaded', function() {
  var icon = document.getElementById('icon');
  var attrs = icon.attributes;
  for (var i = 0, len = attrs.length; i < len; i++) {
    var attr = attrs.item(i);
    console.log(attr.name + ':' + attr.value);
  }
});

入力フォーム

ユーザからの入力を受け付けるためのフォームについて学びます。

<html>

<head>
</head>

<body>
  <form>
    <script type="text/javascript" src="../js/sample7.js"></script>
    <label for="name">名前</label>
    <input id="name" name="name" type="text" size=30 />
    <input id="btn" type="button" value="送信" />
  </form>
</body>

</html>

入力された値を取りだします。

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('btn').addEventListener('click', function() {
    var name = document.getElementById('name');
    console.log(name.value);
  }, false);
}, false);

また、入力フォームとしてラジオボタンチェックボックスなどもあります。