우리는 html의 element에 접근 하는 여러가지 방법을 배워볼 차례다. 앞서 우리는 getElementById를 배웠었다. 하지만? 우리는 id보단 class이름을 주구장창 쓸 것이다. id말고 class를 통해 요소를 얻어내는 방법은 없을까?

const myElement = document.getElementsByClassName("something");

console.log(myElement);

getElementsByClassName()을 이용해서 요소를 가지고 올 수 있다.

만일 something이 한 개가 아니고 여러개일 경우엔 어떻게 나올까?

<h1 class="something"> hello </h1>
<h1 class="something"> hello </h1>
<h1 class="something"> hello </h1>

이런 경우엔

h1의 태그 중에 class가 something인 요소를 3개를 모두 가져와서 array상태로 전달한다. 다른 함수도 마찬가지인데, getElementByTagName() 함수도 마찬가지다. 하지만 우리는 요소 하나만을 가지고 오고 싶다. 다른 함수는 없을까?

const myElement = document.querySelector('.something');

console.log(myElement);

만일 class가 something인 요소가 3개가 있을때 querySelector 함수를 이용하여 호출 했을 때는 array로 나오게 될까? 아니다 querySelector은 무조건 배열 중 맨 첫번째 요소만을 보여준다. 그리고 querySelector함수의 아주 멋진 부분은 element를 css방식으로 검색할 수 있단거다. 그렇기 때문에 something 앞에 class를 보여주는 .을 하나 찍어야 한다.

<div class="something">
	<h1> Hello there</h1>
</div>

const myElement = document.querySelector('.something h1');

console.log(myElement);

만일 이런 html을 가진 요소가 있다고 해보자. 우리는 앞서 querySelector css 형태로 요소에 접근 할 수 있다고 했다. 그렇기 때문에 .something안에 있는 h1태그를 가지고 오기 위해선 이런 방식을 써주면 된다. 만일 단일 요소를 리턴하는 querySelector 함수 말고 복수의 요소를 리턴하는 함수는 없을까? 그럴 땐 querySelectorAll() 을 써주면 된다.

마지막으로 querySelector과 getElementById의 표기법에 대해서 잘 알고가자.

document.querySelector("#hello"); //얘는 css형식으로 찾는거니까 앞에 # 이거 적어야함
document.getElementById("hello"); //애는 그럴 필요없으니까 class이름인 hello만 적어야함.