[JavaScript] DOM의 기본과 클라이언트 측 JavaScript 의 기본 지식

 

DOM

외부 서비스에서 어떤 입력을 받아 이를 처리한 결과를 페이지에 반영시킨다는 흐름이 자바스크립트의 흐름이다. 결과를 페이지에 반영시킨다는 것은 HTML을 JavaScript에서 편집한다는 뜻이다.

 

DOM 은 마크업 언어로 작성된 문서에 액세스하기 위한 표준적인 구조로 JavaScript에 한정하지 않고 현재 주로 사용되는 언어의 대부분에서 지원하고 있다.

 

DOM 은 문서를 문서 트리로서 취급한다. DOM 이라는 이름처럼 문서에 포함되는 요소나 속성, 텍스트를 각각 객체로 보기 때문에 객체의 집합(계층 관계)이 문서라고 생각한다.

 

문서를 구성하는 요소나 속성, 텍스트 등의 객체를 노드라고 부른다. 종류에 따라 요소 노드, 속성 노드, 텍스트 노드 등으로 부른다.

 

DOM 은 노드를 추출, 추가, 치환, 삭제하기 위한 범용적인 수단을 제공하는 API라고 할 수 있다. 각각의 노드는 트리상에서의 상하 관계에 따라 루트 노드, 부모 노드, 자식노드, 형제노드로 불리기도 한다.

 

 

JavaScript 사전 지식

자바스크립트에서 가장 먼저 파악해야할 부분은 요소 노드 취득, 문서 트리 간의 왕래, 이벤트 구동 모델이다. 

 

 

 요소 노드 취득하기

 

 

ID값을 키값으로 노드 취득하기(getElementById 메소드)

 

취득하고 싶은 요소가 명확한 경우 getElementById 메소드를 이용한 방법이 가장 간단하다.

<span id="result">사랑해</span>

 

자바스크립트에서 ID 값에 접근하기

const result = document.getElementById('result');
result.textContent = "Hello";

 

 

태그명으로 키값으로 노드 취득하기(getElementsByTagName 메소드)

 

태그명으로 값을 가져오는 것은 복수의 요속 서로 일치할 가능성이 있기 때문에 getElementsByTagName 메소드의 반환값은 요소의 집합이 된다. 인수 name 부분에 *를 지정하면 모든 요소를 겁색할 수 있게 된다.

 

예시는 <a>태그를 모두 가져오는 예시이다. length 멤버로 가져온 태그의 개수를 알 수 있고 item(i) 벱어로 노드를 취득할 수 있다.

var alist = document.getElementsByTagName('a');

for(var i=0; i < alist.length; i++) {
    console.log(alist.item(i).href);
    // 대괄호로도 구분 가능하다
    console.log(alist[i].href);
}

 

 

name 속성을 키로 요소 취득하기(getElementsByName 메소드)

 

name 속성을 키로 요소를 취득하는 메소드는 getElemetsByName 메소드이다. 일반적으로 <input> 태그나 <select> 태그와 같은 폼 요소에서의 액세스에서 이용한다. 

 

예시)

<input type="text" size="10" id="time" name="time-ex"/>

var current = new Date();
var nam = document.getElementsByName('time-ex');
nam[0].value = current.toLocaleTimeString();

 

 

class 속성을 키로 요소 취득하기(getElementsByClassName 메소드)

 

class 속성을 키로 하여 요소에 접근할 수 있다.

 

예시)

<ul>
    <li><p class="ex">Hello</p></li>
    <li><p class="ex strong">Hello2</p></li>
    <li><p class="ex">Hello3</p></li>
</ul>

var alist = document.getElementsByClassName('ex');
// var alist = document.getElementsByClassName('ex strong');

for(var i=0; i < alist.length; i++) {
    console.log(alist.item(i).textContent);
    // 대괄호로도 구분 가능하다
    console.log(alist[i].textContent);
}

 

 

셀렉터 식에 일치하는 요소 취득하기(querySelector / querySelectorAll 메소드

 

특정 이름/속성값을 키로 HTML 요소를 검색하는 것보다 복잡한 조건으로 검색할 수 있다. 단, 속도가 느리다. querySelector 메소드는 조건에 맞는 처음의 하나 요소를 가져오고 querySelectorAll 메소드는 전부다 가져온다.

 

사용할 수 있는 셀렉터 식

셀렉터	개요	예
*	모든 요소 취득	*
#id	지정한 ID의 요소 취득	#main
.class	지정한 클래스명의 요소 취득	.external
elem	지정한 태그명 요소 취득	li
select1, select2, selectX	해당하는 셀렉터에 일치하는 요소 모두 취득	#main, li
parent > child	parent 요소의 자식 요소 child 취득	#main > div
ancestor descendant	ancestor 요소의 자식 요소 descendant 모두 취득	#list li
[attr]	지정한 속성을 가진 요소 취득	input[type]
[attr = value]	속성이 value 값과 동등한 요소 취득	input[type="button"]

 

 

예시)

var list = document.querySelectorAll('#list p');
var only = document.querySelector('.strong');

for(var i=0; i < list.length; i++) {
    console.log(list.item(i).textContent);
    // 대괄호로도 구분 가능하다
    console.log(list[i].textContent);
}

console.log(only.textContent);

 

 

 문서 트리 사이 오가기 - 노드 워킹

