자바스크립트 요소에 접근하기

HTML : 요소에 접근하기 (해당 요소 객체를 가져오는 것)

 

  <h3>1) 아이디 속성을 이용하여 요소 가져오기</h3>

    <button onclick="accesId()">아이디로 접근</button>

    <div id="area1" class="area">1번 영역</div>

   <script>

        function accesId(){

 

            let area1 = document.getElementById("area1");

            area1.innerHTML +=  "<br>아이디로 접근 성공!";

            area1.style.background = "tomato";

            area1.style.color = "yellow";

            area1.style.width = "200px";

            area1.style.height = "100px";

            if(area1.style.background != "tomato"){

            area1.style.background = "tomato"

           }else{

             area1.style.background = "red"

           }

}

  </script>

 

태그명으로 요소 가져오기 : 

    <h3>2) 태그명으로 요소 가져오기</h3>

    <button onclick="accessTagName()">태그명으로 접근</button>

   

    <ul>

        <li>ITEM 1</li>

        <li>ITEM 2</li>

        <li>ITEM 3</li>

        <li>ITEM 4</li>

        <li>ITEM 5</li>

    </ul>

 

 <script>

        // ES6

        function accessTagName(){

 

           let list = document.getElementsByTagName("li");

           li 태그에 접근  

    

        console.log("배열의 길이 : " + list.length);

        console.log("첫번째 요소 : " + list[0].innerHTML);

     

            list[4].style.color = "blue";

 

        for(let i=0; i<list.length; i++){

            list[i].innerHTML = (i+1) +"번쨰 위치의 li요소입니다";

   

        }

    }

    </script>

 

 

name 속성을 이용하여 요소 가져오기 :

  <form action="">

        <fieldset>

            <legend>취미</legend>

           

            <input type="checkbox" name="hobby" id="all" value="전체선택"

            onchange="allCheck()";>

            <label for="all">전체 선택</label>

           

            <input type="checkbox" name="hobby" id="fishing" value="낚시"

            onchange="checkboxTrigger()">

            <label for="fishing">낚시</label>

           

            <input type="checkbox" name="hobby" id="game" value="게임"

            onchange="checkboxTrigger()">

            <label for="game">게임</label>

           

            <input type="checkbox" name="hobby" id="hiking" value="등산"

            onchange="checkboxTrigger()">

            <label for="hiking">등산</label>

        </fieldset>

    </form>

    <script>

        function allCheck(){

            let all = document.getElementById("all");

            console.log(all.checked);

            let hList = document.getElementsByName("hobby");

            for(let checkbox of hList){

             

           console.log(checkbox);

   

            checkbox.checked = all.checked;

            }

        }

    

        function checkboxTrigger(){

     

            let hList = document.getElementsByName("hobby");

            for(let h of hList){

                console.log(h.value);

                if(h.value == "전체선택"){

                    continue;

                }

               if(!h.checked){

                allCheck = false;

               }

            }

          }

    </script>

 

value는 체크박스가 선택되었을 떄 전송되는 값이다 

id는 각 체크박스의 고유 식별자이다 

onchange 속성은 사용자가 체크박스를 클릭할 때 호출할 자바스크립트 함수를 지정한다

 

1. allCheck() 함수:

document.getElementById("all")을 통해서 전체 선택 체크박스를 가지고 온다. 

 

all.checked를 통해서 전체 선택 체크박스가 선택이 되었는지 확인한다 

선택이 되었다면 true를 선택되지 않았다면 false를 반환하게 한다

 

document.getElementsByName("hobby")를 사용하여 name이 hobby인

모든 체크박스를 배열로 가져온다  

 

해당 코드로 인해서 전체 선택 체크박스를 체크를 하게되면 모든 취미 체크박스가 체크가되고 

전체 선택 체크박스를 해제하면 모든 취미 체크박스도 해제가 된다. 

 

       function checkboxTrigger(){

            // 전체 체크박스 이외에 다른 체크박스들의 상태에 따라서

            // 전체 체크박스의 상태를 true, false로 변경

            // - true : 모든 체크박스들이 체크되어 있을 때 (상태가 모두 true)

            // - false : 하나라도 false인 상태의 체크박스가 있을 떄

            let allCheck = true;

            let hList = document.getElementsByName("hobby");

            for(let h of hList){

                console.log(h.value);

                if(h.value == "전체선택"){

                    continue;

                }

               if(!h.checked){

                allCheck = false;

               }

            }

          }

    </script>

 

 

 

let allCheck 변수는 전체 선택 체크박스가

체크되어야 하는지 여부를 나타낸다 

 

초기값이 true로 설정되어 있어 있다

처음에는 모든 체크박스가 선택되어 있다고 가정한다

 

 

   if(h.value == "전체선택"){

                    continue;

                }

현재 h 체크박스의 value 값이 전체 선택이라면 

전체 선택 체크박스이므로 건너뛰고 다음 체크박스로 넘어간다. 

 

  if(!h.checked){

                allCheck = false;

               }

현재 체크박스가 체크되지 않았다면 

allCheck 체크 변수를 false로 설정한다