[JQuery] HTML 요소 탐색, 검색 하기 (총 정리)

jQuery

[JQuery] HTML 요소 탐색, 검색 하기 (총 정리)

ITSkeleton 2020. 8. 1. 17:02

728x90

JQuery에서는 요소를 탐색하는 방법이 여러가지가 있습니다.

1. 상위 요소(부모) 탐색

상위 요소를 탐색하는 메서드가 4종류가 존재합니다

parent

선택한 요소의 부모(parent) 요소를 선택합니다. 이때는 부모가 여러 가지가 있더라도 최초로 걸리는 하나의 부모만을 반환합니다.

<div>컨테이너 
  <ul>책상
    <li>필통 
      <span>연필</span> 
    </li> 
  </ul> 
</div>

이런 HTML요소가 있다고 해봅시다 span의 부모를 한번 검색해 볼까요?

$("span").parent();

이렇게 하면 span의 부모인 li가 선택되게 됩니다. 그다음 뭔가 액션이 필요하겠죠?

$("span").parent().css({"fontSize": "40px"});

이 함수를 호출하고 나면 span의 부모인 li에 있는 필통이 폰트 사이즈가 40px 이나 되버린답니다!

parents

선택한 요소의 상위(ancestor) 요소를 모두 선택합니다

<div>컨테이너 
  <ul>책상
    <li>필통 
      <span>연필</span> 
    </li> 
  </ul> 
</div>

이러한 HTML요소가 존재할때

$("span").parents();

이렇게 호출을 하게되면 li ul div 상위 요소가 모두 선택됩니다. 여기서 선택하고 싶은것을 고를 수도 있는데요

$("span").parents("ul");

이렇게 호출하면 부모인 li ul div 중에서 ul을 선택하게 됩니다. 그럼 이제 제대로 선택되었는지 액션이 필요하겠죠?

$("span").parents("ul").css({"border": "2px solid red"});

호출하게되면 ul에 2px 의 빨간 선을 그려집니다

parentsUntil

선택한 요소의 상위 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택합니다

<div>컨테이너 
  <ul>책상
    <li>필통 
      <span>연필</span> 
    </li> 
  </ul> 
</div>

$("span").parentsUntil("ul").css({"border": "2px solid red"});

이렇게 호출하게되면 li가 선택됩니다. span과 ul사이에는 li만 존지하니까요

closest

선택한 요소를 포함한 상위 요소 중에서 지정한 선택자에 해당하는 요소 중 가장 첫 번째 요소를 선택합니다

<div class="me">컨테이너 
  <ul class="me">책상
    <li class="me">필통 
      <span>연필</span> 
    </li> 
  </ul> 
</div>

$("span").closest(".me");

이렇게 class me가 3개나 있는데요 span에서부터 최상위인 div까지 .me를 검색합니다. 그중 처음으로 걸리는 .me를 반환합니다.

결과는 li가 선택된것이죠!

2. 하위 요소(자식) 탐색

children

선택한 요소의 자식(child) 요소를 모두 선택

<div class="me">컨테이너 
  <ul class="me">책상
    <li class="me">필통 
      <span>연필</span> 
    </li> 
  </ul> 
</div>

$("ul").children().css({"backgroundColor": "red"});

여기서 생각해야할 부분은 li와 span은 하나의 요소로 만들어진다는 점이다. 이게 무슨말이냐하면

만약 border: 1px solid; 를 적용시켰다고 해보자,

그럼 li와 span에 모두 그려지게 되는것이 아니라 마치 li가 선택된것처럼 li크기에 border가 생성 될것입니다.

직접 한번 짜보면서 값을 하나씩 바꿔보며 알아보는것이 훨씬 이해가 쉬울겁니다!

find

선택한 요소의 자손(descendant) 요소 중에서 전달받은 선택자에 해당하는 요소를 모두 선택

별표("*")를 인수로 전달하여, 선택한 요소의 자손 요소를 모두 선택할 수도 있습니다

<div class="me">컨테이너 
  <ul class="me">책상
    <li class="me">필통 
      <span>연필</span>
    </li> 
  </ul> 
</div>

$("ul").find("*").css({"backgroundColor": "blue"});

$("ul").find("span").css({"backgroundColor": "red"});

이렇게 위에 두가지를 적어서 어떤 값이 나오는지 한번 확인해 봅시다.

3. 형제 요소(동일한 위치) 탐색

siblings

선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택

<div class="me">컨테이너 
  <ul class="me">책상
    <li class="me">필통 
      <span>연필</span> 
      <span>지우개</span> 
      <span id="pen">볼펜</span> 
      <span>샤프심</span> 
      <span>화이트</span> 
    </li> 
  </ul> 
