[자바스크립트] Node
Node 노드
모든 DOM은 노드라 불리는 계층 단위에 정보를 저장
* 형제 노드(nextSilblig/previousSiblig) : 같은 부모 노드를 가지는 노드
* 조상 노드(parnetNode) : 부모 노드를 포함해 계층적으로 현 노드보다 상위에 존재하는 노드
* 자손 노드 : 자식 노드를 포함해 계층적으로 현 노드보다 하위에 존재하는 노드
1) 문서 노드 : HTML 문서 전체를 나타내는 노드
2) 요소 노드 : 모든 HTML요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드
3) 속성 노드 : 모든 HTML요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가지고 있음(해당 요소의 자식 노드에는 포함되지 않음)
4) 텍스트 노드 : HTML문서의 모든 텍스트
노트 트리의 가장 상위에는 단 하나의 루트가 존재함, 루트 노드를 제외한 모든 노드는 단 하나의 부모 노드만 가짐
HTML Collection vs NodeList
HTML collection - Element타입의 노드만 저장되며, NodeList는 모든 타입의 노드가 저장될 수 있음
appendChild() 새로운 노드를 해당 노드의 자식 노드 리스트의 맨 마지막에 추가
insertBefore() 새로운 노드를 특정 자식 노드의 바로 앞에 추가
insertData() 텍스트 노드를 텍스트 데이터에 새로운 텍스트로 추가
createElements 새로운 요소 노드를 많듦
createAttribute 새로운 속성 노드를 만들 수 있음
createTextNode() 새로운 텍스트 노드를 만들 수 있음
removeChild() 자식 노드 리스트에서 특정 자식 노드를 제거, 성공적으로 노드가 제거되면 제거된 노드를 반환
removeAttribute() 속성의 이름을 이용해 특정 속성 노드를 제거
cloneNode() 전달된 값이 true면 복제되는 모든 노드의 속성과 자식 노드가 복제되고, false면 속성 노드만 복제
replaceChild(새로운 자식 노드, 기존 자식 노드 ) 기존 요소 노드를 새로운 노드로 교체
replaceData(오프셋, 교체문자수, 새로운데이터) 텍스트 노드의 텍스트 데이터를 바꿈
노드 간의 관계 알아보기
h1Tag.nodeName // 현 노드에 대한 이름 출력
ulTag.nodeType // 요소노드 vs 텍스트노드인지 확인하기 위한 타입
h1Tag.bodeValue // 현 노드의 값을 반환
h1Tag.nextSilblig // #text
h1Tag.childNodes // 자식 노드리스트
// NODE VS HTML Collection
h1Tag.childNodes
h1Tag.children // => html컬렉션만 도출