Programming Language/JavaScript

[JavaScript] DOM 객체로 HTML 요소의 속성 바꾸기

안녕하세요!!
오늘은 체크박스나 셀렉트 등 다양한 HTML 폼 요소에 접근하여 속성을 바꾸는 방법에 대해 알아보도록 하겠습니다!

실습 준비

실습 전 다음 소스를 복사 붙여넣기 하여 HTML 파일과 JS 파일을 준비 해주세요! (두 개의 파일은 편의상 같은 디렉토리에 위치시켜 주세요)

demo.html

<html lang="en">
<head>
    <title>폼 요소 접근하기</title>
    <script defer src="demo.js"></script>
    <style>
        body { display: flex; justify-content: center; align-items: center; }
        label { margin: 10px; }
        select { margin: 10px; }
    </style>
</head>
<body>
    <label class="field">이메일 주소 : </label>
    <input type="text" id="emailfield">
    <select id="emailselect">
    	<option value="none">== 이메일 선택 ==</option>
        <option value="naver">naver.com</option>
        <option value="gmail">gmail.com</option>
        <option value="daum">hanmail.net</option>
    </select>
    <input type="checkbox" id="emailcheck">
</body>
</html>

HTML 파일을 실행시키면 위와 같은 폼들이 보일 것입니다. 각각 코드로 구현된 부분은 다음과 같습니다.

label : 텍스트 (이메일 주소 :)
input type="text" : 텍스트 입력 필드
select : 콤보박스
option : 콤보박스의 옵션
input type="checkbox" : 체크박스

다음으로 js 소스를 준비하겠습니다.

const field = document.querySelector("#emailfield");   //텍스트 필드
const select = document.querySelector("#emailselect");      //콤보박스
const check = document.querySelector("#emailcheck");        //체크박스

querySelector() 로 텍스트 필드, 콤보 박스, 체크박스 요소에 접근하였습니다.

이제 본격적으로 폼 요소의 값을 다루어보겠습니다.

텍스트 필드의 값 다루기

텍스트 필드의 값 가져오기

우선, 텍스트 필드의 값을 가져오는 방법에 대해 알아보겠습니다.

다음은 포커스가 텍스트 필드에서 벗어났을 때, 텍스트 필드의 값을 콘솔로 출력하는 예제입니다.

field.addEventListener("blur", () => {
    console.log(field.value);
});

혹여나 blur와 addEventLister가 낯설게 느껴지신다면 https://hulrud.tistory.com/17 , https://hulrud.tistory.com/18 이 글들을 읽고 오세요

예제를 실행시키면 필드에 텍스트를 입력하고, 마우스를 필드가 아닌 다른 곳을 클릭하였을 때 콘솔에 필드의 값이 출력됩니다.

이처럼 요소.value 를 통해 값을 가져올 수 있습니다.

텍스트필드.value

텍스트 필드의 값 변경하기

다음으로는 필드에 다시 포커스 되었을 때 값을 초기화 하는 예제를 작성해보겠습니다.

field.addEventListener("focus", () => {
    field.value = "";
});

간단합니다. emailfeild.value 에 "" 을 대입하여 쉽게 값을 초기화 할 수 있습니다.

간단한 유효성 검사

value를 이용하여 다음 예제를 작성해봅시다.

이메일 검증은 필드의 값이 바뀌었을 때 실행됩니다.
필드의 값의 길이가 3이상 8이하가 아닐 시
- 필드 값을 초기화 하고, 필드에 포커스를 유지하세요.
- "아이디의 길이는 3~8자리 입니다" 알림창을 뜨게 하세요.
  - alert("알림 내용"); 을 통해 알림창을 띄울 수 있습니다.
  - value.length로 길이를 가져올 수 있습니다.
  - focus() 로 기존에 입력한 값이 지워진 자리에 새로운 값을 입력하도록 텍스트 필드에 커서를 올립니다.

꼭 혼자 힘으로 작성 해보세요!

field.addEventListener("change", () => {
    if (field.value.length < 3 || emailfield.value.length > 8){
        alert("아이디의 길이는 3~8자리 입니다");    //알림창
        field.value = ""; // 값 초기화    
        field.focus(); // 포커스 
    }
});

아주 간단한 예제이기 때문에 쉽게 하셨을거라 생각합니다

선택 목록 다루기

select 선택 목록(콤보박스)을 다루어보겠습니다.

value 가져오기

텍스트 필드 옆 선택 목록의 값이 바뀌면 콘솔에 그 값을 출력하는 예제를 작성해보겠습니다.

select.addEventListener("change", () => {
    console.log(select.value);
});

출력되긴 하지만, 옵션의 텍스트가 아닌 value 값이 출력됩니다. 그렇다고 해서 value 에 긴 텍스트를 입력하는건 좋은 방법이 아닙니다. 다음 예제들을 통해 다른 방법으로 접근해 봅시다.

innerText로 태그 안 텍스트 가져오기

value 값이 아닌 여는 태그와 닫는 태그 사이의 텍스트(naver.com) 을 가져오려면 innerText 속성을 이용합니다.

select.addEventListener("change", () => {
    console.log(select.innerText);
});

하지만 이 때 출력 결과는 select 안의 모든 innerText를 출력하게 됩니다.

이는 select의 option 4개가 배열처럼 저장되어 있기 때문입니다.

배열로 이루어진 option 살펴보기

console.log(select);

위 코드를 통해 select를 콘솔에 출력하면 다음과 같이 출력됩니다.

select 안 option들이 보이시죠?

console.log(select.options);

위 코드를 실행하여 HTMLOptionsCollection 을 살펴봅시다.

select의 자식 요소들이 배열처럼 저장된 것을 확인할 수 있습니다.

이를 이용하여 2번째 option의 innerText를 출력해봅시다.

console.log(select.options[1].innerText);

options[1]의 innerText가 출력됩니다.

options 로 값 가져오기

자 그럼 options로 선택된 값의 innerText를 콘솔에 출력해봅시다.

select.addEventListener("change", () => {
    console.log(select.options[select.selectedIndex].innerText);
});

selectedIndex 속성을 사용하면 선택된 요소의 인덱스를 가져올 수 있습니다.

한 줄에 너무 많은 코드가 쓰여 있어 나누어서 살펴봅시다.

select.addEventListener("change", () => {
    var options = select.options; // options 배열
    var index = select.selectedIndex; // 선택된 인덱스
    var txt = options[index].innerText; // 선택된 인덱스의 innerText
    console.log(txt);
});

부디 이해하는데 도움이 되셨길 바랍니다..!

실행 결과 >>

체크박스 다루기

체크박스가 체크되었을 때 콘솔 창에 체크 상태를 출력하는 예제를 작성해보겠습니다.

check.addEventListener("change", () => {
    console.log(check.checked);
});

checked를 이용하여 손쉽게 체크박스가 체크되었는지, 아닌지를 알 수 있습니다.

체크박스가 체크되었을 때, "이메일 아이디 @ 이메일 주소" 가 인증되었습니다. 라는 문구를 알림창에 띠우는 코드를 작성해봅시다

알림은 alert() 함수를 사용합니다
이메일 아이디는 텍스트 필드의 값입니다.
이메일 주소는 콤보 박스에 선택된 값입니다.

check.addEventListener("change", () => {
    if(check.checked){
        var address = field.value + "@" + select.options[select.selectedIndex].innerText;
        alert(address+"가 인증되었습니다.");
    }
});