Top

01. 요소 메서드 : .classList.add( ), .classList.remove( )

이미지01
이미지02
이미지03
이미지04
이미지05
이미지06
이 버튼을 클릭(selected)하면 두번째 이미지가 선택 됩니다. 이 버튼을 클릭(selected)하면 두번째 이미지가 해제 됩니다. 이 버튼을 클릭하면(selected)모든 이미지가 선택됩니다. 이 버튼을 클릭하면(selected) 모든 이미지가 해제 됩니다. 
{
    //두번째 이미지 선택 했을 때 선택,해제
    document.querySelector("#sample1 .btn1").addEventListener("click", function(){
        document.querySelector("#sample1 .view2").classList.add("selected");
     });
     document.querySelector("#sample1 .btn2").addEventListener("click", function(){
        document.querySelector("#sample1 .view2").classList.remove("selected");
     });

     // 모든 이미지 선택 해제
     document.querySelector("#sample1 .btn3").addEventListener("click", function(){
         document.querySelectorAll("#sample1 .view > div").forEach(function(el){
             el.classList.add("selected");
         });
     });
     document.querySelector("#sample1 .btn4").addEventListener("click", function(){
         document.querySelectorAll("#sample1 .view > div").forEach(function(el){
             el.classList.remove("selected");
         });
     });
}

02. 요소 메서드 : .classList.toggle( )

이미지07
이미지08
이미지09
이미지10
이미지11
이미지12
리셋 이 버튼을 클릭(selected)하면 두번째 이미지가 선택 또는 해제 됩니다. 이 버튼을 클릭(selected)하면 모든 이미지가 선택 또는 해제 됩니다. 
{
    //리셋
    document.querySelector("#sample2 .btn0").addEventListener("click", function(){
        document.querySelectorAll("#sample2 .view > div").forEach(function(el){
            el.classList.remove("selected");
        });
    });
    // 두번째 이미지 선택 또는 해제 
    document.querySelector("#sample2 .btn1").addEventListener("click", function(){
        document.querySelector("#sample2 .view2").classList.toggle("selected");
    });
    // 모든 이미지 선택 또는 해제
    document.querySelector("#sample2 .btn2").addEventListener("click", function(){
        document.querySelectorAll("#sample2 .view > div").forEach(function(el){
            el.classList.toggle("selected");
        });
    });        
    //각각의 이미지를 클릭하면 각각의 이미지를 선택 또는 해제
    document.querySelectorAll("#sample2 .view > div").forEach(function(el){
        el.addEventListener("click",function(){
            el.classList.toggle("selected");
        });
    });
}

03. 요소 메서드 : .classList.contains( )

이미지13
이미지14
이미지15
이미지16
이미지17
이미지18
리셋 이 버튼을 클릭하면 선택된 클래스(selected)를 찾은 후 클래스를 삭제합니다. 이 버튼을 클릭하면 선택된 클래스(selected)를 찾은 후 파란색으로 나오게 합니다. 
{
    //리셋
    document.querySelector("#sample3 .btn0").addEventListener("click", function(){
        document.querySelectorAll("#sample3 .view > div").forEach(function(el){
            if(el.classList.contains("blue")){
                el.classList.remove("blue");
            }else{  document.querySelector("#sample3 .view2").classList.add("selected");
                    document.querySelector("#sample3 .view4").classList.add("selected");
                    document.querySelector("#sample3 .view6").classList.add("selected");

            }
        });            
    });
    //버튼을 클릭(selected)하면 선택된 클래스(selected)를 찾은 후 클래스를 삭제
    document.querySelector("#sample3 .btn1").addEventListener("click", function(){
        document.querySelectorAll("#sample3 .view > div").forEach(function(el){
            if(el.classList.contains("selected")){
                el.classList.remove("selected");
            }
        });
    });         
    // 클릭하면 선택된 클래스를 찾은 후 색이 파란색으로 나오게하시오
    document.querySelector("#sample3 .btn2").addEventListener("click", function(){
        document.querySelectorAll("#sample3 .view > div").forEach(function(el){
            if(el.classList.contains("selected")){
                el.classList.add("blue");
            }
        });
    });
}