자식노드 찾는 방법
=============================코드=============================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href = "../css/style.css">
<script type="text/javascript">
onload = () => {
let content = document.querySelector("#content");
// 문서에서 자식(자손) 노드를 찾는 방법
let child = content.childNodes;
console.log("#content 노드의 자식 수 >>> " + child.length);
}
</script>
</head>
<body>
<div id="sample_page" class="page">
샘플 페이지(div id="sample_page" class="page")
<div id="header">
헤더 영역(div id="header")
</div>
<div id="content" class="sample_content">
콘텐츠 영역(div id="content" class="sample_content")
<div>
JavaScript란(div)
<p id="data_1">자바스크립트 Core(p, id="data_1")</p>
<p id="data_2">자바스크립트 Core(p, id="data_2")</p>
<p id="data_3">자바스크립트 Core(p, id="data_3")</p>
을 배운다는 것.
</div>
<div class="content_data">
JavaScript에서 배울 내용(div class="content_data")
<p>1. JavaScript BOM(p)</p>
<p>2. JavaScript DOM(p)</p>
</div> <!-- class="content_data" end -->
<div class="content_data">
JavaScript에서 배울 내용(div class="content_data")
<p>1. JavaScript BOM(p)</p>
<p>2. JavaScript DOM(p)</p>
</div> <!-- class="content_data" end -->
</div> <!-- id="content" class="sample_content" end -->
<div id="footer">
푸터 영역(div id="footer")
</div> <!-- id="footer" end -->
</div> <!-- id="sample_page" class="page" end -->
</body>
</html>=============================실행=============================
부모노드 찾는 방법
=============================코드=============================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href = "../css/style.css">
<script type="text/javascript">
onload = () => {
let header = document.querySelector("#header");
// #header 노드의 부모 노드를 찾아보자
let parent = header.parentNode;
parent.style.border = "5px solid red";
}
</script>
</head>
<body>
// 위와 코드 동일
</body>
</html>=============================실행=============================
#content 노드에서 이전 형제, 이후 형제 노드를 찾아보자
(body태그는 위와 동일)
=============================코드=============================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href = "../css/style.css">
<script type="text/javascript">
onload = () => {
// #content 노드를 찾아보자
let content = document.querySelector("#content");
// #content 노드에서 이전 형제 노드를 찾아보자
let pre = content.previousElementSibling;
pre.style.border = "3px solid green";
// #content 노드에서 이후 형제 노드를 찾아보자
let next = content.nextElementSibling;
next.style.border = "3px solid red";
}
</script>
</head>
<body>
// 위와 코드 동일
</body>
</html>=============================실행=============================
