프론트엔드 센트럴파크 (☞ﾟヮﾟ)☞

classList.contains(string) 본문

Javascript

classList.contains(string)

자라나라나무나무나 2022. 7. 23. 15:40

classList.contains(string)

해당 요소의 클래스의 유무를 확인하여 true / false 로 구분 
<body>
    <h1>장바구니</h1>
    <ul class="classN1">
        <li class="item">책상</li>
        <li class="item">의자</li>
        <li class="item">노트북</li>
        <li class="item">필통</li>
        <li class="item">교과서</li>
        <li class="item">공책</li>
    </ul>
    
</body>
<script>
    const items = document.querySelector(".classN1");
    items.addEventListener('click', (event) => {
        console.dir(event.target);
        console.dir(event.target.classList);

        console.log(items.classList.contains("classN1"));

        if(event.target.nodeName == 'LI') {
            event.target.style.background = 'blue';
        } 
    });
    
</script>

장바구니라는 목록을 만들었는데 ul 목록을 이용하여 정렬 하였다.

click이벤트를 적용하려 하는데 부모인 ul에 class="classN1" 을 지정하였다.

classN1을 querySelector로 전부 지정을 하고 이름을 items로 하겠다.

그리고 items에 addEventListener를 이용하여 click 이벤트를 걸도록 하겠다. 

event의 속성에 대해 알아보기 위해 제일 처음 event의 dir을 알아보고 그 안에 target이 있다는 것을 알아냈다.

그리고 target 안에는 classList가 있다는 것을 알아냈다.

여기서 우리가 이용할 메서드는 contains 다.

classList에 classN1이 있는지 확인한 결과는 true이다. 

 

저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

commonJS로 JS파일 연동하기  (0) 2022.07.27
프로토타입  (0) 2022.07.27
거듭제곱 / 제곱근  (0) 2022.07.20
배열 숫자의 오름차순, 내림차순 정렬  (0) 2022.07.20
배열 내 모든 요소가 콜백 함수의 조건을 만족하면 true/false - every()  (0) 2022.07.20
'Javascript' Related Articles more
Comments