DOM 에서 특정한 엘리먼트의 하위에 속해있는 엘리먼트를 조회할 땐,
조회하고자하는 엘리먼트를 감싸고있는 상위 엘리먼트 객체에 대해서 getElement(s)By~ 를 사용한다.
위 처럼 특정 엘리먼트 조회 시 jQuery 에서의 사용은 다음과 같다
1) $('a b');
2) $('b', 'a');
3) $('a').find('b');위 모두 a 엘리먼트에 한해서 b 엘리먼트를 조회하는 것이다.
코드로 확인해보면,
<body>
<ul>
<li class="Tottenham_class">Son</li>
<li>Messi</li>
<li id="Tottenham_id">Tottenham
<ul>
<li class="Tottenham_class">Kane</li>
<li class="Tottenham_class">Alli</li>
</ul>
</li>
</ul>
</body>
위와 같이 HTML 엘리먼트들을 만들었다.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$("#Tottenham_id .Tottenham_class").css('color', 'red');
</script>자바스크립트 부분이다.
Tottenham_id 라는 id를 가진 엘리먼트에 한해서 Tottenham_class 라는 class 명을 가진 엘리먼트들을 조회한 후,
css 메소드를 적용하는 것이다.
결과는,
위와 같다.
Son 텍스트가 있는 li 엘리먼트도 class 명이 Tottenham_class 지만, id가 Tottenham_id 만 해당되게끔 한정시키는 인자를 주었기에 Son 은 해당이 되지 않았다.
다음과 같은 자바스크립트 내용은 모두 같은 결과값을 얻는다.
<script>
$("#Tottenham_id .Tottenham_class").css('color', 'red');
$(".Tottenham_class", "#Tottenham_id").css('color', 'red');
$("#Tottenham_id").find(".Tottenham_class").css('color', 'red');
</script>여기서 봐야할 것은 find 다.
find()는,
find가 속해있는 객체 [ 위에선 $("#Tottenham_id") 가 된다 ] 에 대해서 find 의 인자값에 해당되는 엘리먼트들 만을 조회하는 것이다.
find는 다음과 같은 상황에서 응용하여 적용할 수 있다.
<script>
$('#Tottenham_id').css('color', 'red').find('.Tottenham_class').css('background-color', 'blue');
</script>id가 Tottenham_id 인 엘리먼트들에 대해서 글자색을 'red' 로 설정한 후,
class명이 Tottenham_class 인 엘리먼트들에 대해서 'background-color' 를 'blue' 로 적용한다는 의미이다.
결과는,
위와 같다.
'Javascript' 카테고리의 다른 글
| 16. Node 종류 API (0) | 2021.09.18 |
|---|---|
| 15. Node 관계 API (0) | 2021.09.17 |
| 13. jQuery 속성 제어 (0) | 2021.09.15 |
| 11. Element 객체 & 식별자 API (0) | 2021.09.13 |
| 10. jQuery 알아보기 (0) | 2021.09.11 |