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

■はじめに

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

■HTML要素の取得方法

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

取得方法は以下

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

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

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

■親子要素の取得方法

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

# HELLO

# HELLO ONE

# HELLO TWO

取得方法は以下

//親要素
element.parentNode;

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

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

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