1. DOM(Document Object Model)
- 문서 객체 모델은 웹 브라우저에 표시되는 문서를 자바스크립트가 이해할 수 있도록 객체화한 모델 구조
- DOM은 트리 구조로 생성되는데, 이를 DOM 트리라고 함
- DOM 트리를 구성하는 노드의 타입은 밑에 표
| 타입 | 설명 |
|---|
| 문서노드(Node.DOCUMENT_NODE) | 최상위 document 객체의 노드 타입 |
| 요소노드(Node.ELEMENT_NODE) | h1, p 태그와 같은 요소의 노드 타입 |
| 속성노드(Node.ATTRIBUTE_NODE) | href, src와 같은 속성의 노드 타입 |
| 텍스트 노드(Node.TEXT_NODE) | 텍스트에 해당하는 노드 타입 |
| 주석 노드(Node.COMMENT_NODE) | 주석에 해당하는 노드 타입 |
- DOM 트리의 노드를 탐색하는 속성은 다음과 같음
2. 노드 선택하기
| 메서드 형식 | 설명 |
|---|
| getElementById(id 속성 값) | id 속성 값과 일치하는 요소 노드를 1개만 선택 |
| getElementsByClassName(class 속성 값) | class 속성값과 일치하는 요소 노드를 모두 선택
|
| getElementsByTagName(태그명) | 태그명과 일치하는 요소 노드를 모두 선택 |
| querySelector(Css 선택자) | 매개변수로 넘어오는 CSS 선택자에 해당하는 노드를 한개만 선택 |
| querySelectorAll(Css 선택자) | 매개변수로 넘어오는 CSS 선택자에 해당하는 노드를 모두 선택 |
3. 노드 조작하기
| 속성 | 설명 |
|---|
| textContent | 노드 요소의 모든 텍스트에 접근 |
| innerText | 노드 요소의 텍스트 중 웹 브라우저에 표시되는 텍스트에만 접근 |
| innerHTML | 노드 요소의 텍스트 중 HTML 태그를 포함한 텍스트에만 접근 |
<노드>.style.<CSS 속성명> = <속성 값>;
<노드>.classList.add(class 속성 값);
<노드>.classList.remove(class 속성 값);
<노드>.dataset;
| 속성 | 설명 |
|---|
| textContent | 노드 요소의 모든 텍스트에 접근 |
| innerText | 노드 요소의 텍스트 중 웹 브라우저에 표시되는 텍스트에만 접근 |
| innerHTML | 노드 요소의 텍스트 중 HTML 태그를 포함한 텍스트에만 접근 |
4. DOM 노드 추가/삭제
| 구분 | 메서드 | 설명 |
|---|
| 노드 생성 | createElement() | 요소 노드를 생성 |
| createTextNode() | 텍스트 노드를 생성 |
| createAttirbute() | 속성 노드를 생성 |
| 노드 연결 | <기준 노드>.appendChild(자식 노드) | 기준 노드에 자식 노드를 연결 |
| <기준 노드>.setAttributeNode(속성 노드) | 기준 노드에 속성 노드를 연결 |
| 노드 삭제 | <부모 노드>.removeChild(자식 노드) | 부모 노드에 연결된 자식 노드를 삭제 |
5. 폼 태그 선택하기
- Document 객체의
forms 속성을 사용하면 모든 form 태그를 참조하는 HTMLCollection 객체가 반환됨
- form 태그의 name 속성값으로 form 요소 노드를 선택 가능
6. 폼 요소 선택하기
- form 요소 노드의 elements 속성은 하위 노드의 폼 요소를 반환
-> 반환된 객체를 사용 해 개별 폼 요소 노드에 인덱스로 접근 가능
- form 요소의 name 속성값으로 폼 요소 노드에 바로 접근 가능
7. 폼 요소 입력값 다루기
- 한줄 입력 요소, 여러 줄 입력 요소는 value 속성을 참조하면 입력값을 가져올 수 있고, value 속성에 값을 할당하면 새로운 값 설정 가능
- 체크 박스 요소와 라디오버튼 요소는 checked 속성으로 체크 또는 선택 상태 확인 가능, checked 속성에 true를 할당함녀 체크 또는 선택 상태를 기본으로 설정 가능
- 콤보박스 요소는 selected 속성으로 항목의 선택 상태를 확인할 수 있고, selected 속성에 true를 할당하면 항목을 선택 상태로 설정할 수 있음
- 파일 업로드 요소는 FileList 객체를 사용해 요소의 값을 가져올 수 있음
8. 이벤트 사용하기
이벤트는 웹 브라우저와 사용자 사이에 상호작용이 발생하는 특정 시점 의미
| 구분 | 이벤트 | 설명 |
|---|
| 마우스 이벤트 | onclick | 마우스로 클릭하면 발생 |
| ondblclick | 마우스로 두번 빠르게 클릭하면 발생 |
| onmouseover | 마우스 포인터를 올리면 발생 |
| onmouseout | 마우스 포인터가 빠져나가면 발생 |
| onmousemove | 마우스 포인터가 움직이면 발생 |
| onwheel | 마우스 휠을 움직이면 발생 |
| 키보드 이벤트 | onkeypress | 키보드 버튼을 누르고 있는 동안 발생 |
| onkeydown | 키보드 버튼을 누른 순간 발생 |
| onkeyup | 키보드 버튼을 눌렀다가 뗀 순간 발생 |
| 포커스 이벤트 | onfocus | 요소에 포커스가 되면 발생 |
| onblur | 요소가 포커스를 잃으면 발생 |
| 폼 이벤트 | onsubmit | 폼이 전송될 때 발생 |
| 리소스 이벤트 | onload | 웹 브라우저의 리소스 로드가 끝나면 발생 |
9. 이벤트 객체와 this
- 이벤트 객체는 이벤트 함수가 호출될 때 내부적으로 전달되는 이벤트 정보가 담긴 객체 의미
- 이벤트 객체의 preventDefault() 메서드를 사용하면 태그에 적용된 기본 이벤트 취소 가능
- 이벤트 함수 내부에서 this 키워드를 참조하면 이벤트를 발생시킨 요소 노드 가리킴. 단 화살표 함수일때는 이벤트 객체의 target 속성으로 참조해야 함
활용 예시
로그인 버튼 클릭 시 확인해야 하는 조건
- 폼 전송 이벤트를 취소하세요.
- 아이디가 입력됐는지 확인하고, 입력되지 않았으면 “아이디를 입력해 주세요.”라는 경고창을 표시하고 포커스를 이동합니다.
- 아이디 값에 @ 기호가 없으면 “아이디는 이메일 형식으로 입력해 주세요.”라는 경고창을 표시하고 포커스를 이동합니다.
- 비밀번호가 입력됐는지 확인하고, 입력되지 않았으면 “비밀번호를 입력해 주세요.”라는 경고창을 표시하고 포커스를 이동합니다.
- 비밀번호 길이가 4자리 이하일 경우 “비밀번호는 5자리 이상 입력해 주세요.”라는 경고창을 표시하고 포커스를 이동합니다.
- 모든 검증이 끝나면 폼을 전송해 주세요.
<body>
<form action="#">
<fieldset>
<legend>로그인</legend>
<button type="button">
Log in with Google
</button>
</fieldset>
<p>or</p>
<fieldset>
<legend>일반 로그인</legend>
<label for="username">
<input type="text" id="username" name="username" placeholder="Username">
</label>
<label for="password">
<input type="password" id="password" name="password" placeholder="Password">
</label>
<button type="submit">
LOGIN
</button>
</fieldset>
<a href="#">Forgot your password?</a>
</form>
<script>
document.forms[0].addEventListener("submit", function(event){
event.preventDefault();
const idEl = document.forms[0].username;
const idVal = idEl.value.trim();
const pwEl = document.forms[0].password;
const pwVal = pwEl.value.trim();
if(idVal === ""){
alert("아이디를 입력해주세요!");
idEl.focus();
return;
}
if(idVal.indexOf('@') === -1){
alert("아이디는 이메일 형식으로 작성해주세요!");
idEl.focus();
return;
}
if(pwVal === ""){
alert("비밀번호를 입력해주세요!");
pwEl.focus();
return;
}
if(pwVal.trim().length <= 4){
alert("비밀번호는 5자리 이상 입력해주세요.");
pwEl.focus();
return;
}
this.submit();
});
</script>
</body>