문서 전체에서 원하는 요소를 검색하는 것은 낭비가 심하기 때문에 성능 저하의 원인이 될 수 있다. 따라서 DOM 에서는 노드를 기점으로 상대적인 위치 관계에서 노드를 검색할 수도 있다. 트리 모양이 된 노드 사이를 가지를 따라 이동하는 모습 때문에 노드 워킹이라고도 불린다.

기본 예시의 다음 코드는 다음과 같다. childNodes 로 자식 노드들을 가져온다.

/**
    <ul id="list">
        <li>Hello</li>
        <li>Hello2</li>
        <li>Hello3</li>
    </ul>
 */

// <ul id="list"></ul> 취득
var list = document.getElementById("list");

// list 의 자식 노드 취득득
var listOption = list.childNodes;

for(var i=0; i < listOption.length; i++) {
    var option = listOption[i];
    // 자식 요소가 노드인 경우에만 값을 표시한다.
    if(option.nodeType === 1) {
        console.log(option.textContent);
    }
}

 

개행이나 공백은 텍스트 노드로 간주된다. 따라서 childNodes 로 가져온 노드들 중에는 텍스트 노드와 요소 노드가 섞여 취득할 가능성이 있다. 요소 노드만 접근하고 싶은 경우에는 가져온 노드가 요소 노드인지 확인할 필요가 있다.

 

노드의 종류

반환값	개요	반환값	개요
1	요소 노드	6	실제 선언 노드
2	속성  노드	7	처리 명령 노드
3	텍스트  노드	8	주석 노드
4	CDATA 섹션	9	문서 노드
5	실제 참조 노드	10	문서형 선언 노드
11	문서의 단편	12	가변 선언 노드

 

 

예시) firstChild 와 nextSibling 프러퍼티

// <ul id="list"></ul> 취득
var list = document.getElementById("list");

// list 의 자식 노드 취득득
var child = list.firstChild;

while(child) {
    if(child.nodeType === 1) {
        console.log(child.textContent);
    }

    // 다음의 자식 노드를 취득
    child = child.nextSibling;
}

 

 

예시) firstElementChild 와 nextElementSibling 프로퍼티

firstElementChild 프로퍼티는 밑의 자식 요소를 반환하고 nextElementSibling 프로퍼티는 다음 형제 요소를 반환한다. 반환값이 Element(요소)이기 대문에 nodeType 판정 과정이 불필요하다.

// <ul id="list"></ul> 취득
var list = document.getElementById("list");

// list 의 자식 노드 취득득
var child = list.firstElementChild;

while(child) {
    console.log(child.textContent);
    // 다음의 자식 노드를 취득
    child = child.nextElementSibling;
}

 

 

 이벤트 트리거로 한 처리 실행하기 - 이벤트 구동 모델

브라우저로 표시되는 페이지상에서는 다양한 이벤트가 발생한다. 버튼이 클릭되거나 마우스 포인터가 문자열 위에 있거나 텍스트 박스의 내용이 변경되거나 등이 있다. 클라이언트 측 JavaScript 에서는 해당 이벤트에 따라 실행하는 코드를 작성하는 것이 특징이다. 이 프로그래밍 모델을 이벤트 드리븐 모델(이벤트 구동 모델)이라고 부른다.

 

1. 태그 내의 속성으로 선언하기(이벤트 핸들러)

HTML 코드 내에서 이벤트 핸들러를 사용한다. 가장 간단한 이벤트 트리거 방법이다.

<태그명 on이벤트명="Javascript의 코드">

 

예시)

<input type="button" value="다이얼로그" onclick="javascript:window.alert('Hello')">

 

예시)

function btn_click() {
    console.log('버튼 클릭됨');
    window.alert('버튼 클릭됨');
}

<input type="button" value="다이얼로그" onclick="btn_click()">

 

 

2. 요소 객체의 프로퍼티로 선언하기(이벤트 핸들러)

개별 요소의 이벤트 핸들러는 onload 이벤트 핸들러 아래에 기술해야한다. 

// 페이지 로드가 되었을 때 실행한다.
window.onload = function() {
    document.getElementById("alert").onclick = function() {
        window.alert('Hello!');
    }
}

 

+ 페이지 로드 전에 getElementById 메소드를 호출할 경우 원하는 요소를 가져올 수 없다.

 

3. addEventListener 메소드로 선언하기(이벤트 리스너)

이벤트 리스너는 동일 요소의 동일 이벤트에 관해 복수로 연관시킬 수 있는 이벤트 핸들러이다.

// 페이지 로드시 실행되는 이벤트 리스너를 등록한다.
document.addEventListener('DOMContentLoaded', function() {
    // 버튼 클릭시 실행되는 이벤트 리스너 등록하기
    document.getElementById("alert").addEventListener('click', function() {
        window.alert('버튼 클릭');
    }, false);
}, false);

 

+ onload 이벤트 핸들러와 DOMContentLoaded 이벤트 리스너의 차이점

onload 이벤트 핸들러는 콘텐츠 본체와 모든 이미지가 로드된 후에 실행되고 DOMContentLoaded 이벤트 리스너는 콘텐츠 본체가 로드된 후에 실행되지만 이미지의 로드를 기다리지 않는다. 대개의 처리는 이미지의 로드를 기다릴 필요가 없으므로 DOMContentLoaded 이벤트 리스너를 이용하여 스크립트의 시작 타밍을 앞당길 수 있다.(기본)