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>

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

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

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

<span>上の要素</span> // この要素を削除する方法
<div id="sample"> // この要素を削除する方法
test // この要素を削除する方法
</div>
<span>下の要素</span> // この要素を削除する方法

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

上の兄弟要素削除

<span>上の要素</span> // この要素を削除する方法
<div id="sample">
test
</div>
<span>下の要素</span>

<script>
// remove()で要素を削除する方法（IE未対応）
var sampleDiv = document.getElementById('sample');
sampleDiv.previousSibling.remove();

// removeChild()で要素を削除する方法
var sampleDiv = document.getElementById('sample');
sampleDiv.parentNode.removeChild(sampleDiv.previousSibling);

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

ターゲット要素削除

<span>上の要素</span>
<div id="sample"> // この要素を削除する方法
test
</div>
<span>下の要素</span>

<script>
// remove()で要素を削除する方法（IE未対応）
var sampleDiv = document.getElementById('sample');
sampleDiv.remove();

// removeChild()で要素を削除する方法
var sampleDiv = document.getElementById('sample');
sampleDiv.parentNode.removeChild(sampleDiv);

// jQueryで要素を削除する方法
$('#sample').remove();
</script>

要素内をすべて削除

<span>上の要素</span>
<div id="sample">
test // この要素を削除する方法
</div>
<span>下の要素</span>

<script>
// innerHTMLで要素を削除する方法
var sampleDiv = document.getElementById('sample');
sampleDiv.innerHTML = '';

// jQueryで要素を削除する方法
$('#sample').empty();
</script>

下の兄弟要素削除

<span>上の要素</span>
<div id="sample">
test
</div>
<span>下の要素</span> // この要素を削除する方法

<script>

// remove()で要素を削除する方法（IE未対応）
var sampleDiv = document.getElementById('sample');
sampleDiv.nextSibling.remove();

// removeChild()で要素を削除する方法
var sampleDiv = document.getElementById('sample');
sampleDiv.parentNode.removeChild(sampleDiv.nextSibling);

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