[JavaScript] 원하는 태그 선택하는 방법

Javascript를 통해 웹페이지를 다루기 위해서는 원하는 요소를 정확하게 선택할 수 있어야 한다. 

이러한 요소를 선택하는 방법에 대해 작성하였다.

 

👉 Id 명으로 요소 선택하기

let tag = document.getElementById( 아이디명 )

 

• 필요한 아이디를 가진 태그를 명확하게 선택할 수 있다.
• 만약 존재하지 않는 태그를 선택할 경우 null 값을 출력한다.

 

👉 Class명으로 요소 선택하기

let tags = document.getElementsByClassName( 클래스명 )

 

• 여러 개의 요소들이 배열의 형태 같이 저장된다.
• 배열의 형태 같지만 완벽한 배열의 형태가 아닌 유사 배열 객체(Array-Like Object) 임을 주의한다. 
• 요소들의 순서는 깊이에 상관없이  HTML의 위부터 아래의 작성된 순서대로 저장된다.
• 존재하지 않는 class 선택 시엔 빈 HTML collection 이 리턴된다.

 

👉 Tag명으로 요소 선택하기

let tag = document.getElementsByTagName( 태그명 )

 

실행 결과는 클래스명으로 선택했을 때와 동일하게 HTML Collection으로 유사배열 형태로 리턴된다. 

CSS의 모든 요소를 선택하는 " * " 를 이용해 모든 태그 선택이 가능하다.

 

 

👉 CSS 선택자로 요소 선택하기

let tag = document.querySelector( CSS 선택자 )

 

• 모든 요소가 출력되는 것이 아닌 HTML파일에서 가장 먼저 작성된 첫 번째 요소가 리턴된다. 
•  

‼️ 만약에 해당 CSS선택자의 모든 요소를 출력하고 싶다면?

let tags = document.querySelectorAll( CSS 선택자 )

 

• 존재하지 않는 요소를 선택할 경우 null값을 리턴한다.
• 하나의 메서드로 유연한 태그 선택이 가능하기 때문에 조금 더 활용도가 있는 querySelector의 사용을 추천한다.
• 하지만 다른 사람이 작성한 코드를 이해할 수 있어야 하므로 다른 사용 방법도 익히는 것이 좋다.