[FE] 03. DOM API 실습

3. 웹 애플리케이션 개발 - DOM API 실습

* Dom Node 생성과 추가

[참고 DOM API] http://developmentnotepad.tistory.com/40?category=758332 

 

1. 다양한 APIs

document. 으로 사용할 수 있는 APIs : 링크 바로가기

element. 으로 사용할 수 있는 APIs : 링크 바로가기

 

2. DOM 탐색 APIs

- 유용한 속성

• tagName : 엘리먼트의 태그명 반환

• textContent : 노드의 텍스트 내용을 설정하거나 반환

• nodeType : 노드의 노드 유형을 숫자로 반환

- 탐색 속성

• childNodes: 엘리먼트의 자식 노드의 노드 리스트 반환(텍스트 노드, 주석 노드 포함)

• firstChild: 엘리먼트의 첫 번째 자식 노드를 반환

• firstElementChild: 첫 번째 자식 엘리먼트를 반환

• parentElement: 엘리먼트의 부모 엘리먼트 반환 

• nextSibling: 동일한 노드 트리 레벨에서 다음 노드를 반환 

• nextElementSibling: 동일한 노드 트리 레벨에서 다음 엘리먼트 반환

var a = document.querySelector(".w3-table-all"); 로 a에 저장 후에

a.textContent, a.remove 처럼 메소드를 사용해 접근할 수 있다.

 

3. DOM 조작 API

- 삭제, 추가, 이동, 교체

• removeChild(): 엘리먼트의 자식 노드 제거

• appendChild(): element node 넣기, 마지막 자식 노드로 자식 노드를 엘리먼트에 추가

• insertBefore(): 기존 노드 앞에 새 자식 노드를 추가

• cloneNode(): 노드를 복제

• replaceChild(): 엘리먼트의 자식 노드를 바꿈

• closest(): 상위로 올라가면서 근접(가장 가까운) 엘리먼트 찾은 후 반환 

* div element 아래 text node 넣기 - appendChild

$0.appendChild(div);로 원하는 부분 선택해서 넣을 수 있다.

google 크롬 개발자 도구에서 선택한 것은 $0으로 바로 접근할 수 있다.

 

[참고] console drawer 사용하기: https://blog.naver.com/gingsero/221306440049

 

* insertBefore

parent.insertBefore(div, base);를 해주면 [^abc] 위에 "여기에 추가됐어요."가 추가 된다.

 

---

* 문자열 기반으로 DOM 조작하기

1. HTML을 문자열로 처리해주는 DOM API

• innerText: 지정된 노드와 모든 자손의 텍스트 내용을 설정하거나 반환 (=getter, setter)

• innerHTML: 지정된 엘리먼트의 내부 html을 설정하거나 반환

• var html = parent.innerHTML; (=getter)

• parent.innerHTML="<p>innerHTML...</p>"; 해주면 p테그가 parent 기준으로 추가된다. (=setter)

• insertAdjacentHTML: HTML로 텍스트를 지정된 위치에 삽입

 

* insertAdjacentHTML 사용 방법

var base = document.querySelector("div");

base.insertAdjacentHTML("afterbegin", "<h1>hello world</h1>");

 

=> afterbegin이므로 base(div)의 첫 번째에 hello world가 삽입된다.

 

• beforebegin: element 앞에 넣을 때
• afterbegin: element 안에 가장 첫번째 child로 넣을 때
• beforeend: element 안에 가장 마지막 child로 넣을 때
• afterend: element 뒤에 넣을 때

[참고] https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML

 

* innerHTML로 p tag 추가하기

* insertAdjacentHTML로 문자열 추가하기