JavaScript - Node

노드(node)

- HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장

노드종류

- 문서노드: 문서 전체를 나타내는 노드
- 요소노드: HTML의 요소는 요소노드, 속성노드를 가질수 있음
- 속성노드: 속성은 모두 속성노드이며, 요소노드의 관한 정보를 가지고 있다
- 텍스트노트: 텍스트는 모두 텍스트노드
- 주석노드: 주석은 모두 주석노드

노드의 관계

parentNode: 부모 노드
children: 자식
childsNodes: 자식 노드 리스트
firstchild: 첫번째 자식 노드  // 아래의 경우에 엔터키가 찾아질수도 있다
firstElementChild: 첫번째 자식 요소 노드 // 요소만 찾아지므로 li태그가 바로 찾아진다
lastChild: 마지막 자식 노드 // 마찬가지로 엔터키, 공백, 주석이 찾아질수도 있다
lastElementChild: 마지막 자식 요소 노드 // 요소만 찾아짐
nextSibling: 다음 형제 노드
preiousSibling: 이전 형제 노드

    <ul>
        <li>김사과</li>
        <li>오렌지</li>
    </ul>

노드 추가

appendChild(): 새로운 노드를 해당 노드의 자식 노드 리스트 맨 마지막에 추가
insertBefore(): 새로운 노드를 특정 자식노드 바로 앞에 추가
insertData(): 새로운 노드를 텍스트 데이터로 추가

노드 생성

createElement(): 새로운 요소 노드를 만듬
createAttribute(): 새로운 속성 노드를 만듬
createTextNode(): 새로운 텍스트 노드를 만듬

노드 제거

removeChild(): 자식 노드 리스트에서 특정 자식 노드를 제거. 노드가 제거되면 해당노드를 반환. 노드가 제거될 때 노드이 자식들도 다같이 제거
removeAttribute(): 특정 속성 노드를 제거

노드 복제

clonenode(): 기존의 존재하는 노드와 동일한 노드를 새롭게 생성하여 반환