[JavaScript] DOM(parentNode / childNodes)

JS 관련/JavaScript

[JavaScript] DOM(parentNode / childNodes)

씨네 2022. 1. 27. 09:41

728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	function searchPar(){
		var child02 = document.getElementsByTagName("p")[1];
		var parent = child02.parentNode;
		console.log(parent);
		alert(parent.nodeName);
		parent.style.backgroundColor='pink';
	}

	function searchChi(){
		var div = document.getElementsByTagName("div")[0];
		//alert(div.length);
		
		// childNodes : 자식 노드들을 배열로 반환
		var divChildren = div.childNodes;
		console.log(divChildren);
		divChildren[5].style.color="blue";
		divChildren[5].style.backgroundColor="black";
	}
	
	function test01(){
		var ch = document.getElementsByTagName("p")[3];
		var pa = ch.parentNode;
		pa.style.backgroundColor="#F3E2A9";
	}
	
	function test02(){
		var div = document.getElementsByTagName("div")[2];
		var children = div.childNodes[3];
		children.style.fontSize="20pt";
	}

</script>
</head>
<body>

	<h1>부모탐색, 자식탐색</h1>

	<div>
		<p>child01</p>
		<p>child02</p>
		<p>child03</p>
	</div>
	
	<button onclick="searchPar();">부모탐색</button>
	<button onclick="searchChi();">자식탐색</button>
	
	<!-- 문제 -->
	<h3 onclick="test01();">1. "test01을 포함하는 부모태그"의 배경색을 지정하자</h3>
	<!-- parentNode 사용하기! -->
	
	<h3 onclick="test02();">2. "세번째 div 태그에 포함된 test04"의 폰트 크기를 20pt로 적용하자</h3>
	
	<div>
		<p>test01</p>
		<p>test02</p>
	</div>
	<div>
		<p>test03</p>
		<p>test04</p>
	</div>
</body>
</html>

function searchPar(){
	var child02 = document.getElementsByTagName("p")[1];
	var parent = child02.parentNode;
	console.log(parent);
	alert(parent.nodeName);
	parent.style.backgroundColor='pink';
}

부모탐색 버튼을 누르면 해당 함수가 실행됩니다.

<div>
	<p>child01</p>
	<p>child02</p>
	<p>child03</p>
</div>

그러면 HTML영역에 있는 해당 코드에서 이벤트가 발생합니다.

1번지의 <P>태그인 child02 부분의 부모태그인 <DIV>영역이 이벤트를 발생 시키겠네요!

이벤트는 배경색을 pink색으로 바꾸는것 이었습니다.

function searchChi(){
	var div = document.getElementsByTagName("div")[0];
	alert(div.length);
		
	// childNodes : 자식 노드들을 배열로 반환
	var divChildren = div.childNodes;
	console.log(divChildren);
	divChildren[5].style.color="blue";
	divChildren[5].style.backgroundColor="black";
}

자식탐색 버튼을 누르면 해당 함수가 실행됩니다.

0번지에 담긴 <div>태그를 찾아 배열의 길이를 출력합니다.

출력 결과는 undefined입니다.

childNodes는 자식 노드들을 배열로 담게됩니다.

함수에서는 해당 <div>의 자식요소들을 배열로 저장합니다.

콘솔창에 출력된 결과를 보면 해당 배열의 길이는 7이며 태그뿐만아니라 text도 배열에 포함되는걸 알수 있습니다.

	<div>
		<p>test01</p>
		<p>test02</p>
	</div>
	<div>
		<p>test03</p>
		<p>test04</p>
	</div>

아래쪽 함수들은 HTML영역중 해당영역에서 이벤트가 발생합니다.

<div>는 각각 1번지, 2번지에 저장되어있습니다.

<p>태그는 3번지부터 시작하겠네요.

function test01(){
	var ch = document.getElementsByTagName("p")[3];
	var pa = ch.parentNode;
	pa.style.backgroundColor="#F3E2A9";
}

3번지에 있는 p태그의 부모의 배경색을 변경합니다.

function test02(){
	var div = document.getElementsByTagName("div")[2];
	var children = div.childNodes[3];
	children.style.fontSize="20pt";
}

해당 함수는 2번지에 있는 <div>태그의 자식요소중 3번지에 저장되어있는 배열의 폰트크기를 변경합니다.

0번지에는 text03글자가 담겨있는 <p>태그 1번지에는 text가 2번지에는 text04라는 글자를 감싸고 있는 <p>태그입니다!

728x90