HTML サンプル

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

index.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" class="list">
    <ul id="list-box">
      <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>

前の要素を取得する - previousElementSibling

同じ親要素を持つ隣接する前の要素を取得できます。

script.js

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

  console.log(previous_element);
  console.log(previous_element.id); // 前の要素の id名 を取得
  console.log(previous_element.className); // 前の要素の class名 を取得
});

次の要素を取得する - nextElementSibling

同じ親要素を持つ隣接する次の要素を取得できます。

script.js

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

親要素を取得する - parentNode

script.js

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