Top

01. 요소 메서드 클래스 : .classList.add(), 02 : .classList.remove()

이미지1
이미지2
이미지3
이미지4
이미지5
이미지6
두번째 이미지를 클릭(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");
    })
})

03. 요소 메서드 : 클래스 : .classList.toggle() : 클래스 추가/삭제하기

이미지7
이미지8
이미지9
이미지10
이미지11
이미지12
이 버튼을 클릭(selected)하면 두번째 이미지가 선택 또는 해제됩니다. 이 버튼을 클릭(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");
    });
});

04. 요소 메서드 : 클래스 : .classList.contains() : 클래스 존재여보 확인하기

이미지13
이미지14
이미지15
이미지16
이미지17
이미지18
리셋 이 버튼을 클릭하면 선택된 클래스(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)를 찾은 후 클래스를 삭제합니다.
document.querySelector("#sample3 .btn1").addEventListener("click", function () {
    document.querySelectorAll("#sample3 .view > div").forEach(function (el) {
        if (el.classList.contains("selected")) {
            el.classList.remove("selected");
        }
    });
})

mission

이미지7
이미지8
이미지9
이미지10
이미지11
이미지12
각각의 이미지를 클릭하여 찾은 후 선택 또는 해제 이 버튼일 클릭하면 선택된 이미지에 파란색으로 표시됩니다. 

// 각각의 이미지를 클릭하면 각각의 이미지를 선책 / 해제
document.querySelectorAll("#sample4 .view > div").forEach(function (el) {
    el.addEventListener("click", function () {
        el.classList.toggle("selected");
    });
});

// 이 버튼을 클릭하면 선택된 이미지에 파란색으로 표시됩니다.
document.querySelector("#sample4 .btn5").addEventListener("click", function () {
    document.querySelectorAll("#sample4 .view > div").forEach(function(el){
        if (el.classList.contains("selected")) {
            el.classList.toggle("blue");
        }
    })
})