JavaScript - 부모, 형제, 자식 element 찾기

Javascripthtml

JavaScript에서 어떤 element의 부모, 형제, 자식 element를 찾는 방법을 소개합니다.

부모, 형제, 자식의 element 찾기

다음과 같은 속성들을 사용하여 어떤 요소(element)의 부모, 형제, 자식의 element를 찾을 수 있습니다.

  • parentElement : 부모 요소 리턴
  • children : 모든 자식 요소들을 리스트로 리턴
  • firstElementChild : 자식 요소 중, 첫번째 요소 리턴
  • lastElementChild : 자식 요소 중, 마지막 요소 리턴
  • nextElementSibling : 같은 레벨의 요소 중, 다음 요소 리턴

아래 예제를 보시면, 먼저 id가 parent인 요소를 찾고, 이 요소의 자식, 자식의 형제, 자식의 자식 요소들을 탐색하는 방법을 알 수 있습니다.

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
</head>
<body>
	<div id="parent">
		<div id="child1">첫째 자식
			<div id="grandChild1">첫째 손자</div>
		</div>
		<div id="child2">둘째 자식
			<div id="grandChild2">둘째 손자</div>
		</div>
		<div id="child3">셋째 자식
			<div id="grandChild3">셋째 손자</div>
		</div>
	</div>

	<script>
		// 부모 element 찾기
		var parent = document.getElementById("parent");

        // 자식들
        var chidren = parent.children;

		// 첫째 자식
		var firstChild = parent.firstElementChild;

		// 둘째 자식, 첫째 자식의 다음 형제
		var secondChild = firstChild.nextElementSibling;

		// 셋째 자식
		var thirdChild = parent.lastElementChild;

        // 첫째 손자, 첫째 자식의 자식
		var firstGrandchild = firstChild.firstElementChild;

		// 첫째 자식, 첫째 자식의 자식
		var parentOfFirstGrandChild = firstGrandchild.parentElement;

		// 결과
		console.log("부모 element: " + parent.id);
		console.log("첫째 자식 element: " + firstChild.id);
		console.log("둘째 자식 element: " + secondChild.id);
        console.log("셋째 자식 element: " + thirdChild.id);
		console.log("첫째 손자 element: " + firstGrandchild.id);
        console.log("첫째 자식(첫째 손자 부모) element: " + parentOfFirstGrandChild.id);

        // 자식들 모두 출력
        for(var i = 0; i < chidren.length; i++) {
		  console.log("자식: " + chidren[i].id);
		}

	</script>
</body>
</html>

Output:

부모 element: parent
첫째 자식 element: child1
둘째 자식 element: child2
셋째 자식 element: child3
첫째 손자 element: grandChild1
첫째 자식(첫째 손자 부모) element: child1
자식: child1
자식: child2
자식: child3
Loading script...

Related Posts

codechachaCopyright ©2019 codechacha