jQuery로 Axis 검색
DOM으로 Axis 검색하는 방법은 아래와 같다.
[JavaScript] DOM - 태그 검색 도구(2) : Axis 검색
🔻DOM 노드(태그) 검색 도구🔻 1,2번 적절히 같이 사용한다. 1. 식별자 검색 도구 obj.getElementById() obj.getElementByClassName() 아래 글 참고한다. https://steady-record.tistory.com/entry/JavaScript-DOM-%ED%83%9C%EA%B7%B8-%E
steady-record.tistory.com
태그에 check 클래스 이름을 설정하여 선의 색상을 바꾸는 이벤트를 적용해서 관계를 파악한다.
기본 뼈대
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ex08_tranversing</title>
<style>
div {
border: 1px solid black;
padding: 15px;
margin: 15px;
}
#me {
border: 10px solid cornflowerblue;
}
.check {
outline: 10px solid coral;
}
</style>
</head>
<body>
<input type="button" value="버튼" id="btn1">
<hr>
<div id="grand">
할아버지
<div>
큰아버지
<div>사촌</div>
</div>
<div>
아버지
<div>큰형</div>
<div>작은형</div>
<div id="me">
나
<div>자식</div>
<div>
자식
<div>손자</div>
<div class="test">손자</div>
<div class="test">손자</div>
</div>
<div>자식</div>
</div>
<div>작은동생</div>
<div>막내동생</div>
</div>
<div>
작은아버지
<div>사촌</div>
</div>
</div>
<script src="../asset/js/jquery-1.12.4.js"></script>
</body>
</html>
아래로 접근하기(자식)
- children : 모든 자식들을 반환한다.
- first() : 선택한 요소 중에서 첫 번째 요소를 선택
- last() : 선택한 요소 중에서 마지막 요소를 선택
- eq(인덱스) : 선택한 요소 집합 중에서 특정 인덱스의 요소를 선택
$('#me').children().addClass('check');자식들 안에서 첫째를 반환
$('#me').children().first().addClass('check');선택한 요소 중에서 첫 번째 요소를 선택
둘째
eq(인덱스) :
0, 1, 2, 3 > 위에서부터
-1. -2. -3 > 아래에서부터
$('#me').children().eq(1).addClass('check');
$('#me').children().children().addClass('check');
나의 손자 중에서 특정 클래스를 가진 손자 찾기
$('#me').children().children('.test').addClass('check');
find
//나로부터 파생된 하위 모든 태그 검색
//조건으로 선택자를 넣음
$('#me').find('.test').addClass('check');
