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. 요소 메서드 : 선택자 : querySelectorAll( ) : 모든 요소 선택자

이미지01
이미지02
이미지03
이미지04
이미지05
이미지06
리셋 이 버튼을 클릭하면(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")
        })
    })
}

03. 요소 메서드 : 선택자 : document.getElementById( ) : 아이디 요소 선택자

이미지01
이미지02
이미지03
이미지04
이미지05
이미지06
리셋 이 버튼을 클릭하면 선택된 클래스(selected)를 찾은 후 클래스를 삭제합니다. 이 버튼을 클릭하면 선택된 클래스(selected)를 찾은 후 색을 파란색으로 나오게 하세요. 

//리셋
document.querySelector("#sample3 .btn0").addEventListener("click", function () {
    document.querySelector("#sample3 .view2").classList.add("selected")
    document.querySelector("#sample3 .view4").classList.add("selected")
    document.querySelector("#sample3 .view6").classList.add("selected")
})
//이 버튼을 클릭하면 선택된 클래스(selected)를 찾은 후 클래스를 삭제합니다.
const num =
    document.querySelector("#sample3 .btn1").addEventListener("click", function () {
        document.querySelectorAll("#sample3 .view > div").forEach(function (el) {
            if (el.classList.contains("selected")) {
                el.classList.remove("selected");
            }
        })
    })

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