js　DOMの取得1

js

firstElementChild
lastElementChild
childNodes
parentNode
nextSibling
nextElementSibling
previousSibling
previousElementSibling

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<h1>DOM操作</h1>

<div id="main">
	<p>パラグラフ1</p>
	<p>パラグラフ2</p>
	<p>パラグラフ3</p>
</div>
</body>
</html>

window.addEventListener('DOMContentLoaded', function() {
	var obj = document.getElementById('main');
	// 最初の子要素を取得
	console.log(obj.firstElementChild);
	// 出力：<p>パラグラフ1</p>

	// 最後の子要素を取得
	console.log(obj.lastElementChild);
	// 出力：<p>パラグラフ3</p>

	// すべての子要素を取得
	console.log(obj.childNodes);
	// 出力:(7) [text, p, text, p, text, p, text]

	// 親要素を取得
	console.log(obj.parentNode);
	// 出力：<body>...</body>

	// 兄弟要素の隣の要素を取得
	console.log(obj.nextSibling);
	// 出力：#text

	// 兄弟要素の隣の要素を取得
	console.log(obj.nextElementSibling);
	// 出力：<script>...＜/script>

	// 兄弟要素の前の要素を取得
	console.log(obj.previousSibling);
	// 出力：#text

	// 兄弟要素の前の要素を取得
	console.log(obj.previousElementSibling);
	// 出力：<h1>DOM操作</h1>
}, false);