728x90
자바스크립트에서
부모 태그 찾기 - 기준태그.parentElement
샘플 예제 ↓
[HTML]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>부모 노드 찾기</title>
<style>
#sample-section table {
border-collapse: collapse;
}
#sample-section table td {
border : 1px solid grey;
padding : 6px 12px;
}
</style>
</head>
<body>
<section id="sample-section">
<table>
<thead>
<thead>
<tr>
<td>-</td>
<td>제목</td>
<td>내용</td>
<td><input type="checkbox" id="total-check"></td>
</tr>
</thead>
</thead>
<tbody>
<tr>
<td>1</td>
<td>title1</td>
<td>content1</td>
<td><input type="checkbox" class="checkbox-class"/></td>
</tr>
<tr>
<td>2</td>
<td>title2</td>
<td>content2</td>
<td><input type="checkbox" class="checkbox-class"/></td>
</tr>
<tr>
<td>3</td>
<td>title3</td>
<td>content3</td>
<td><input type="checkbox" class="checkbox-class"/></td>
</tr>
</tbody>
</table>
</section>
<script src="sample.js"></script>
</body>
</html>
[Javascript]
var tbody = document.querySelector('section>table>tbody');
var totalCheck = document.querySelector('#total-check');
//상단 checkbox 체크시 전체 체크박스 체크 및 해제!
totalCheck.addEventListener('click',e=>{
var checkboxList = document.querySelectorAll('.checkbox-class');
checkboxList.forEach(checkbox=>checkbox.checked = e.target.checked);
});
//checkbox 체크시, 해당 row 배경 색상 노랑으로 변경 이벤트 할당!
tbody.addEventListener('click',e=>{
//체크 박스 선택
if(e.target.className == 'checkbox-class'){
//부모 찾기
var parentNode = e.target.parentElement.parentElement;
//배경 색상 변경
if(parentNode.style.backgroundColor != 'yellow')
parentNode.style.backgroundColor='yellow';
else
parentNode.style.backgroundColor = 'transparent';
}
});
위 소스코드를 실행하면
하단과 같은 페이지가 출력이되는데,
테이블 오른쪽 끝에 있는 체크박스 체크시,
테이블 행 전체의 배경색이 노랑색으로 바뀌는 예제이다.
하지만, 위 자바스크립트 코드에는 문제가 있다.
만약 체크박스 역할을 하는 input 태그의 부모에
아래와 같이 span 태그와 같은 부모 태그가 추가된다면?
[변경된 HTML 코드]
<tbody>
<tr>
<td>1</td>
<td>title1</td>
<td>content1</td>
<td>
<span> //<- 추가된 Span 태그
<input type="checkbox" class="checkbox-class"/>
</span>
</td>
</tr>
<tr>
<td>2</td>
<td>title2</td>
<td>content2</td>
<td>
<span> //<- 추가된 Span 태그
<input type="checkbox" class="checkbox-class"/>
</span>
</td>
</tr>
<tr>
<td>3</td>
<td>title3</td>
<td>content3</td>
<td>
<span> //<- 추가된 Span 태그
<input type="checkbox" class="checkbox-class"/>
</span>
</td>
</tr>
</tbody>
기존과 자바스크립트 코드에서는 부모 태그 중
tr을 찾아야 하는데 td를 찾게 될 것이다.
아까 작성하였던 자바스크립트 코드를
다시 한번 보면 e.target.parentElement.parentElement 로
input 태그의 부모의 부모 태그를 찾으라고 했지,
행을 대표하는 tr태그를 찾으라는 명령이 아니기 때문이다.
그렇다면 e.target.parentElement.parentElement 에다가
.parentElement 하나를 더 추가하면 되는 것 아닌가(?) 라는
초 간단 해결 방법을 찾을수도 있겠지만
이는 올바른 해결 방법이 아니다.
물론 위의 span 태그의 추가와 같은 소스의 추가 및 삭제 등의
수정은 유지보수시 상당히 빈번하게 발생한다.
[변경된 Javascript 코드]
//checkbox 체크시, 해당 row 배경 색상 노랑으로 변경 이벤트 할당! [수정본]
tbody.addEventListener('click',e=>{
//체크 박스 선택
if(e.target.className == 'checkbox-class'){
//부모 태그 찾기
var parentTrTag = e.target;
//부모 태그 명이 TR이 나올때까지 자동순회
for(;parentTrTag.nodeName != 'TR' ; parentTrTag=parentTrTag.parentElement);
//순회 종료 후 배경 색상 변경
if(parentTrTag.style.backgroundColor != 'yellow')
parentTrTag.style.backgroundColor = 'yellow';
else
parentTrTag.style.backgroundColor = 'transparent';
}
});
변경된 javascript 코드를 보면
부모 태그 명이 TR이 나올때 까지 자동으로 순회 한뒤,
원하는 부모를 찾게되면 순회를 멈추고
약속했던 기능을 수행하는 코드이다.
728x90
'프론트엔드 > Javascript' 카테고리의 다른 글
| [Javascript] 기본 이벤트 삭제 event.preventDefault() (0) | 2021.02.01 |
|---|---|
| [Javascript] 노드복사 importNode (3) | 2021.02.01 |
| [Javascript] ClassList .contains/.add/.remove/.toggle (0) | 2021.01.31 |
| [Javascript] 이벤트 Event (0) | 2021.01.31 |
| [Javascript] Wrapping Class (래핑 클래스) (0) | 2021.01.29 |
댓글