2주차 (5~7장)

5장  DOM

5-1. DOM (Document Object Model. 문서 객체 모델)

자바스크립트와 같은 프로그래밍 언어로 웹 문서에 접근하고 제어할 수 있도록 웹 문서를 체계적으로 정리하는 방법.

• DOM에서는 웹 문서와 웹 문서를 구성하는 텍스트나 이미지 등 모든 요소도 하나의 객체(객체이므로 프로퍼티와 메서드를 가짐)로 정의함.
• 부모 요소와 자식 또는 형제 요소 관계(계층)
• DOM트리 구조 : 트리의 시작 부분(루트 노드), 트리의 갈라져 나가는 분기점(노드)

5-2. 웹 요소에 접근하기

• CSS 선택자 (웹 요소에 접근할 때 qauerySelector()함수나 qauerySelectorAll() 함수를 통해 사용)

document.querySelector(선택자) //한가지 요소를 가져오는 메서드

document.querySelectorAll(선택자) //모든 요소를 가져오는 메서드

:  id선택자, class선택자, 하위 선택자, 자식 선택자 등

 

• 웹 요소 내용 가져오기

document.qeerySelector('#요소').innerText 
//웹 브라우저 창에 보이는 내용만 가져옴(숨겨진 내용x, 공백 1칸) 

document.qeerySelector('#요소').innerHTML 
//소스에 적혀있는 대로 태그와 내용 모두 가져옴.(\\n 포함) 

document.qeerySelector('#요소').textContent 
//요소의 내용을 가져오되, 소스에 있는 대로 가져옴.(숨겨진 내용o, 공백 그대로, \\n포함)

• 웹 요소 내용 수정하기

웹 요소.innerText = 내용
웹 요소.innerHTML = 내용
웹 요소.textContent = 내용

 

5-4. 폼(format)

웹 문서에서 사용자가 정보를 입력할 수 있게 만들어 놓은 웹 요소.

 

6장  이벤트와 이벤트 처리기

6-1. 이벤트(Event)

: 웹 문서 영영 내에서 웹 브라우저나 사용자가 실행하는 어떤 동작.

문서 로딩 이벤트	문서 로딩, 스크롤 시
마우스 이벤트	버튼클릭, 휠버튼 조작시
키보드 이벤트	키보드 특정 키 조작시
폼 이벤트	폼 요소에 내용을 입력하면서 발생

 

6-2. 이벤트 처리기 또는 이벤트 핸들러(event handler) : 이벤트 발생과 그에 따른 연결 동작.

• 이벤트가 발생한 HTML 태그 또는 웹 요소에 함수 연결해 처리
• 이벤트 리스너(event listener)로 처리

기본형태)
요소.addEventListener(이벤트, 함수, 캡처 여부);

//이벤트 : 이벤트 유형. 이벤트 이름을 그대로 사용.
//함수 : 이벤트가 발생했을 때 실행할 함수.
//캡처 여부(선택사항) : true면 이벤트 캡처링 진행함, false면 캡처링 진행안함. - false가 기본값.

 

6-3. event 객체

• event 객체에서 사용할 수 있는 메서드는 preventDefault(기본 동작 취소) 하나뿐.
• event 프로퍼티(이벤트 객체에 담긴 정보 : 이벤트 발생 위치 좌표, 발생 시간, 발생한 이벤트 이름 등

 

 

6-4. 이벤트 전파(event propagation)

이벤트 버블링 (기본적)	아래에서 위로(자식 요소에서 부모요소로) 이벤트가 전달되는 것.
이벤트 캡처링	위에서 아래로(부모 요소에서 자식요소로) 이벤트가 전달되는 것.

 

 

• event.target : 처음 이벤트가 발생한 대상을 가리킴.
• event.currentTarget : 이벤트가 전파되면서 현재 이벤트 처리기가 실행되는 대상을 가리킴.

 

 

7장  DOM트리와 노드 리스트

노드 : 트리의 갈라져 나가는 분기점

루트 노드 : 트리의 시작 부분

 

노드리스트 : 다양한 노드 정보를 저장한 것 (배열은 아님)

 

7-2. 새로운 노드 추가하기

1) createElement() 메서드 - 새로운 요소 노드 생성

 

2) createTextNode() 메서드 - 새로운 텍스트 노드 생성

    또는

    createAttribute() 메서드 - 새로운 속성 노드 생성 예)이미지 파일 경로 src

 

3) 노드를 연결

   3-1)

   appendChild() 메서드 - 새로운 요소 노드와 새로운 텍스트 노드를 연결

   또는

   setAttributeNode() 메서드 - 새로운 요소 노드와 새로운 속성 노드를 연결

 

3-2) 연결하고싶은 요소(body 요소)와 새로운 요소 노드를 연결하기

 

 

* insertBefore(새 노드, 기준 노드) 메서드 - 기존 노드의 앞에 새 요소 추가하기

 

 

7-3. 노드 삭제하기

remove() 메서드 : 노드 삭제

요소.remove()

 

parentNode 프로퍼티 : 현재 노드의 부모 노드를 찾아 접근.

노드.parentNode

 

removeChild() 메서드 : (부모 노드를 먼저 찾고) 자식 노드 삭제

부모노드.removeChild(자식 노드)

 

 

 

 

Q. 다음 코드 중 잘못된 부분을 수정하시오

button.addEventListener( "onclick", function() {
	document.body.style.backgroundColor = "green";
});

 

정답

onclick -> click