改訂新版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);