Java Script 3편 + 자바스크립트 문서 객체 조작

1편 - [Web Programming] - JAVA Script 1편 + 자바스크립트 기본

2편 - [Web Programming] - Java Script 2편 + 자바스크립트 문서 객체 모델

2편에서 만났던 문서 객체의 조작법에 대해 한번 알아보자 :)

우리는 문서 객체를 선택해서 글자, 스타일, 속성 등을 조작할 수 있다.

아래는 글자 조작 속성명이다.

설명 그대로 <h1> test </h1>의 글자를 document.body.textContent로 변경한다면

일반 글자 형식이므로 실행 결과 "<h1> test </h1>"가 그대로 뜰 것이다.

만약 innerHTML을 사용했다면 <h1> 태그가 인식되고 문자열 test만 뜬다.

이어서 스타일 조작이다.

var header = document.getElementById('header');

header.style.color='red';

스타일시트에서 사용하던 스타일 속성 이름 그대로 입력 하면 된다고 생각할 수 있다.

단, 자바스크립트는 특수기호 ' - '을 식별자에 사용할 수 없다.

따라서 ' - '으로 연결된 속성을 끊겨진 단어의 첫 글자를 대문자로 변경한다.

background-color → backgroundColor

속성 조작은 아래와 같은 메소드를 사용한다.

설명그대로 이다. 크게 어렵지 않으므로 넘어가겠다.

마지막으로 살펴볼 친구는 이벤트 이다.

어떠한 현상이 프로그램에게 영향을 미치는 것을 이벤트라고 한다.

대표적으로 우리가 아는 이벤트로 키보드나 마우스, 터치 등이 있을 것이다.

이전글에 잠깐 등장한 window.onload = function( ) { }; 코드 에서 onload를 이벤트 속성이라고 부른다.

그리고 on을 제외한 load를 이벤트 이름, 이벤트 타입이라고 부른다.

또 이벤트 속성에 넣는 함수를 우리는 이벤트 리스너, 이벤트 핸들러라고 부른다.

이러한 이벤트를 문서 객체에 연결하는 방법을 이벤트 모델이라 한다.

이벤트 모델은 DOM level 버전에 따라서 구분하며 각각 두 가지로 나뉜다.

인라인 이벤트 모델은 태그의 속성으로 onclick=" "을 사용하는 것이고

고전 이벤트 모델은 아이디를 스크립트에 가져와 이벤트를 연결하는 것이다.

레벨 0은 간편하고 쉽지만 이벤트를 중복해서 연결할 수 없고 

레벨 2는 중복 연결이 가능하지만 브라우저 종류에 따라연결하는 방법이 달라야한다는 문제점을 가지고 있다.

이는 후에 공부할 jQuery 라이브러리로 극복 할 수 있다고 한다 !

그리고 우리는 이벤트를 만들 수도 있어야하지만 제거해야 하는 경우도 생긴다.

예로 들면 a 태그를 클릭하면 href속성에 입력한 위치로 이동하고, form 태그로 생성한 제출 보튼을 클릭하면 

자동으로 입력 양식을 제출한다. 이를 기본 이벤트라고 한다.

하지만 만약 회원가입 페이지를 만들었을 때 확인 버튼을 누른다면 회원정보가 올바른지

확인 작업을 한 후 페이지가 이동해야 할 것이다. 이런 경우는 기본 이벤트를 제거해야한다.

고전 이벤트 모델에서 기본 이벤트를 제거하려면 이벤트 리스너의 반환값을 false로 해주면 된다. 😊