자바스크립트 다양한 input type 값 꺼내기

    <!-- 01 | INPUT - TEXT -->
    <input id="input" type="text" value="input_value_text">
 
    <!-- 02 | INPUT - FILE -->
    <input id="file" type="file">
    <button id="fileBtn">GET FILE NAME</button>
 
    <!-- 03 | INPUT - CHECKBOX -->
    <form id="checkBox">
        <label for="chk01">label_name01</label>
        <input type="checkbox" name="chkVal" id="chk01" value="chkVal01">
        <label for="chk02">label_name02</label>
        <input type="checkbox" name="chkVal" id="chk02" value="chkVal02">
    </form>
    <button id="chkBtn">GET CHECKED VALUE</button>
 
    <!-- 04 | INPUT - RADIO -->
    <form id="radioBox">
        <label><input type="radio" name="radioName" value="radio_value01">radio_name01</label>
        <label><input type="radio" name="radioName" value="radio_value02">radio_name02</label>
        <label><input type="radio" name="radioName" value="radio_value03">radio_name03</label>
    </form>
    <button id="radioBtn">GET CHECKED VALUE</button>
 
    <!-- 05 | TEXT AREA -->
    <textarea id="textarea">textarea_value</textarea>
    <button id="textareaBtn">GET TEXTAREA</button>
 
    <!-- 06 | SELECT -->
    <select id="selectBox">
        <option value="option01_value">option01_text</option>
        <option value="option02_value">option02_text</option>
        <option value="option03_value">option03_text</option>
    </select>
    <button id="selectBtn">GET SELECT VALUE</button>

    // ============================= //
    // JAVA SCRIPT
    // ============================= //
 
    // 01 //
    var input = document.getElementById('input');
    // INPUT에 입력된 내용 가져오기
    console.log(input.value);
    // INPUT ATTRIBUTE(속성) 가져오기
    console.log(input.getAttribute('type'));
 
    // 02 //
    var file = document.getElementById('file');
    var fileBtn = document.getElementById('fileBtn');
    // 파일명 구하기
    fileBtn.addEventListener('click', getFileName);
    function getFileName(){
        console.log(file.value.replace('C:\\fakepath\\', ''));
    }
 
    // 03 //
    var chkBox = document.getElementById('checkBox');
    var chkBtn = document.getElementById('chkBtn');
    // CHECKED 값 가져오기
    chkBtn.addEventListener('click', getCheckedValue);
    function getCheckedValue(){
        var target = chkBox.children;
        var len = target.length;
        for(var i=0; i<len; i++){
            if(target[i].checked == true){
                console.log(target[i]);
                console.log('value >> ' + target[i].getAttribute('value'));
            }
        }
    };
 
    // 04 //
    var radioBox = document.getElementById('radioBox');
    var radioBtn = document.getElementById('radioBtn');
    // 선택한 RADIO 값 가져오기
    radioBtn.addEventListener('click', getRadioValue);
    function getRadioValue(){
        var target = radioBox.children;
        var len = target.length;
        for(var i=0; i<len; i++){
            if(target[i].children[0].checked == true){
                console.log(target[i].children[0]);
                console.log('value >> ' + target[i].children[0].getAttribute('value'));
            }
        }
    }
 
    // 05 //
    var textareaBox = document.getElementById('textarea');
    var textareaBtn = document.getElementById('textareaBtn');
    // TEXTAREA 값 가져오기
    textareaBtn.addEventListener('click', getTextareaValue);
    function getTextareaValue(){
        console.log(textareaBox.value);
    }
 
    // 06 //
    var selectBox = document.getElementById('selectBox');
    var selectBtn = document.getElementById('selectBtn');
    // SELECT VALUE&TEXT 가져오기
    selectBtn.addEventListener('click', getSelectValue);
    function getSelectValue(){
        /* VALUE */   console.log(selectBox.value);
        /* TEXT */    console.log(selectBox.options[selectBox.selectedIndex].text);
    }