Searching For Elements

<h1> 태그 안에 class="hello"를 추가한다.

getElementByClassName("hello")를 사용하여 hello라는 class를 가진 <h1>태그의 요소를 변수 hellos에 저장했다.

console.log로 hellos를 호출하면 console창에 <h1>태그의 모든 elements가 나오는 것을 볼 수 있다.

 

div 내부에 h1을 생성해주고 그 안에 Grab me!라고 적은 코드로 바꿔보자.

그리고 모든 <h1>태그를 console창에 띄우는 코드를 입력해보면

이렇게 <h1>만 하나 들어있는 array가 나왔다.

즉, getElementsByTagName()을 통하여 div, section, button 같은 다양한 태그들을 불러올 수 있다.

 

가장 현명하게 element를 가져오는 방법은(주관적) querySelctor와 querySelectorAll인데, querySelctor는 element를 css방식으로 검색할 수 있다.

무슨 말이냐면, hello는 class 내부에 있는 h1을 가지고 올 수 있다는 것이다. 

그래서 우리는 CSS selector를 사용하여 class hello를 찾고 그 안에 있는 h1을 가져오라는 것을 이렇게 작성할 수 있다.

그러면 이렇게 성공적으로 가져온 것을 볼 수 있다.

 

※ (".hello h1") 에서 . 을 사용하는 이유는 이것이 CSS selector이기 때문이다.

→ getElementByClassName() 함수를 사용할 때는 Js에서 우리가 class name을 넘겨준다는 것을 알기 때문에 hello만 입력했지만, querySelctor에서는 hello가 class name이라는 것과 그 안의 h1을 명시해줘야 한다.

 

만약 같은 태그가 총 3개이고

3개를 모두 가져오고 싶다면 selector 안의 조건에 부합하는 모든 element를 가져다 주는 querySelctorAll() 을 사용하면 된다.

querySelctorAll이 세 개의 h1이 들어있는 array를 가져다 줌

또 first-child를 이용하여 첫 번째로 검색된 element만 반환되게 할 수도 있다.

첫 element만 반환한 모습

만약 id를 사용하여 찾더라도 querySelctor를 이용하면 된다.(id는 #)

즉, 이 두 개의 코드는 같은 역할을 한다.

하지만 여기서 h1 태그를 가져오거나 hello라는 id 하위의 form을 가져오는 것들은 querySelector만 할 수 있다.