JavaScript - html 요소 중 특정 class 가 포함돼 있는지 확인하는 함수

$(document).on('click', 'a.btnType', function(){});
document.addEventListener('click', (e) => {
    console.log("DOMLoaded click event");
    console.log(e);
    if (e.target.parentNode.tagName == 'a' && e.target.parentNode.classList.contains('btnType')) {
        e.preventDefault();
    }
});

html 요소가 특정 class 를 포함하는지 확인하는 방법
어떤 html 요소의 class가 특정 class를 포함하고 있는지 확인하는 방법이 있다.
ele.classList 에 접근하면 가지고 있는 class 이름들을 list 형태로 받아올 수 있다.

const cl = document.querySelector('input#keyword').classList;
//classList 객체에서 특정한 클래스를 포함하는지 확인하는 함수는 contains() 이다.
console.log(cl.contains('inputTxt'));
const isContain = document.querySelector('input#keyword').classList.contains('yourClassName');
console.log(isContain);

> 참고: 문자열에서 포함하는지 확인하는 함수
string 문자열 안에 특정 문자열이 포함되어 있는지 알아보는 함수는 includes()다.

const str = 'hello world';
console.log(  str.includes('el')  );

> 참고2 : 배열에서도 마찬가지로 includes

const arr = ['hello', 'world', 'js'];
console.log(  arr.includes('hello')  );

javaScript 에서 배열과 객체는 내부적으로 같은 자료형이기 때문에 
includes() 멤버 메소드를 함께 가져가는 것도 직관적으로 느껴진다.

 

 

- 220426