[JavaScript] document.getElement(s)By / querySelector 비교

getElement(s)By 와 querySelector 은 엘리먼트를 반환하는 메서드 이다.

상황에 맞게 사용할 수 있도록 차이를 알아두면 좋겠다는 생각이 들어 각 메서드에 대해 작성하게 되었다.

 

---

 

getElementById

• document 객체를 대상으로 id를 통해 엘리먼트를 반환한다. ( 반환값: 엘리먼트 객체 )
• 일치하는 엘리먼트가 없으면 null 반환.

 

getElementsByClassName

• document 객체를 대상으로 class를 통해 엘리먼트를 반환한다. ( 반환값: HTMLCollection )
• 일치하는 엘리먼트 없으면 빈 HTMLCollection 반환.

 

getElementsByName

• document 객체를 대상으로 name을 통해 엘리먼트를 반환한다. ( 반환값: NodeList )

 

getElementsByTagName

• document 객체를 대상으로 tag를 통해 엘리먼트를 반환한다. ( 반환값: NodeList )
• getElementsByTagName(*) = 모든 엘리먼트

 

---

querySelector

• document 객체를 대상으로  입력한 선택자와 일치하는 첫번째 엘리먼트 객체를 반환한다.
• ( querySelector(css선택자) = querySelectorAll(css선택자)[0] )
• 일치하는 엘리먼트가 없으면 null 반환.
• id, class, name을 제한 없이 사용 할 수 있다.
• 매개변수는 CSS 선택자.

 

querySelectorAll

• document 객체를 대상으로 입력한 선택자와 일치하는 모든 엘리먼트를 NodeList로 반환한다. 
• 일치하는 엘리먼트가 없으면 빈 NodeList 반환.

 

---

 

결론

 

성능을 우선시 한다면 속도가 빠른 getElementByID를 사용해야 한다고 한다.

성능보다 개발의 편의성과 생산성을 선호 한다면 CSS 선택자로 구체적인 엘리먼트를 선택할 수 있는 querySelector , querySelectorAll 사용도 고려해 볼 수 있다고 생각한다.

선호도에 따라 메서드를 선택해서 사용하면 될 것같다.

 

 

 

 

참고문헌: MDN 웹 API 문서