[SW 코딩 훈련] 핵심 JavaScript 기초 04. DOM과 이벤트

DOM(문서 객체 모델, Document Object Model)

객체 지향 모델로써 구조화된 문서를 표현하는 형식이다. 특히 웹페이지를 기반으로 한 HTML을 구조화하기 좋다.

DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스이다. JavaScript는 이 DOM을 다룰 수 있다. DOM은 문서의 구조화된 표현(structured representation)을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 한다.

이 중에서 HTML DOM은 HTML 문서를 조작하고 접근하는 표준화된 방법이다. JavaScript는 궁극적으로 HTML 문서에서 특정 요소를 조작하거나 접근해야한다. 하지만 기본적으로는 HTML의 어디에 무엇이 있는지 모른다. 그래서 신원미상의 HTML이 있을 때 parsing(정리)을 한다. 생성된 DOM을 바탕으로 JavaScript는 정보를 가져오거나 바꾸거나 할 수 있다.

 

Document

Doucment 객체는 웹 페이지를 의미한다. JavaScript는 웹 브라우저(크롬, IE)에 있다. JavaScript가 보고있는 웹페이지를 Document라는 이름으로 지칭한다. 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 한다. 하나의 약속이기 때문에 알고 있어야 한다.

Document 메소드는 HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공한다.

• HTML 요소의 선택
• HTML 요소의 생성
• HTML 이벤트 핸들러 추가
• HTML 객체의 선택

HTML 요소의 선택

새로운 HTML 요소를 선택하기 위해 제공하는 메소드

여기서 선택자는 CSS의 그것이 맞다(tagname, ID, Class).

HTML 요소의 생성

createElement : 어떤 요소를 추가할지 tagname, ID, Class 모두 명시할 수 있다.

write : 써져 있는 부분 다음부터 계속 이어서 출력한다.

HTML 이벤트 핸들러 추가

이벤트는 컴퓨터에 작용하는 모든 행동들이다. 클릭, 드래그, 키보드 입력 모두 이벤트이다. 이 이벤트가 일어났을 때 할 일을 매칭해주는 것이 이벤트 핸들러라고 한다.

DOM의 트리 구조 (HTML → DOM)

트리는 노드와 엣지로 구성돼있다. 구조화를 시키는 이유는 JavaScript에서 어떤 정보가 어디에 있는지 편하게 알기 위해서다. 문서에서 노드 사이에 특정 상하 구조가 있었다. 이 트리구조를 통해 그 구조를 직관적으로 볼 수 있다.

 

JavaScript와 DOM

DOM 요소의 선택

HTML 문서가 DOM이라는 하나의 큰 트리로 구축되어 있었는데, 노드 하나 하나를 요소라고 한다. 아 요소를 어떻게 가져올까?

getElementsByTagName은 함께 제공되는 인자의 태그 네임 요소를 가지고 온다. Element"S"로 끝나는만큼 해당 모든 객체를 다 가지고 온다.

Id는 반드시 HTML 문서 상의 특정 태그 오직 하나와 결합하는 속성이 있기 때문에, getElementById는 그 요소를 하나 가지고 온다.

getElementsByClassName은 해당 클래스인 모든 요소를 선택한다. getElementsByName도 마찬가지.

DOM 요소의 스타일 변경

DOM 요소에서도 스타일(CSS)을 변경할 수 있다.

어떤 DOM 요소에 적용할지 고르기 위해 getElement 시리즈를 활용하면 된다.

예시에서는 .color로 프로퍼티에 접근해 속성을 변경했다. 실제로 바뀐다. 왜냐면 웹 브라우저에서는 DOM을 바탕으로 이 화면을 보여주기 때문이다.

DOM 요소의 내용 변경

DOM이 유능할려면 이미 있는 요소의 내용을 변경할 수 있어야 한다.

예시는 요소 안의 innerHTML 프로퍼티를 초기화하여 바꿔줬다.

핵심은 document 라는 객체를 활용하는 것이다!

 

Node 객체

