Development/HTML · CSS
[Javascript/CSS] 클래스와 속성값을 문자열로 검색하는 방법
레오나르도 다빈츠
2024. 2. 4. 15:28
속성에 접근할 때 꽤나 여러가지 방법이 있다는 사실을 알게됐다.
그래서 더 찾아보니 정말 많군...😃
아래는 js로 작성하는 방법이지만 css로 바꿔도 동일하게 접근 가능! (대신 문자열부분을 ''로 감싸주면 된다.)
📄 지정한 문자열이 포함된 요소 접근하기
document.querySelectorAll('img[alt*=menu]')
📄 지정한 문자열로 시작하는 요소로 접근하기
document.querySelectorAll('img[alt^=menu]')
📄 지정한 문자열로 끝나는 요소로 접근하기
document.querySelectorAll('img[alt$=menu]')
📄 특정 속성의 속성값에 특정 문자열로 이루어진 한 단어를 포함하는 요소에 접근하기
속성값이 정확이 해당 문자열인 경우나 띄어쓰기를 기준으로 인식되는 단어에 해당 문자열이 포함된 요소를 선택한다.
// <div class="food menu"></div> 선택하기
document.querySelectorAll('img[alt~=menu]')
📄 속성여부로 접근하기
// img 태그에 alt 속성이 있는 요소
document.querySelectorAll('img[alt]')
// a 태그에 class 속성이 있는 요소
document.querySelectorAll('a[class]')
📄 대소문자 구분없이 요소 접근하기
// i를 붙이면 대소문자 구분없이 접근 할 수 있다.
document.querySelectorAll('img[alt*=menu] i')
📄 다중 조건으로 접근하기
// a 태그안에 href 속성이 https:로 시작되면서 com으로 끝나는 요소
document.querySelectorAll('a[href^=https:][href$=com]')
📄 속성이 없는 태그 접근하기
document.querySelectorAll('a:not([class])')