[Javascript] 특정 태그 선택하기

javascript에서 특정 태그, id, class를 가진 element에 접근하고 싶다면 어떻게 해야할까?

querySelector(), querySelectorAll() 메소드를 통해서 특정한 element에 접근이 가능하다.

See the Pen querySelectorAll() Example by EBEL21 (@ebel21) on CodePen.

위의 예제는 querySelectorAll() 함수를 이용해 특정 element의 색을 빨강색으로 바꾸는 예제이다.

첫 번째 input text에는 바꾸고 싶은 element의 tag, class, id의 이름을, 

두 번째 input text에는 tag, class, id등 어떤 속성인지를 구분해 써준다.

ex) A / tag, B / class

querySelector() 메소드는 괄호안에 CSS selector가 들어가며, 해당 selector와 일치하는 

가장 처음으로 출현하는 element를 return한다.

(CSS selector에 대한 문서첨부: https://www.w3schools.com/cssref/css_selectors.asp)

만약 특정 태그나 class를 가지는 모든 element에 접근하고 싶다면 querySelectorAll() 메소드를 통해 접근해야 하며, 

이 함수의 return값은 해당 selector와 일치하는 모든 element를 가진 배열 객체를 return한다.

따라서 querySelectorAll()을 통해 모든 element의 style을 바꾸고 싶다면 위의 예제처럼 for문을 통해서 배열 객체에 담긴 

모든 element의 style.color 값을 바꿔주어야 한다.

다만 위의 예제에서 list / tag, ol / tag를 작성하고 change color를 눌러 색을 변경한 후 reset color를 통해 다시 검은색으로 초기화시키고 다시 change color를 누르면 색깔이 다시 바뀌지 않는다. 이 부분은 왜그런지 모르겠네... li / tag는 다시 바뀌는데..