과제로 웹페이지를 만들다가 Javascript를 사용하기 위해 인터넷을 검색하던 중 비슷하게 보이는 메소드들을 찾게 됐다. 실제로 내가 사용하는 범위 안에서는 무엇을 사용해도 같은 결과를 얻을 수 있었다. 그래서 무엇이 다른지에 대해 찾아보았다.
1. 차이
| 메소드 | 여러개일때 |
|---|---|
| querySelector('css 선택자') | 해당하는 첫번째 선택자 |
| querySelectorAll('css 선택자') | NodeList |
| getElementById('id') | 해당없음 |
| getElementsByName('name') | HTMLCollection |
| getElementsByTagName('tag') | HTMLCollection |
| getElementsByClassName('class') | HTMLCollection |
우선 querySelector(), getElementById()
이 둘 중 전자는 제일 첫번째 css 선택자, 후자는 id값으로 찾기 때문에 복수의 리턴값을 가질 수가 없다.
남은 메소드 중 querySelecotrAll()만 NodeList 객체를 반환하고,
나머지는 HTMLCollection 객체를 반환한다.
즉, querySelector*와 getElement*는 반환하는 객체가 다르다.
2. NodeList
NodeList 객체는 일반적으로 element.childNodes와 같은 속성(property)과 document.querySelectorAll 와 같은 메서드에 의해 반환되는 노드의 콜렉션입니다.
NodeList 가 Array 는 아니지만, forEach() 를 사용하여 반복할 수 있습니다. 또한 Array.from() 을 사용하여 Array 로 변환 할 수도 있습니다. 참고
- NodeList의 항목(item)은 index number로만 접근할 수 있다.
3. HTMLCollection
HTMLCollection 인터페이스는 요소의 문서 내 순서대로 정렬된 일반 컬렉션(arguments처럼 배열과 유사한 객체)을 나타내며 리스트에서 선택할 때 필요한 메서드와 속성을 제공합니다. 참고
- HTMLCollection은 name, id, index number 등으로 항목들에 접근할 수 있다.
4. 마무리
querySelector*와 getElement*의 차이가 궁금해서 찾아 보았는데 사실 둘을 혼용 하는 일은 없는 듯 하다. 어떤 개발자는 전자를, 어떤 개발자는 후자를 주로 사용한다고 한다. 이 둘의 사용빈도나 사용처는 아직 잘 모르겠지만, 대신에 NodeList와 HTMLCollection에 대해서 알게 되었다.
