힘내보자

div 자체를 불러오고 있어서 아래 찍히는게 엘레멘트 요소랑

div태그 전체가 브라우저 콘솔에 찍힘

밸류값인 텍스트를 받아오려면 어떻게 해야할까?

    <h3>class로 접근하기</h3>
    <p> getElementsByClassName() : 반환타입 [] HTMLCollection<br>
        해당 클래스에 속한 요소를 모두 선택함.
    </p>
    <div id="testClass1" class="area">getElementsByClassName()</div>
    <button onclick="testByClass();">html태그 접근 - class 접근 - getElementsByClassName()</button>
    <script>
        function testByClass(){
            var test = document.getElementsByClassName("area");
            console.log(test);
            console.log(typeof test);

            for(var i=0; i< test.length;i++){
                test[i].style.borderStyle = 'dashed';
            }
        }
    </script>

userName에 .value를 추가해서 밸류값만 가져오게 해야

전체 객체를 안가져오고 텍스트인 밸류값만 divEx1 변수에 넣어주게 되서 텍스트가 출력된다!

if(userName != null){
     divEx1.innerHTML = userName.value;
     console.log(divEx1);
}else{