HTML要素の取得方法、親子要素の取得方法【JavaScript】

■はじめに

ピュアなJavaScriptを使用したHTMLの要素の取得方法と、親子要素の取得方法を記載します。

■HTML要素の取得方法

以下のHTMLを元に、要素を取得する方法を記載します。

<div id="sample" class="test">
</div>

取得方法は以下

//タグ指定での取得
document.getElementsByTagName('div');

// id指定での取得
document.getElementById('sample');

//class指定での取得
document.getElementsByClassName('test');

■親子要素の取得方法

以下のHTMLを元に、要素を取得する方法を記載します。

<div id="sample" class="test">
  <div id="sampleOne" class="testOne">
    <h1>HELLO</h1>
    <h1>HELLO ONE</h1>
    <h1>HELLO TWO</h1>
  </div>
</div>

取得方法は以下

//親要素
element.parentNode;

//子要素
element.firstElementChild; //最初の子要素
element.lastElementChild;  //最後の子要素
element.children; //子要素リスト

//１つ前の要素
element.previousElementSibling;

//１つ後の要素
element.nextElementSibling;