DOM 属性値の取得・設定 - Javascript

要素オブジェクトのメソッドを使って属性値を取得する

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
</head>
<body>
  <form id="myform" action="">
    <input type="checkbox" class="os" name="os" value="windows">Windows
    <input type="checkbox" class="os" name="os" value="mac">Mac
    <input type="checkbox" class="os" name="os" value="linux">Linux
  </form>
</body>
</html>

window.onload = function(){
  let form = document.getElementById("myform");
  let list = form.children;

  for(var i = 0; i > list.length; i++){
      console.log(list[i].getAttribute("value"));
  };
};

要素オブジェクトのメソッドを使って属性値を設定する

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
</head>
<body>
  <form id="myform" action="">
    <input type="checkbox" class="os" name="os" value="windows">Windows
    <input type="checkbox" class="os" name="os" value="mac">Mac
    <input type="checkbox" class="os" name="os" value="linux">Linux
  </form>
</body>
</html>

script.js

window.onload = function(){
  let form = document.getElementById("myform");
  let list = form.children; // HTMLCollection
  console.log(list);

  for(var i = 0; i < list.length; i++){
    list[i].setAttribute("value", "android");
    console.log(list[i]);
  }
};

要素オブジェクトのメソッドを使って属性値を削除する

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
</head>
<body>
  <form id="myform" action="">
    <input type="checkbox" class="os" name="os" value="windows">Windows
    <input type="checkbox" class="os" name="os" value="mac">Mac
    <input type="checkbox" class="os" name="os" value="linux">Linux
  </form>
</body>
</html>

script.js

window.onload = function(){
  let form = document.getElementById("myform");
  let list = form.children; // HTMLCollection

  for(var i = 0; i < list.length; i++){
    list[i].removeAttribute("value");
  };
  for(var i = 0; i < list.length; i++){
    console.log(list[i]);
  };
};

要素オブジェクトのメソッドを使って属性が存在するか確認

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
</head>
<body>
  <form id="myform" action="">
    <input type="checkbox" class="os" name="os" value="windows">Windows
    <input type="checkbox" class="os" name="os" value="mac">Mac
    <input type="checkbox" class="os" name="os">Linux
  </form>
</body>
</html>

script.js

window.onload = function(){
  let form = document.getElementById("myform");
  let list = form.children; // HTMLCollection

  for(var i = 0; i < list.length; i++){
    console.log(list[i].hasAttribute("value"));
  };
};

要素オブジェクトのプロパティで取得・設定

プロパティ名 内容
id id の値
className class の値
value value の（value の値が設定できる要素のみ）

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
</head>
<body>
  <form id="myform" action="">
    <input type="checkbox" class="os" name="os" value="windows">Windows
    <input type="checkbox" class="os" name="os" value="mac">Mac
    <input type="checkbox" class="os" name="os" value="linux">Linux
  </form>
</body>
</html>

script.js

window.onload = function(){
  let form = document.getElementById("myform");
  let list = form.children; // HTMLCollection
  console.log(list);

  list[0].value = "android";
  console.log(list[0])
};