[Javascript/CSS] 클래스와 속성값을 문자열로 검색하는 방법

 

 

 

속성에 접근할 때 꽤나 여러가지 방법이 있다는 사실을 알게됐다.

그래서 더 찾아보니 정말 많군...😃

 

아래는 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])')

 

 

 

---

https://apost.dev/1001/

https://tcpschool.com/css/css_selector_attribute