[JavaScript] 이벤트와 DOM

 

DOM - Document Object Model

: 문서 객체 모델

: HTML, XML 문서의 구조화된 표현을 제공하는 표준

+) 문서 객체란 html 문서의 태그들이 자바스크립트가 이용할 수 있는 객체로 만들어진 것

 

: 자바스크립트는 DOM을 통해 HTML에 접근 가능

: 자바스크립트가 DOM 구조에 접근하여 문서 구조, 스타일, 내용 등 변경 가능

: DOM 이용하여 HTML 태그, 속성, 스타일 등 추가 /  삭제 / 변경

 

document node

: document 객체

: DOM 트리 접근하기 위한 최상위 노드

: 모든 DOM 트리에 접근하기 위한 시작점

 

 

element node

: HTML 구성 요소(태그)를 의미

: 문서 내 태그들은 모두 element node

 

 

attribute node

: 태그들의 속성을 객체화한 노드

: 특정 태그의 속성에 접근할 때 사용된다.

 

 

text node

: 태그의 텍스트를 객체화한 노드

: 자식 노드를 가질 수 없다.

: DOM 트리의 최종단 노드

 

HTML DOM 요소 접근 방법

getElement(s)By

document.getElementById("idName");
document.getElementsByClassName("className");
document.getElementsByTagName("tagName");
document.getElementsByName("nameAttribute");

getElementById: id를 가져온다. 하나의 값을 반환할 때 사용

getElementsByClassName(): 많은 element를 가져올 때 사용. array를 반환

getElementsByTagName(): array 반환

 

 

querySelector

: element를 CSS 방식으로 검색할 수 있다.

: 만약 동일한 class 가 있거나 특정 태그가 여러개라면 첫번째 element만 반환한다.

document.querySelector("h1:first-child");
document.querySelector(".hello h1");	// id = "hello" 안에 있는 h1을 가져와라

// 아래 두개는 동일
document.querySelector("#hello");
document.getElementById("hello");

 

querySelectorAll

: 동일한 조건에 있는 것들을 모두 가져온다.

: array 형태로 반환

 

 

< HTML 요소 생성, 제거, 추가하는 방법 >

createElement

: HTML DOM element를 동적으로 생성하기 위해 사용

: 특정 태그 등을 생성한다.

document.createElement("h1");

<h1></h1> 태그를 생성한다.

 

removeChild

부모객체.removeChild(자식객체);
문서객체.parentNode.removeChild(문서객체);

 

appendChild

: 문서 객체를 추가할 때 사용

: 부모 객체 아래에 자식 객체를 추가

document.appendChild(자식객체);

const title = document.createElement("h1");

document.body.appendChild(title);

 

 

 

< HTML 요소의 속성 핸들링 >

: HTML요소를 선택하여 해당 요소의 속성과 텍스트 노드에 접근 가능

: HTML 요소의 특정 태그의 속성값을 변경하면 원래 HTML 코드가 바뀌는 것이 아닌 동적으로 내용만 변경되고 브라우저에 반영

element.setAttribute('attribute', 'value');
element.getAttribute('attribute', 'value');
element.removeAttribute('attribute');

const el = document.getElementById("title-img");
el.setAttribute('src', 'another.jpg');

 

 

< 텍스트 노드 변경 >

innerText 혹은 innerHTML

: 해당 태그의 텍스트 노드의 값을 변경하기 위해 사용

element.innerHTML = '<태그이름>text</태그이름>';
element.innerText = 'text';

const title = document.getElementById("title");
title.innerHTML = "New Title";

innerHTML	태그에 다른 HTML 태그와 자식 노드를 포함한 텍스트를 처리할 때 사용
innerText	단순한 텍스트만을 처리할 때 사용

※ 가능하면 innerHTML 사용을 권장

 

 

 

이벤트란?

: 버튼 클릭, input 값 변화, 로딩되었을 때 등 특정 요소에 반응할 수 있게 하는 것

 

addEventListener

: 이벤트가 발생하면 호출한 function을 전달해준다.

addEventListener("event", function);

※ function에 ()기호를 사용하면 안된다.

이벤트 발생 시 함수가 실행해야 하는데 ()를 사용하면 이벤트 발생 전에 실행하게 된다.

const title = document.querySelector("h1");

function changeColor(){
	title.style.color = "blue";
}

title.addEventListener("click", changeColor);
title.onClick = changeColor;

title.addEventListener("click", changeColor)와 title.onClick = changeColor는 동일하나 addEveneListener를 선호

removeListener를 이용해서 eventListener를 제거할 수 있기 때문에

 

이벤트 처리

: 자바스크립트는 이벤트에 반응하여 특정 동작을 수행할 수 있다. 이때 이벤트는 사용자의 동작, 프로그램에서 발생하는 특정한 혹은 변경된 상황을 말한다.

: JS는 HTML의 입력 양식(input 등)으로부터 사용자의 입력 값을 가져올 수 있다.

 

 

< 이벤트 종류 >

click	클릭 발생하였을 때
keydown	키를 눌렀을 때
load	문서의 로드가 완료되었을 때
resize	윈도우 크기가 변경되었을 때
mouseover	마우스가 특정 객체 위로 올려졌을 때
mousedown	마우스를 클릭 했을 때
mouseout	마우스가 특정 객체 밖으로 나갔을 때
mousemove	마우스가 움직였을 때
mosueup	마우스 버튼을 떼었을 때
select	option 태그 등을 통해 선택되었을 때
submit	입력 양식이 제출 요청 되었을 때