형제, 부모, 자식 노드 접근

node

node에는 element, text, comment 등 여러 항목이 포함되어 있다

부모 node

• parentNode : 부모 노드 중 모든 노드를 반환한다.

자식 node

• childNodes : 자식 노드 목록을 NodeList 형태로 반환한다.
• firstChild : 자식 노드 중, 첫 번째 자식 노드를 반환한다.
• lastChild : 자식 노드 중, 마지막 자식 노드를 반환한다.

형제 node

• previousSibling : 같은 레벨의 노드 중, 이전 노드를 반환한다.
• nextSibling : 같은 레벨의 노드 중, 다음 노드를 반환한다.

See the Pen node by pminsun (@pminsun) on CodePen.

 

element

element는 여러 node 타입 중 한 종류로 <p>, <div>, <a>와 같은 태그를 사용해서 작성된 노드이다.

부모 element

• parentElement : 부모 요소(element)를 반환한다.

자식 element

• children : 자식 요소(element) 목록을, ' HTMLCollection ' 형태로 반환한다.
• firstElementChild : 자식 요소, 첫 번째 자식 요소를 반환한다.
• lastElementChild : 자식 요소 중, 마지막 요소를 반환한다.

형제 element

• previousElementSibling**:** 같은 레벨의 요소 중, 이전 요소를 반환한다.
• nextElementSibling: 같은 레벨의 요소 중, 다음 요소를 반환한다.

See the Pen element by pminsun (@pminsun) on CodePen.