HTML サンプル

以下の HTML の値を取得します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="tool">
    <ul id="list-box" class="list">
      <li id="list_1" class="item">List 1</li>
      <li id="list_2" class="item">List 2</li>
      <li id="list_3" class="item">List 3</li>
      <li id="list_4" class="item">List 4</li>
    </ul>
  </div>
</body>
</html>

親要素を取得する - parentElement

script.js

window.addEventListener('load', function(){
  let element = document.getElementById("list_2");
  let parent_element = element.parentElement;
  console.log(parent_element);
  console.log(parent_element.id);
  console.log(parent_element.className);
});

子要素を取得する - children

script.js

window.addEventListener('load', function(){
  let element = document.getElementById("list-box");
  let child_element = element.children;
  
  console.log(child_element[0].id);
  
  Array.from(child_element).forEach(function(i){
    console.log(i);
  });
});

最初の子要素を取得する - firstElementChild

script.js

window.addEventListener('load', function(){
  let element = document.getElementById("list-box");
  let first_element = element.firstElementChild;
  
  console.log(first_element);
});

最後の子要素を取得する - lastElementChild

script.js

window.addEventListener('load', function(){
  let element = document.getElementById("list-box");
  let last_element = element.lastElementChild;
  
  console.log(last_element);
});

次の要素を取得する - nextElementSibling

同じ親をもつ、次の要素オブジェクトを取得します。

script.js

window.addEventListener('load', function(){
  let element = document.getElementById("list_2");
  let next_element = element.nextElementSibling;
  
  console.log(next_element);
});

前の要素を取得する - previousElementSibling

同じ親をもつ、前の要素オブジェクトを取得します。

script.js

window.addEventListener('load', function(){
  let element = document.getElementById("list_2");
  let previous_element = element.previousElementSibling;
  
  console.log(previous_element);
});

子要素の数を数える - childElementCount

script.js

window.addEventListener('load', function(){
  let element = document.getElementById("list-box");
  let count = element.childElementCount;
  
  console.log(count);
});

値を取得する

script.js

window.addEventListener('load', function(){
  let element = document.getElementById("list_1");
  let next_ele = element.nextElementSibling;

  console.log(next_ele.id); // id名
  console.log(next_ele.className); // class名
  console.log(next_ele.textContent); // テキスト
  console.log(next_ele.getAttribute('data-target')); // data-target の値
});

script.js - No.2

window.addEventListener('load', function(){
  let element = document.getElementById("list_2");
  let next_ele = element.nextElementSibling;

  next_ele.setAttribute('data-target', 'hello'); // 属性のセット
  console.log(next_ele.getAttribute('data-target')); // 属性の値を取得
  console.log(next_ele.hasAttribute('data-target')); // 属性があるか確認
  next_ele.removeAttribute('data-target'); // 属性の削除
  console.log(next_ele.hasAttribute('data-target')); // 属性があるか確認
});