728x90
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 | 정교하게 문자열을 이용해 노드를 변경할 때 사용한다. |
728x90
'🤯TIL > Javascript & jQuery' 카테고리의 다른 글
[생활코딩] Text 객체(값 API, 조작 API) (0) | 2023.03.13 |
---|---|
[생활코딩] Document 객체 (0) | 2023.03.10 |
[생활코딩] Element 객체(식별자 API, 조회 API, 속성 API, jQuery 속성 제어 API) (0) | 2023.03.07 |
DOM : Document Object Model (0) | 2023.03.06 |
BOM : Browser Object Model (0) | 2023.03.05 |