Javascript(DOM)

*문서 객체 모델(DOM)

HTML 문법으로 작성한 태그, 주석, 텍스트와 같은 구성 요소들은 웹브라우저에서 각각 하나의 객체로 인식한다.

이러한 HTML 구성 요소들을 다루는 객체를 **문서 객체 모델(Document Object Model)**이라고 한다.

웹 브라우저는 HTML 문서의 구성 요소를 모두 객체로 인식

DOM이란, 웹 브라우저에서 HTML 문서 구조를 객체화한 모델을 의미

 

 

 

 

속성으로 노드 선택하기

let doc = document.firstChild;
console.log(test);

let html = document.firstElementChild;
console.log(html);

 

 

 

 

메서드로 노드 선택하기

속성으로 노드를 선택하는 방법은 노드의 타입을 가리지 않고 모든 노드를 이동하며 선택할 수 있다는 장점이 있다.

하지만 DOM 트리가 복잡할수록 원하는 노드를 찾아가기 어렵다는 단점도 있다.

그래서, 일반적으로 요소 노드를 바로 선택 할 수 있는 메서드를 이용한 노드 선택 방법과 적절히 조합해서 사용한다.

 

 

속성값과 태그명 사용하기 - get 메서드

 

 

 

 

CSS 선택자 사용하기 - query메서드

document 객체의 메서드 중에는 매개변수로 CSS 선택자를 전달받아 노드를 선택하는 메서드

 

 

 

 

노드 조작하기

document 객체의 속성이나 메서드로 문서 객체 모델의 노드를 선택하고 나면 선택한 노드에 여러 조작을 할 수 있다.

 

컨텐츠 조작하기

선택한 도느의 타입이 요소 노드라면 다음 표에 정의된 속성을 사용해 컨텐츠를 조작할 수 있다.

 

 

 

스타일 조작하기

선택된 노드의 타입이 요소 노드라면 style 속성으로 요소에 스타일(CSS)을 지정 할 수 있다.

<노드>.style.<css속성명> = <속성값>;

 

 

 

 

 

메서드로 속성 조작하기

메서드를 사용하면 모든 속성을 전체적으로 변경 할 수 있다.

 

 

 

 

폼 조작하기

form 태그 선택하기

HTML 폼 요소의 시작은 항상 form 태그 

 

form 속성 사용하기

document 객체의 forms 속성은 모든 form 태그의 노드 정보를 HTMLCollection 객체에 담아 반환

 

name 속성 사용하기

form 태그에 name 속성을 사용하면 forms 속성보다 훨씬 직관적으로 form 요소 노드를 선택할 수 있다.

 

 

 

 

폼 요소의 입력값 다루기

폼 요소는 사용자에게 값을 입력 받아 서버에 전달 한다.

전달받은 값을 서버에서 어떻게 활용하는지는 백엔드 영역이지만, 서버에 전달하기까지 폼 요소에 입력된 값이 유효한지 검증할 수 있어야 합니다.

사용자에게 값을 입력받는 대표적인 폼 요소로는 input태그와 select 태그가 있다.

 

 

한 줄 입력 요소 다루기

한 줄 입력 요소는 input 태그의 type 속성값을 text, password, number, url, search, email 등으로 지정했을 때 표시되는 폼 요소를 말한다.

한 줄 요소들은 값을 가져오거나 설정하는 방법이 모두 똑같다.

 

 

여러 줄 입력 요소 다루기

여러 줄 입력 요소는 textarea 태그를 사용하면 표시되는 폼 요소입

 

 

 

 

체크박스 다루기

체크박스도 value속성으로 값을 가져올 수 있다.

하지만 한 줄 입력 요소와는 다르게 체크박스에 체크 표시가 있는 것만 가져와야 하는 경우가 많다.

 

 

라디오버튼 다루기

라디오버튼은 여러 개의 항목 중 하나만 선택하게 할 때 사용하는 폼 요소

체크박스와 같은 방식으로 값을 다룬다.

 

 

콤보박스 다루기

select 태그로 만드는 콤보박스는 여러 항목에서 하나를 선택하는 형태의 폼 요소

체크박스나 라디오버튼에서 checked 속성으로 선택항목을 확인 할 수 있는 것처럼

콤보박스에서는 selected 속성으로 선택 항목을 확인 할 수 있다.

 

 

파일 업로드 요소 다루기

파일 업로드 요소는 input 태그의 type 속성값을 file로 지정하면 표시되는 요소