HTML DOM에서 정보를 저장하는 계층적 단위를 노드(Node)라고 한다. 노드 트리는 노드들의 집합으로, 노드 간의 관계를 나타낸다. JavaScript에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있다.

노드 트리의 모든 노드는 서로 계층적 관계를 맺고 있다.

DOM은 HTML로부터 왔기 때문에 노드끼리는 계층적 관계를 맺고 있다.

노드는 실질적으로 여러 종류가 있다.

문서 노드(document node)

HTML 문서 전체를 나타내는 노드.

요소 노드(element node)

모든 HTML 요소는 요소 노드로, 속성 노드를 가질 수 있는 유일한 노드다(한 태그에 style, href의 속성이 있던 것처럼).

주석 노드(comment node)

HTML 문서의 모든 주석은 주석 노드다.

속성 노드(attribute node)

모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가진다. 왜냐면 속성 노드에 정보를 입력해서 어떤 요소를 구체화 했기 때문이다. 하지만 해당 요소 노드의 자식 노드(child node)에는 포함되지 않는다.

텍스트 노드(text node)

HTML 문서의 모든 텍스트는 텍스트 노드.

요소를 구분짓는 것보다도, DOM 상에서는 여러 노드로 이루어져 있고 그 노드에서 정보를 얻어낼 수 있음을 기억해야 한다.

 

노드의 값

노드의 대한 정보는 nodeName (이름), nodeValue (값), nodeType (타입) 과 같은 프로퍼티를 통해 접근할 수 있다.

대표적인 HTML 노드별 nodeType 프로퍼티 값은 다음과 같다.

요소 노드:1 | 속성 노드: 2 | 텍스트 노드: 3 | 주석 노드: 8 | 문서 노드: 9

 

이벤트(Event)

웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 말한다. JavaScript는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다. 마우스 클릭은 아주 흔한 이벤트라고 볼 수 있다.

이벤트 타입

발생한 이밴트의 종류를 말한다. (폼, 키보드, 마우스, HTML DOM, Window 객체 등)

예시에서는 <p> 태그에 onclick이라는 속성을 부여했다. 클릭했을 때 변화는 다음과 같다.

1. <p> 태그 눌러 onclick 이벤트 발생

2. element가 있을 때 changeText(this) 실행

3. innerHTML에서 "여길 클릭하세요!" 와 "내용이 바뀌었습니다!"가 바뀐다.

여기서 (this)는 JavaScript의 또다른 약속이다. 자기자신을 가리킨다는 뜻이다. 예시에서는 곧 자기자신인 <p> 태그를 의미한다. 다른 태그에 (this)가 있으면 그 각각의 요소가 곧 (this)가 된다.

이벤트 핸들러

어떤 이벤트가 발생했을 때 그 처리를 담당하는 함수를 말한다. 지정된 이벤트가 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 핸들러를 실행시킨다. 

예시에서 window.onload 함수는 윈도우 창이 떴을 때를 의미한다. 이 때 text라는 요소를 가져와서, innterHTML을 통해 다른 문장으로 치환한다. 그래서 onload 함수와 실제로 이벤트가 onload가 발생했을 때 하는 변경들의 모음을 이벤트 핸들러가 안에 있는 코드로 가지고 있음을 알 수 있다.

대상객체.addEventListener(이벤트명, 실행할이벤트핸들러, 이벤트전파방식)

선택한 객체에 이벤트 핸들러를 등록하는 법은 addEventListener를 사용하면 된다.

---

var target = document.getElementById("btn");

function changeButtonOnclick() {
  # 버튼 클릭 시 색상이 변경될 수 있도록 changeColor 클래스를 추가
  target.classList.add("changeColor");
  # 버튼 클릭 시 innerText 메소드를 사용해 버튼의 타이틀이
  # '버튼 클릭 성공!'으로 변경될 수 있도록 작성
  target.innerText = "버튼 클릭 성공!";
}

# 버튼 클릭 시 위의함수 changeButtonOnclick가 실행될 수 있도록 작성
target.addEventListener("click", changeButtonOnclick)