TIL : DOM

1. DOM (Document Object Model)

- HTML(Document)에 접근하여 Object처럼 HTML을 조작할 수 있는 모델 (웹 페이지에 대한 프로그래밍 인터페이스)

- document 객체를 통해 HTML에 접근한다.

 

→ DOM 구조 조회 : console.dir

---

2. CREATE - createElement

HTML 요소를 만들어 반환

const newDiv = document.createElement('div')

※ 참고

DOM 객체에 대한 다수의 접근을 필요로 하는 작업을 할 때 Document.createDocumentFragment()를 이용하면 성능이 향상될 수 있다.

---

3. APPEND - append, appendChild, prepend

createElement만 했을 때는 새로 만들어진 newDiv 노드가 연결되지 않은 상태이므로 append를 이용해 DOM 구조와 연결해준다.

document.body.append(newDiv)

※ append vs prepend

append는 요소 내부의 끝 부분에 삽입 / prepend는 요소 내부의 시작 부분에 삽입

 

	append()	appenChild()
타입	Javascript 메서드	DOM 메서드
추가 노드 개수	n개	1개
입력값	Node 객체 + DOMString 객체	Node 객체
반환값	없음 (undefined)	추가한 노드 객체

 

---

4. READ - querySelector, querySelectorAll

· querySelector : tag, id, class 등 선택자와 일치하는 요소 반환

· querySelectorAll : querySelector와 같은 기능 + 여러 요소 반환

· 이외에도 get으로 시작하는 getElementById, getElementsByClassName 등이 있다. querySelector와 기능은 비슷하며 이전 브라우저(인터넷 익스플로러) 호환 시 사용한다.

const Input = document.querySelector('.input')

---

5. UPDATE - textContent, classList.add, setAttribute

· textContent : 텍스트 노드를 추가한다.

newDiv.textContent = 'dev';
console.log(newDiv) //<div>dev</div>

· classList.add : 클래스 속성을 삽입한다.

· setAttribute(name, value) : 속성을 설정한다.

 

※ innerHTML

innerHTML은 텍스트와 HTML 요소들을 가져와 수정할 수 있지만 보안이 취약하기 때문에 보통 textContent를 사용한다.

---

6. DELETE - remove, removeChild

newDiv.remove()
newDiv.removeChild()