</div>

$("#pen").siblings();

id가 pen인 요소와 같은 위치에 있는 모든 요소들을 선택합니다. 연필, 지우개, 샤프심, 화이트 가 선택됩니다

선택한 요소의 바로 다음에 위치한 형제 요소를 선택

<div class="me">컨테이너 
  <ul class="me">책상
    <li class="me">필통 
      <span id="pen">연필</span> 
      <span>지우개</span> 
      <span>볼펜</span> 
      <span>샤프심</span> 
      <span>화이트</span> 
    </li> 
  </ul> 
</div>

$("#pen").next();

id가 pen인 요소의 같은 선상에 있는 형제요소, 바로 다음의 형제요소를 가져옵니다.

그렇다면 지우개가 적혀있는 요소를 가지고 오겠죠?

nextAll

선택한 요소의 다음에 위치한 형제 요소를 모두 선택

<div class="me">컨테이너 
  <ul class="me">책상
    <li class="me">필통 
      <span>연필</span> 
      <span>지우개</span> 
      <span id="pen">볼펜</span> 
      <span>샤프심</span> 
      <span>화이트</span> 
    </li> 
  </ul> 
</div>

$("#pen").nextAll();

id가 pen인 볼펜 요소의 형제요소중 자신의 다음에 오는 모든 요소를 가져옵니다. 샤프심, 화이트 요소를 가져오겠죠?

nextUntil

선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택

<div class="me">컨테이너 
  <ul class="me">책상
    <li class="me">필통 
      <span id="pen">연필</span> 
      <span>지우개</span> 
      <span>볼펜</span> 
      <span>샤프심</span> 
      <span>화이트</span> 
    </li> 
  </ul> 
</div>

 $("#pen").nextUntil("span:last")

id가 pen인 요소 다음 부터 마지막 전까지의 요소를 가져옵니다. 가져오는 요소는 지우개 볼펜 샤프심 이겠네요!

선택한 요소의 바로 이전에 위치한 형제 요소를 선택

<div class="me">컨테이너 
  <ul class="me">책상
    <li class="me">필통 
      <span>연필</span> 
      <span>지우개</span> 
      <span id="pen">볼펜</span> 
      <span>샤프심</span> 
      <span>화이트</span> 
    </li> 
  </ul> 
</div>

$("#pen").prev();

next와 반대로 id가 pen인 요소의 바로 전 요소를 가져옵니다. 지우개를 가져오겠네요!

prevAll

선택한 요소의 이전에 위치한 형제 요소를 모두 선택

<div class="me">컨테이너 
  <ul class="me">책상
    <li class="me">필통 
      <span>연필</span> 
      <span>지우개</span> 
      <span id="pen">볼펜</span> 
      <span>샤프심</span> 
      <span>화이트</span> 
    </li> 
  </ul> 
</div>

$("#pen").prevAll();

id가 pen인 요소의 전 모두를 가져옵니다. 연필과 지우개를 가져오겠네요!

prevUntil

선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 다음까지의 요소를 모두 선택

<div class="me">컨테이너 
  <ul class="me">책상
    <li class="me">필통 
      <span>연필</span> 
      <span>지우개</span> 
      <span id="pen">볼펜</span> 
      <span>샤프심</span> 
      <span>화이트</span> 
    </li> 
  </ul> 
</div>

$("#pen").prevUntil("span:first");

id가 pen인 요소의 이전의 첫번째 span의 요소를 가져옵니다. 지우개를 가져오겠네요! :last를 하면 연필을 가져오겠죠!!

4. 기타

add

선택한 요소에 다른 요소를 추가 선택합니다

<p>컨테이너3</p>
<div>컨테이너</div>
<span>컨테이너2</span>

$("p").add("div");

컨테이너3, 컨테이너 가 선택됩니다.

$("p, div");

이렇게 표현도 가능합니다

addBack

선택한 요소의 집합에 바로 전에 선택했던 요소를 추가합니다

each

선택한 요소들을 각 요소마다 전달받은 콜백 함수를 반복 실행합니다

end

마지막으로 실행한 메소드의 실행 전 상태로 선택한 요소의 집합을 복원시킵니다

offsetParent

DOM 트리에 존재하는 부모요소들 중 위치(positioned)요소를 기준으로 가장 가까운 요소를 찾아서 요소를 선택합니다

선택한 요소의 자식(child) 요소를 모두 선택합니다

이때는 텍스트 노드와 주석 노드까지 모두 포함합니다

728x90

현재글[JQuery] HTML 요소 탐색, 검색 하기 (총 정리)

Skeleton의 세상