-
jQuery 선택자(태그) 접근 방법 2 (여러 Id, Class 사용하여 접근하기)DEV/javascript 2022. 2. 15. 16:08
저번 시간에 Javascript의 jQuery를 이용하여 HTML DOM에 접근하는 기본적인 방법에 대해 알아보았다.
https://seokbong.tistory.com/8
jQuery 선택자(태그) 접근 방법 1 (HTML DOM 접근 방법)
Javascript의 Jquery를 이용하여 HTML 태그 ID, Class 접근 방법을 알아보자. 샘플 HTML <!DOCTYPE html> 고객 Jquery id 값을 통해 태그를 접근하는 예시 id가 "userName"인 태그(a 태그)에 접근하여 내용을 "석..
seokbong.tistory.com
가끔 해당 DOM을 접근할 때, 해당 객체를 찾는 Id 값이나 Class 값이 중복되어 정확하게 찾지 못하는 경우가 존재한다.
이러한 경우 상위 경로의 선택자를 활용하거나 같은 객체의 다른 선택자를 추가하여 정확하게 선택할 수 있다.
샘플 HTML
<!DOCTYPE html> <html> <head> <script src="./jquery.js"></script> </head> <body> <div class="cosList1"> 고객 1 <br> <a id="userName">석봉</a> </div> <br> <div class="cosList2"> 고객 2 <br> <a id="userName" class="notMe">시봉</a> </div> </body> <script src="./test.js"></script> </html>
샘플 HTML 출력 화면 위 샘플 HTML에서 "시봉" 이름을 지우려고 한다.
ID Selector로 "userName"를 지정한 후 내용을 바꿔보자.
test.js
"use strict" $(function(){ $('#userName').text("제거!"); })위 js가 실행되는 경우 다음과 같은 결과가 출력된다.
test.js 실행 결과 '시봉"을 제거하려고 하였지만 "석봉"이 제거가 되었다.
중복된 id 값으로 인해 가장 위 "userName"인 "석봉"이 제거된 것.
id 값은 주로 고유 값을 지정하기 때문에 위와 같은 예시는 옳지 않을 수 있지만 class와 같이 중복되는 선택자를 이용하는 경우 또는 한 화면에서 다중 iframe을 사용하여 중복 발생으로 코드가 정상적으로 작동하지 않는 경우가 존재한다.
해결 방법은 다양하다.
가장 단순한 방법으로는 id 값을 고유한 값으로 변경을 하는 방법이 있다.
하지만 특정 class를 사용하는 객체를 접근하고 싶은 상황도 생길 수 있다.
다음 코드를 확인하자.
test.js
"use strict" $(function(){ $('.cosLis2 #userName').text("제거!"); })
수정된 test.js 출력 화면 cosList2(class)내의 userName(id)인 "시봉"이 수정되었다.
선택자는 순서와 띄어쓰기가 중요하다.
가장 먼저 쓴 선택자가 그 다음 선택자의 부모의 선택자이다.
이 외 다양한 선택자 활용 방법이 존재한다.
test.js
"use strict" $(function(){ $('#userName.notMe').text("제거!"); })위 방법은 Id가 "userName" 이면서 class "notMe"를 동시에 가지고 있는 객체를 선택하는 방법이다.
수정된 test.js 출력 화면 test.js
"use strict" $(function(){ $('#userName, .notMe').text("제거!"); })위 방법은 "userName"인 id를 갖거나 "notMe" class를 갖는 객체를 선택한다.
수정된 test.js 출력 화면 'DEV > javascript' 카테고리의 다른 글
Javascript Toast grid 예시 (1) 2022.02.16 Javascript 물음표 연산자와 물음표 두개 연산자 (? 연산자와 ?? 연산자) (0) 2022.02.15 Javascript Data 속성 활용 예시 (0) 2022.02.12 Javascript DATA 속성 (0) 2022.02.12 jQuery 선택자(태그) 접근 방법 1 (HTML DOM 접근 방법) (0) 2022.02.11