javascriptでHTML要素取得！兄弟や親、子要素も！jQueryとも比較！

javascriptでHTML要素取得！兄弟や親、子要素も！jQueryとも比較！

javascriptで要素を取得する方法をご紹介していきます。

併せてjQueryでの書き方も記載しておきます。

ご紹介する要素の取得位置はこちら。
「idが"sample"のdiv」を基準としています。

<div> // この要素を取得する方法(親要素)
	<span>前の要素</span> // この要素を取得する方法(兄弟要素)
	<div id="sample"> // この要素を取得する方法(ターゲット要素)
		<span> // この要素を取得する方法(子要素)
		test // この要素を取得する方法
		</span>
	</div>
	<span>後の要素</span> // この要素を取得する方法(兄弟要素)
</div>

取得位置の上から順に記載していきます。

なお、要素のみ取得(指定)ですので、テキストやHTMLを取得したい時は、
javascriptであればinnerTextやinnerHTML、jQueryであればtext()やhtml()で取得してください。

親要素取得

<div> // この要素を取得する方法(親要素)
	<span>前の要素</span>
	<div id="sample">
		<span>
		test
		</span>
	</div>
	<span>後の要素</span>
</div>

<script>
// javascriptで要素を取得する方法
var sampleDiv = document.getElementById('sample');
sampleDiv.parentNode;

// jQueryで要素を取得する方法
$('#sample').parent();
</script>

前の兄弟要素取得

<div>
	<span>前の要素</span> // この要素を取得する方法(兄弟要素)
	<div id="sample">
		<span>
		test
		</span>
	</div>
	<span>後の要素</span>
</div>

<script>
// javascriptで要素を取得する方法
var sampleDiv = document.getElementById('sample');
sampleDiv.previousSibling;

// jQueryで要素を取得する方法
$('#sample').prev();
</script>

ターゲット要素取得

<div>
	<span>前の要素</span>
	<div id="sample"> // この要素を取得する方法(ターゲット要素)
		<span>
		test
		</span>
	</div>
	<span>後の要素</span>
</div>

<script>
// javascriptで要素を取得する方法
document.getElementById('sample');

// jQueryで要素を取得する方法
$('#sample');
</script>

子要素取得

<div>
	<span>前の要素</span>
	<div id="sample">
		<span> // この要素を取得する方法(子要素)
		test
		</span>
	</div>
	<span>後の要素</span>
</div>

<script>
// javascriptで要素を取得する方法
var sampleDiv = document.getElementById('sample');
sampleDiv.firstChild;

// jQueryで要素を取得する方法
$('#sample span');
</script>

要素内のテキスト取得

<div>
	<span>前の要素</span>
	<div id="sample">
		<span>
		test // この要素を取得する方法
		</span>
	</div>
	<span>後の要素</span>
</div>

<script>
// javascriptで要素を取得する方法
var sampleDiv = document.getElementById('sample');
sampleDiv.firstChild.innerText;

// jQueryで要素を取得する方法
$('#sample span').text();
</script>

後ろの兄弟要素取得

<div>
	<span>前の要素</span>
	<div id="sample">
		<span>
		test
		</span>
	</div>
	<span>後の要素</span> // この要素を取得する方法(兄弟要素)
</div>

<script>
// javascriptで要素を取得する方法
var sampleDiv = document.getElementById('sample');
sampleDiv.nextSibling;

// jQueryで要素を取得する方法
$('#sample').next();
</script>