함수를 통하여 애타게 가족을 찾아다니는 요소들의 코드속 인생을 보면
자바스크립트도 사실은 우리의 인생과 다르지 않다. (?)
childNodes
|
1
2
3
4
5
|
<div id=mother>
<div id=one></div>
<div id=two></div>
<div id=three></div>
</div>
|
cs |
오늘은 단란한 이 네명의 가정을 통해 자바스크립트의 가족 함수들을 정리해볼 것이다. 코드 공부 도중에도 아버지가 없어 힘들게 세 자식을 먹여살리는 어머니의 위대함을 세삼스레 느껴본다.
|
1
2
3
4
5
6
7
8
|
// 엄마 생성
var mother = document.getElementById('mother');
// 모든 자식 찾기
var every = mother.childNodes;
// 첫번째 자식새끼 찾기
var one = mother.firstChild;
// 세번째 아들내미 찾기
var three = mother.lastChild;
|
cs |
모든 자식은 childNodes 를 통해 찾을 수 있다.
getElementsByClassName 처럼 배열형태로 저장된다.
그리고
첫번째 자식은 firstChild
마지막 (늦둥이) 자식은 lastChild
로 알아낼 수 있는데, 이 구간에서 위아래에 끼어있는 두번째 자식의 슬픔이 여기까지 들려온다. 필자도 두번째 자식이기 때문에, 오직 childNodes 로만 찾을 수 있는 존재감없는 인생일 뿐이다.
parentNode
자, 이제 사회를 충분히 경험한 자식들이 늦게서라도 오랫동안 안부조차 드리지 못했던 부모님을 찾으려는 마음이 고스란히 담긴 함수가 여기있다.
|
1
2
|
var one = document.getElementById('one');
var mother = one.parentNode;
|
cs |
매우 간단하다. 꼴에 첫째라고 제일 먼저 어머니를 찾은 모습이다.
그렇다면, 부모의 부모를 찾으려면 어떻게 해야할까?
|
1
2
|
var one = document.getElementById('one');
var grandparents = one.parentNode.parentNode;
|
cs |
그냥 이렇게 이어주기만 하면 된다.
Sibling
이제 마지막으로 형제들을 찾아보자.
매우 간단하다.
|
1
2
3
|
var one = document.getElementById('one');
var two = one.nextSibling;
var one = two.previousSibling;
|
cs |
말그대로
nextSibling은 밑에 있는 형제를
previousSibling은 위에 있는 형제의 엘리먼트를 선택한다.