// Axis(Traversing)
- 본인을 기준으로 주변의 요소(부모, 자식, 형제)를 검색하는 도구
- 자식 태그
- childNodes: 자식 노드들
- firstChild; 첫 번째 자식 노드 > me.childNodes[0];
- lastChild> 마지막 자식 노드 >
- 바로 위의 형제
~ previousSibling
~ previousElementSibling
- 바로 밑의 형제
~ nextSibling
~ nextElementSibling
- 자식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
border: 1px solid black;
padding: 10px;
margin: 10px;
}
#me {
outline: 5px solid black;
}
.check {
background-color: gold;
}
</style>
</head>
<body>
<h1>Axis</h1>
<input type="button" value="버튼" id="btn">
<hr>
<div>
할아버지
<div>
큰아버지
<div>사촌</div>
</div>
<div>
아버지
<div>
큰형
<div>조카</div>
</div>
<div>
작은형
</div>
<div id="me">
나
<div>큰애</div>
<div>
둘째
<div>손자</div>
</div>
<div>막내</div>
</div>
<div>
동생
</div>
<div>
막내동생
<div>조카</div>
</div>
</div>
<div>
작은아버지
<div>사촌</div>
</div>
</div>
<script>
document.getElementById('btn').onclick = function() {
const me = document.getElementById('me');
//나로부터 다른 사람 검색!
// me.className = 'check'; //<div id="me" class="check">
//자식 태그
// - me.childNodes: 자식 노드들
// alert(me.childNodes.length);
for(let i = 0; i < me.childNodes.length; i++) {
console.log(me.childNodes[i].nodeType
, me.childNodes[i].nodeName
, me.childNodes[i].nodevalue);
if(me.childNodes[i].nodeType == 1 && me.childNodes[i].nodeName =='DIV') {
console.log(me.childNodes[i].className);
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
border: 1px solid black;
padding: 10px;
margin: 10px;
}
#me {
outline: 5px solid black;
}
.check {
background-color: gold;
}
</style>
</head>
<body>
<h1>Axis</h1>
<input type="button" value="버튼" id="btn">
<hr>
<div>
할아버지
<div>
큰아버지
<div>사촌</div>
</div>
<div>
아버지
<div>
큰형
<div>조카</div>
</div>
<div>
작은형
</div>
<div id="me">
나
<div>큰애</div>
<div>
둘째
<div>손자</div>
</div>
<div>막내</div>
</div>
<div>
동생
</div>
<div>
막내동생
<div>조카</div>
</div>
</div>
<div>
작은아버지
<div>사촌</div>
</div>
</div>
<script>
document.getElementById('btn').onclick = function() {
const me = document.getElementById('me');
me.firstElementChild.className = 'check';
me.lastElementChild.className = 'check';
}
</script>
</body>
</html>- 손자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
border: 1px solid black;
padding: 10px;
margin: 10px;
}
#me {
outline: 5px solid black;
}
.check {
background-color: gold;
}
</style>
</head>
<body>
<h1>Axis</h1>
<input type="button" value="버튼" id="btn">
<hr>
<div>
할아버지
<div>
큰아버지
<div>사촌</div>
</div>
<div>
아버지
<div>
큰형
<div>조카</div>
</div>
<div>
작은형
</div>
<div id="me">
나
<div>큰애</div>
<div>
둘째
<div>손자</div>
</div>
<div>막내</div>
</div>
<div>
동생
</div>
<div>
막내동생
<div>조카</div>
</div>
</div>
<div>
작은아버지
<div>사촌</div>
</div>
</div>
<script>
document.getElementById('btn').onclick = function() {
const me = document.getElementById('me');
//손자
//me.children[1].firstElementChild.className = 'check';
me.children[1].children[0].className = 'check'
}
</script>
</body>
</html>- 부모
* 사진으로 보면 헷갈릴 수 있는데, 아버지의 영역에 색칠된 것이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
border: 1px solid black;
padding: 10px;
margin: 10px;
}
#me {
outline: 5px solid black;
}
.check {
background-color: gold;
}
</style>
</head>
<body>
<h1>Axis</h1>
<input type="button" value="버튼" id="btn">
<hr>
<div>
할아버지
<div>
큰아버지
<div>사촌</div>
</div>
<div>
아버지
<div>
큰형
<div>조카</div>
</div>
<div>
작은형
</div>
<div id="me">
나
<div>큰애</div>
<div>
둘째
<div>손자</div>
</div>
<div>막내</div>
</div>
<div>
동생
</div>
<div>
막내동생
<div>조카</div>
</div>
</div>
<div>
작은아버지
<div>사촌</div>
</div>
</div>
<script>
document.getElementById('btn').onclick = function() {
const me = document.getElementById('me');
//부모&조상
// me.parentNode.className = 'check';
me.parentElement.className = 'check';
}
</script>
</body>
</html>- 조상
* 사진으로 보면 헷갈릴 수 있는데, 할아버지의 영역에 색칠된 것이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
border: 1px solid black;
padding: 10px;
margin: 10px;
}
#me {
outline: 5px solid black;
}
.check {
background-color: gold;
}
</style>
</head>
<body>
<h1>Axis</h1>
<input type="button" value="버튼" id="btn">
<hr>
<div>
할아버지
<div>
큰아버지
<div>사촌</div>
</div>
<div>
아버지
<div>
큰형
<div>조카</div>
</div>
<div>
작은형
</div>
<div id="me">
나
<div>큰애</div>
<div>
둘째
<div>손자</div>
</div>
<div>막내</div>
</div>
<div>
동생
</div>
<div>
막내동생
<div>조카</div>
</div>
</div>
<div>
작은아버지
<div>사촌</div>
</div>
</div>
<script>
document.getElementById('btn').onclick = function() {
const me = document.getElementById('me');
me.parentNode.parentNode.className = 'check';
}
</script>
</body>
</html>- 바로 위 형제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
border: 1px solid black;
padding: 10px;
margin: 10px;
}
#me {
outline: 5px solid black;
}
.check {
background-color: gold;
}
</style>
</head>
<body>
<h1>Axis</h1>
<input type="button" value="버튼" id="btn">
<hr>
<div>
할아버지
<div>
큰아버지
<div>사촌</div>
</div>
<div>
아버지
<div>
큰형
<div>조카</div>
</div>
<div>
작은형
</div>
<div id="me">
나
<div>큰애</div>
<div>
둘째
<div>손자</div>
</div>
<div>막내</div>
</div>
<div>
동생
</div>
<div>
막내동생
<div>조카</div>
</div>
</div>
<div>
작은아버지
<div>사촌</div>
</div>
</div>
<script>
document.getElementById('btn').onclick = function() {
const me = document.getElementById('me');
//바로 위 형제
me.previousElementSibling.className = 'check';
// me.previousElementSibling.previousElementSibling.className = 'check';
}
</script>
</body>
</html>- 바로 밑 형제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
border: 1px solid black;
padding: 10px;
margin: 10px;
}
#me {
outline: 5px solid black;
}
.check {
background-color: gold;
}
</style>
</head>
<body>
<h1>Axis</h1>
<input type="button" value="버튼" id="btn">
<hr>
<div>
할아버지
<div>
큰아버지
<div>사촌</div>
</div>
<div>
아버지
<div>
큰형
<div>조카</div>
</div>
<div>
작은형
</div>
<div id="me">
나
<div>큰애</div>
<div>
둘째
<div>손자</div>
</div>
<div>막내</div>
</div>
<div>
동생
</div>
<div>
막내동생
<div>조카</div>
</div>
</div>
<div>
작은아버지
<div>사촌</div>
</div>
</div>
<script>
document.getElementById('btn').onclick = function() {
const me = document.getElementById('me');
//바로 밑 형제
me.nextElementSibling.className = 'check';
// me.nextElementSibling.nextElementSibling.className = 'check';
}
</script>
</body>
</html>'클라이언트 > JavaScript' 카테고리의 다른 글
| CSS 조작 (0) | 2023.04.27 |
|---|---|
| [자바스크립트(JavaScript)] 클로저 (0) | 2023.04.27 |
| [자바스크립트(JavaScript)] DOM (0) | 2023.04.26 |
| [자바스크립트(JavaScript)] 타이머 (0) | 2023.04.25 |
| [자바스크립트(JavaScript)] 메시지 박스 (0) | 2023.04.24 |
