SEB Section 1 DOM

DOM 이란?

• DOM은 (Document Object Model)의 약자로, HTML 요소를 Object처럼 조작 할 수 있는 Model이다.
• 즉 Js을 이용하여 HTML 문서를 조작하는 것을 의미한다.

HTML에 JavaScript 적용하기

• Html에 JavaScript를 적용하기 위해서는 script 태그를 이용한다.
• 웹 브라우저가 작성된 코드를 해석하는 과정에서 script 요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈추고, sciprt 요소 부터 먼저 실행한다. script 요소는 등장과 함께 실행된다
• script 태그를 추가하는 방법은 두 가지가 있다.

1. head 태그 안쪽에 삽입하는 경우

2. body 태그 안쪽에 삽인하는 경우

자식 엘리먼트 찾기

• 자바스크립트에서 DOM은 document 객체에 구현되어 있다.
• DOM 구조를 조회할 때는 console.dir이 유용하다. DOM을 객체의 모습으로 출력해준다.
• document.body.children 으로 바로 조회할 수 있다.

부모 엘리먼트 찾기

• 엘리먼트를 변수에다가 저장을 하면 더욱 조회하기 용이하다.
• document.body.children.parentElement

Dom 구조

• dom 구조는 트리 구조로 되어 있다.
• 부모가 자식을 여러개 가지고, 부모가 하나인 구조가 반복되고 있다.

Create - createElement

• DOM으로 HTML을 조작하는 방법 중 가장 기초적인, element를 만드는 방법이다.
• document.createElement()

Read - querySelector, querySelectorAll

• DOM으로 HTML 엘리머트의 정보를 조회하기 위서는 querySelector의 첫 번째 인자로 셀렉터를 전달하여 확인한다.
• 셀렉터로는 HTML 태그, id, class 세가지가 가장 많이 사용된다.

1. querySelector

• 셀렉터를 가진 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회할 수 있다.

1. querySelectorAll

• 셀렉터를 가진 여러 개의 엘리먼트를 한 번에 가져오기 위해서는 querySelectorAll을 사용한다.

• 이렇게 가져온 HTML 엘리먼트들을 배열처럼 for문을 사용할 수 있다. 하지만 HTML 엘리먼트들은 배열이 아니다. 유사 배열, 배열형 객체 등 다양한 이름으로 부른다.

Update - textContent, classList.add

• classList.add 를 하면 HTML 엘리먼트에 class와 id를 붙힐 수 있다.
• setAttribute
• textContext는 HTML 엘리먼트에 문자열을 입력할 수 있다.

Delete - remove, removeChild

• 삭제하려는 엘리먼트의 위치를 아는 경우 remove 를 사용하면 HTML 엘리먼트를 삭제 할 수 있다.
• 여러 개의 자식 엘리먼트를 지우려면, innerHTML을 사용한다. 하지만 보안에서 문제를 가지고 있다.
• removechild 는 자식 엘리먼트를 지정해서 삭제하는 메소드 이다. 반복문을 활용할 수 있다.