[Javascript] 노드(node)

노드(node)
- HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장
- 노드 트리는 노드들의 집합이며 노드간의 관계를 보여줌

노드의 종류
문서 노드(document node) : 문서 전체를 나타내는 노드
요소 노드(element node) : HTML 요소는 요소 노드이며 속성 노드를 가질 수 있는 유일한 노드
속성 노드(attribute node) : HTML 요소의 속성은 속성 노드이며 요소 노드에 관한 정보를 가지고 있음
텍스트 노드(text node) : HTML 문서의 모든 텍스트는 텍스트 노드
주석 노드(comment node) : 모든 주석은 주석 노드

 

노드간의 관계
parentNode 부모노드
childNodes 자식 노드 리스트
firstChild 첫번째 자식 노드
lastChild 마지막 자식 노드
nextSibling 다음 형제 노드
previousSibling 이전 형제 노드

 

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

 

* 노드 생성
createElement()
새로운 요소 노드를 만든다
createAttribute()
새로운 속성 노드를 만든다
createTextNode()
새로운 텍스트 노드를 만든다

 

노드 제거
removeChild()
자식 노드 리스트에서 특정 자식 노드를 제거
성공적으로 노드가 제거되면 제거되는 노드가 리턴
노드가 제거될 때에는 제거되는 노드의 모든 자식들도 다같이 제거됨

 

노드 복제
cloneNode()
- 기존에 존재하는 노드와 동일한 새로운 노드를 생성하고 리턴
- 매개값으로 true를 넘기면 복제되는 노드의 모든 속성과 자식노드도 같이 복제

/ false를 넘기면 속성 노드만 복제하고 자식노드는 복제하지 않는다.

 

폼 객체
<form id="regForm" name="myForm">
<input type="text" name="userid" id="id">
</form>

 

폼의 접근
1. const frm = document.getElementById("regForm"); //id로 찾기
2. const frm = document.myForm; //name으로 찾기

input 태그 접근
1. document.myForm.userid
2. document.myForm.elements[0]
3. document.myForm.elements['userid']
4. document.getElementById("id")