HTML 문서의 요소 다루기

3.8) HTML 문서의 요소 다루기

3.5절의 예제를 테스트해보았다면 이미 느꼈겠지만, 경고 창이 여러 개 뜨는 데 이게 성가신 일이 아닐 수 없다. 여기서는 이 문제를 개선해보자.

HTML은 요소로 이루어진 문서라고 설명한 바 있다. HTML의 유용한 요소로 textarea 요소가 있다. 다음은textarea 요소를 HTML 문서에 추가한 코드다.

textarea.htm

<html>

<body>

<textarea>hello, world!</textarea>

</body>

</html>

실행 결과

textarea 요소는 이름 그대로 텍스트를 입력하는 공간이다. 태그 사이에 “hello, world!” 문자열을 입력했더니 요소 안에 내용이 들어갔다. 앞으로 우리가 출력을 확인할 때는 바로 이 textarea 요소의 내용에 문자열을 추가하는 식으로 출력 결과를 확인할 것이다. 그러면 더 이상 경고 창을 보지 않아도 되므로 프로그래밍하기 한결 수월해질 것이다.

textarea 요소의 내용을 변경하려면, 먼저 접근해야 한다. 어떻게 textarea 요소에 접근할까? textarea 요소에 이름을 붙이고, HTML 문서에서 해당 이름을 가진 요소를 불러오는 함수를 호출하면 되지 않을까? 이렇게 생각했다면 정답이다. 그러면 먼저 textarea 요소에 이름을 붙이는 방법을 알아보자.

textarea와 같은 요소는 내부적으로 값을 여러 개 갖는다. 요소의 너비, 요소의 높이, 요소의 값과 같은 식으로 말이다. 요소에 대한 이러한 내부적인 값을 요소의 속성(property)이라고 한다. 그러므로 우리는 textarea 요소의 이름이 되는 속성을 우리가 원하는 값으로 설정하면 된다. 방법은 다음과 같다.

textarea_id.htm

<html>

<body>

<textarea id='mytextarea'>hello, world!</textarea>

</body>

</html>

textarea에 id='mytextarea'라는 구문이 추가되었다. 이는 id 속성을 ‘mytextarea'로 설정하겠다는 뜻이다. 요소에 대해 id는 유일하며, 우리는 id 요소의 값을 통해 요소를 획득할 수 있다. 그럼 이제 요소를 직접 얻어보자. 이는 다음의 코드에서 구현한다.

textarea_getElemById.htm

<html>

<body>

// document.getElementById 함수를 호출합니다.

var myElem = document.getElementById('mytextarea');

// value 속성을 good bye!로 변경합니다.

myElem.value = 'good bye!';

</script>

</body>

</html>

실행 결과

document라는 녀석에 점(.)을 이용하여 멤버 함수를 호출하는 것처럼 getElementById라는 함수를 호출했다. document는 HTML 문서에 기본적으로 정의된 객체라고 생각하면 된다. 이렇게 기본적으로 정의된 객체는document 외에도 window와 같이 여러 가지가 있는데, 이에 대해서는 나중에 다루겠다.

getElementById 메서드를 호출하여 요소를 획득하고 myElem에 저장한다. 그러면 myElem은 body 영역에 정의한 textarea 요소를 가리키는 상태가 된다. 이때 myElem의 속성인 value의 값을 변경하면 우리가 원하는 대로 문장이 변경되는 것을 볼 수 있다! 이렇게 하면 myElem의 value 속성에 문자열을 대입하는 것으로 textarea가 출력 창의 역할을 대신하게 할 수 있다.

textarea로 출력 창을 돌렸지만 매번 myElem을 얻어서 value를 설정하려니 불편하고, textarea 요소도 크기가 너무 작다. 좀 더 쓸 만하게 이걸 수정해보자. 일단 답답하니 크기부터 늘이자. 요소의 내부 값을 변경하는 것이니 이것도 속성을 변경해야 한다. 요소의 모양을 설정할 때는 style이라는 속성의 값을 설정하면 된다.

textarea_style.htm

<html>

<body>

// mytextarea 요소를 가져옵니다.

var myElem = document.getElementById('mytextarea');

// 얻은 요소의 style 속성의 크기를 변경합니다.

myElem.style.width = 800;

myElem.style.height = 200;

</script>

</body>

</html>

실행 결과

이와 같이 요소의 크기를 변경할 수 있다. 참고로 화면에 꽉 차게 만들려면 width에 ‘100%’, height에도 '100%' 값을 넣어주면 된다.

그럼 이제 여기에 문자열을 넣는 것을 생각하자. 물론 myElem.value 속성에 직접 접근하여 값을 수정하는 것도 방법이지만, 여기서는 Log라는 함수를 만들어서 이 함수가 그 일을 하도록 하겠다. 다시 말해 Log("Hello, world!")와 같이 호출하면 출력이 나온다.

다음은 이를 구현하는 코드이다.

textarea_log.htm

<html>

<body>

var myElem = document.getElementById('mytextarea');

myElem.style.width = 800;

myElem.style.height = 200;

// 화면에 s가 가리키는 문자열을 출력하는 Log 함수를 정의합니다.

function Log(s) {

var myElem = document.getElementById('mytextarea');

myElem.value += (s + '\n'); // 자동으로 개행이 되게 만듭니다.

}

Log("Hello, world!");

Log("Nice to meet you!");

</script>

</body>

</html>

그리고 앞으로는 구현의 편의를 위해 기본적으로 HTML 문서에 다음이 작성되어있다고 가정한다.

main.htm

<html>

<head>

/**

프로그램의 주 진입점입니다.

function main() {

Log("Hello, world!");

}

/**

s가 가리키는 문자열을 HandyLogStream 요소에 출력합니다.

@param {String} s

function Log(s) {

var logObject = document.getElementById('HandyLogStream');

logObject.value += (s + '\n');

}

/**

main 메서드를 호출하기 전에 환경을 준비합니다.

function init() {

var logObject = document.getElementById('HandyLogStream');

logObject.style.width = 800;

logObject.style.height = 200;

}

</script>

</head>

<body>

init();

main();

</script>

</body>

</html>

title을 넣을 때 사용하던 head 요소가 추가되었고, 그 내부에 script 요소가 새롭게 생겼다. 그리고 이 영역에main, Log, init이라는 메서드 세 개가 정의되었고, body에는 textarea 요소를 정의한 다음 head에 정의한 init, main을 차례대로 호출하고 있다. 이 프로그램은 처음 보기엔 당황스럽지만 이전에 배운 지식을 토대로 뜯어보면 전혀 어려운 코드가 아니다. 앞으로는 main 메서드의 내부를 수정하여 출력을 textarea 요소에 뿌리는 식으로 출력을 확인할 것이다. 이와 같이 HTML 문서의 중요한 요소 중 하나인 textarea를 다루는 방법을 알아보고, 프로젝트를 보다 편리하게 개선하였다.

앞으로 학습을 진행할 때는 이 코드를 복사하고 붙여 넣은 다음 head 요소의 script를 수정하는 식으로 진행하겠다. 따라서 이 문서에서 코드 영역을 설명할 때도 기본적으로 <html.head.script> 내부에 코드를 작성하는 것으로 이해하면 된다.

댓글