Finding elements by CSS selector (Video Version)

여러분은 도구모음의 수많은 도구를
어떠한 요소를 찾아내기위해 사용할 수 있어요

그것들은 수많은 작업 중 정말 멋지게 작동할 것입니다

하지만 모든 것중에서 가장 강력한 도구는

CSS 선택자들을 이용하여
특정한 요소(element)들을 찾는 능력입니다

여러분은 CSS 선택자를 기억하시나요?

기본적으로 어떠한 것을 찾기 위해서는
태그 이름(tag name)을 이용하거나

ID를 이용하거나

class를 이용해야합니다

하지만 수많은 진보된 선택자들이 존재합니다

하위 선택자, 속성 선택자,
클래스와 요소 복합 선택자,

이러한 것들은 여러분이 잊어먹지만 않는다면

지금부터 보게될 CSS 선택자보다 효율적일 것입니다

예를들어 제가 animal이라는
class의 이름을 가지고있는 문단(paragraph)의

요소들에만 특정한 스타일을 지정하기를 원한다고 가정 해봅시다

그러기 위해서는 우선 태그를 그 안에 넣어 주어야하고

그 다음 먼저 'p'를 적고

그리고 한칸을 띄운다음

'.animal'이라고 입력하면
'animal'이라는 class 이름을 가지고있는

모든 요소를 찾는 다는 것을 의미해요

그리고 그것들은 모두 빨강색으로 되라고 해볼게요

멋지네요

지금부터는 똑같은 CSS 선택자를 사용하여
JavaScript에서 특정한 요소들을 찾아볼게요

'document.querySelectorAll()' 메서드를
이용해서 말이죠

그러면 저는 이 줄을 바꿔볼거에요

그리고 CSS 선택자를 따옴표 안에 넣어
문자열(string)로 만든 다음

인수(argument)로서 전달하는 것이 필요합니다

그러면 그 문단은 다시 고양이에 대해서 다루게 될 것입니다

여러분이 함수에 올바른 CSS선택자를 전달했다면

여러분이 루프를 통해서 알아낼 수도 있는

요소들의 콜렉션(collection)이 리턴될 것입니다

지난 시간에 제가 'getElementsByTagName()'은

마치 배열(array)과 매우 닯아 보이는
HTML 콜렉션(collection)을

하나 리턴된다고했던 것을 기억하시나요?

이 메서드는 꺽쇠를 이용하여 자료를 접근한다던지
길이를 잴 수 있다던지 하는

많은 면에서 배열과 비슷한 자료구조인
노드리스트(NodeList)를 리턴합니다

그리고 여러분은 이런 메서드를 사용할때

아마도 이러한 노드리스트와 HTML콜렉션 간의
차이를 마주하게 될 것입니다

하지만 이것들에 대해서 더 배우게 된다면
이것들을 보는것이 반가울 거에요

좋아요 이제 CSS 선택자들을 찾는 어떠한 또다른 메서드가 있고

오로지 하나의 요소만 리턴한다면
즉 여러분의 CSS 선택자가

오로지 하나만을 선택한다는 것을 알고 있다 가정하면

실제로는 이것은 전혀 유용하지 않아요

왜나하면 여러분은 보통 이런 경우에
사용할 수 있는 ID를 가지고 있기 때문이죠

하지만 만일에 경우에 대비해서
이러한 것도 여러분들에게 보여드릴게요

여기서 'getElementById'대신에

'document.querySelector("'를 입력하고

실제 쿼리(query)를 위해서 이것에
단순히 '#'을 추가하여 ID로 만들어줍니다

짜잔~

보시는 것과 같이 이것은 오직 하나만을 선택한다는 것을 빼고는

'querySelectorAll()' 와 매우 비슷합니다

그리고 한 요소만을 리턴할 것으로 예상할 수 있는
몇몇의 CSS 선택자를 넘겨 줄 수 있습니다

그러면 언제 여러분은 이러한 도구들을 사용해야할까요?

첫번째로 제가 여러분에게 보여드렸듯이
수행하기 더 나은 경향이 있습니다

그러므로 저는 가능한한
이것을 사용하기를 추천합니다

하지만 만일 여러분이 보다 복잡한 CSS 선택자를
사용해야만 하는 상황이라면

그때는 이것을 사용할 수 없지만
'querySelectorAll()' 이 좋은 방법이 될거에요

다음 시간에 이러한 것을 사용해보도록 할게요

그러면 이 웹페이지를 손 볼 수 있는
더 많은 방법들을 볼 준비를 하세요