DOMツリーの階層を表すプロパティ - Javascript

DOM ツリー

Document オブジェクトには、HTML の構造が DOMオブジェクトに変換されて、ツリー構造で格納されています。

この構造のことを、「 DOMツリー 」といい、DOMツリーを構成するそれぞれのオブジェクトを「 Node（ノード） 」といいます。

Node には、テキストや HTMLコメントや HTMLタグなどがあります。

Node の中で HTMLタグのみを表す場合は、「 Element（エレメント） 」といいます。

ここで、紹介するプロパティを使った場合、要素と要素の間の空白文字によって影響をうけます。

要素間の空白文字に左右されないように、DOM ツリーからテキストノードを無視して、HTML 文書の要素の階層構造のみを取り出すためのプロパティも用意されています。

別途、「 HTMLツリーの階層を表すプロパティ 」で記載します。

前の要素を取得する - previousElementSibling

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

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><!-- div#tool -->
  
</body>
</html>

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

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

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">
    <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><!-- div#tool -->
  
</body>
</html>

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

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">
    <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><!-- div#tool -->
  
</body>
</html>

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);
});