반응형

2020.03.29 - [Frontend/Javascript] - Javascript (자바스크립트) - 요소(Element) 찾기

 

Javascript (자바스크립트) - 요소(Element) 찾기

자바스크립트에서 특정 아이디(id), 클래스(class), 태그(tag)의 dom 요소를 찾기 위해서 사용되는 메소드가 있다. 1. 아이디(Id)값 찾기 - getElementById() 안녕하세요 반갑습니다. Hello world 2. 클래스(Class..

abcdqbbq.tistory.com

 

자바스크립트의 요소 찾기와 다르게

제이쿼리의 경우엔 좀더 간단하게 요소를 찾을 수 있다.

 

1. 기본 셀렉터

Selector 설명
$("#id") # 문자를 사용하여 해당 아이디를 사용하는 요소를 검색
$(".class") . 문자를 사용하여 해당 클래스를 사용하는 요소을 검색
$("Tag") 태그명을 입력해서 해당 태그을 검색

위 요소를 사용하는 예시를 들자면 아래와 같다.

<div id="wrap">
  <div class="box">
    <p>예시용 설명글 입니다.</p>
  </div>
</div>

<script>
  var wrapper = $("#wrap");
  var box = $(".box");
  var paragraph = $("p");
  
  console.log(wrapper);  // <div class="wrap"> 반환
  console.log(box);  // <div class="box"> 반환
  console.log(paragraph);  // <p>예시용 설명글 입니다.</p> 반환
</script>

 

*사용시 주의사항

<div id="wrap">
  <div class="box">
    <p>예시용 설명글 입니다.</p>
  </div>
  <div class="box">
    <span>안녕</span>
  </div>
  <p class="dsc">안내사항을 전달 드립니다.</p>
</div>

<script>
  var wrapper = $("#wrap");
  var box = $(".box");
  var paragraph = $("p");
  
  console.log(wrapper);  // <div class="wrap"> 반환
  console.log(box);  // <div class="box"> 2영역을 배열 형식으로 반환
  console.log(paragraph);  // <p>예시용~</p>, <p class="dsc">안내사항을~</p> 2영역을 배열형식으로 반환
</script>

위와 같은 경우라고 했을 때

 

<div class="box">

  <span>안녕</span>

</div>

 

이라는 영역을 가져오고 싶어서

var box = $(".box") 를 사용하여 해당 요소를 찾았지만

 

<div class="box">

  <p>예시용 설명글 입니다.</p>

</div>

 

영역까지 같이 검색이된다.

 

그렇기 때문에 페이지에 하나만 존재하는 id값을 검색해서 사용하는 경우가 아니라면

클래스 검색, 태그 검색시 주의해야할 필요가 있다.

 

2. 특정 상황, 속성별 셀렉터

Selector 설명
$("input:checked") input radio 혹은 checkbox에 체크가 된 input을 가져온다.
$(".box + .text") .box 클래스 바로 뒤에 오는 형제 요소인 .text 클래스를 가진 요소를 가져온다.
$("p[class^='dsc']") p태그 중 클래스가 .dsc로 시작하는 요소를 가져온다.
$("선택자[속성]") 특정 선택자와 속성 값이 일치하는 요소를 가져온다.

위의 예시들 처럼

css 작성할 때와 마찬가지로

특정 속성 및 상황별 선택자를 사용하면

제이쿼리에서 원하는 영역을 가져올 수 있다.

 

 

 

 

반응형

'Frontend > Jquery' 카테고리의 다른 글

Jquery (제이쿼리) 란?  (0) 2020.10.16

+ Recent posts