document노드로부터 시작하여 원하는 노드에 접근하는 방법
자바스크립트립트가 지원하는 자식노드 접근방법
firstChild : 첫번째 자식노드
lastChild : 마지막 자식노드
childNodes : 자식노드 콜렉션(내부중첩된 자식노드들은 제외)
elem.childNodes[0] === elem.firstChild
elem.childNodes[elem.childNodes.length - 1] === elem.lastChild자식노드의 구분
자식노드(child node, children)은 바로 아래의 자식 요소를 나타낸다.
후손노드(descendants)는 자식관계에 있는 모든 요소 즉 컬렉션을 의미한다.
컬렉션의 의미
childNodes는 배열이 아니며 이터러블한 유사배열객체인 컬렉션(collection)이다.
컬렉션과 모든 탐색용 프로퍼티는 읽기전용이며 변경하려면 다른 메소드를 사용해야 한다.
컬렉션의 변경은 실시간 반영된다. 노드의 추가, 삭제등 변경사항은 실시간으로 컬렉션에 반영된다.
<div><ul>
<li>1</li>
<li>1</li>
</ul><ul>
<li>1</li>
<li>1</li>
</ul></div>div.childNodes는 < ul >< /ul >< ul >< /ul >이 된다.
nextSibling, previousSibling, parentNode
