[생활코딩] Node 객체(관계 API, 노드 종류 API, 변경 API)

Node 객체

• DOM에서 시조와 같은 역할
• 관계 : 각각의 구성요소들의 프로그래밍적으로 어떻게 연결되어 있는지 알 수 있다.

---

Node 관계 API

• .firstChild.nextSibling.previousSibling 활용

---

노드 종류 API

• .nodeType : 해당되는 노드의 정보가 element, 속성, comment, text인지 알 수 있다.
• .nodeName : 태그의 이름, 텍스트 등 노드타입보다 조금 더 디테일한 정보를 알 수 있다.
  
  
• 재귀함수 : 어떠한 함수가 실행될 때 자기 자신을 호출하는 것
                   (traverse: 하나씩 조회한다.)

---

노드 변경 API

• 노드 추가
  : appendChild(child) : 제일 끝에 추가
  : insertBefore(new Element, reference Element) : 사이에 추가
  
  
• 노드 제거
  : removeChild(child) : 메소드는 삭제 대상의 부모 노드 객체의 것을 실행

---

jQuery 노드 변경 API

• jQuery 사용 이유?
  ➡ DOM 제어 위함!
• manipulation 참고
  
  
• 해당되는 모든 element 대상으로 적용된다.

before

prepend

<content>

append

after

 

• 삭제
  - remove : 선택된 element 제거
  - empty : 선택된 element의 text node 제거 / div는 계속 존재
  
  
• 바꾸기
  - replaceWith : 제어대상을 먼저 지정 / 제어대상이 앞에 옴
  - replaceAll : 제어대상을 인자로 전달 / 제어대상이 뒤에 옴
  
  
• 복사
  - clone 사용
  
  
• 이동
  - append 활용

---

문자열로 노드제어

innerHTML	하위 element 코드를 알아낼 수 있다.
outerHTML	자기자신 포함한 전체를 보여준다.
innerText & outerText	innerHTML, outerHTML과는 다르게 읽을 땐 HTML 코드를 제외한 문자열을 리턴하고, 값을 변경하면 HTML 코드를 그대로 추가한다.
insertAdjacentHTML	정교하게 문자열을 이용해 노드를 변경할 때 사용한다.

 

---

• 출처
  Node 객체 - 웹브라우저 JavaScript (opentutorials.org)

Node 객체 - 웹브라우저 JavaScript