Javascript에서 HTML 요소에 접근하기 위해서는 DOM(Document Object Model)에 접근해야 한다. DOM을 제어할 수 있도록 도와주는 함수에는 여러 종류가 있다. 그 중, getElementBy...()을 사용하는 것과, querySelector...()을 사용하는 것의 차이점이 궁금하여 여러 자료를 찾아보았다. 우선, 간단하게 종류와 사용법부터 알아보자.
.getElementsByClassName()
해당 class를 가지고 있는 HTML 요소들을 모두 가져오는 메서드이다.
배열처럼 인덱스를 가지고 있으므로, 특정 요소 하나만 가져오고 싶다면,
getElementsByClassName[0]처럼 인덱스를 끝에 붙여주면 된다.
아래 예시를 보면 HTMLCollection을 반환하는 것을 볼 수 있다.
document.getElementsByClassName("box");
HTML Collection은 여러개의 HTML 요소를 담고 있는 자료형(Collection)으로, 배열과 비슷하다고 보면 생각하면 된다.
.getElementById()
.getElementsByClassName과 마찬가지로 HTML Collection 객체를 반환하고, id값을 통해 객체를 가져오는 함수이다.
.querySelector()
해당 id, class, tag를 가지고 있는 값들 중, 맨 처음 요소를 반환한다.
id, class, tagName 모두 인자값으로 들어갈 수 있기 때문에, 반드시 안에 #이나 .을 붙여주어야 한다. 태그를 값으로 넣을때는 아무것도 붙이지 않아도 된다.
document.querySelector(".box");
.querySelectorAll()
해당 id, class, tag를 가지고 있는 요소들을 모두 반환한다.
getElementsByClassName과 다르게 HTML Collection 형식이 아닌,
NodeList 형식으로 반환하는 것을 확인할 수 있다. NodeList는 여러개의 노드를 배열 처럼 모아둔 것이다.
document.querySelectorAll(".box");
결론적으로 getElementBy...과 querySelector의 가장 큰 차이는 HTML Collection을 반환하느냐, NodeList를 반환하느냐 그 차이인 것 같다. 그럼 이 두 반환 형식의 차이는 뭘까?
우선, 이 둘의 차이에 대해서 이해하기 위해서는 DOM Tree에 대한 이해가 필요하다.
DOM Tree
DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분한다.
✅ element가 가지고 있는 텍스트나 속성을 나타내는 노드들은
그 element 아래 자식 노드로 존재한다.
- 웹 문서의 태그는 요소(Element) 노드
- 태그가 가지고 있는 텍스트는 해당 태그의 자식 노드인 텍스트(Text) 노드
- 태그의 속성은 모두 해당 태그의 자식노드인 속성(Attribute) 노드
- 주석은 주석(Comment) 노드
<body>
<h1>Hello!</h1>
<p align="right">What is your name?</p>
</body>위의 코드를 DOM Tree로 나타내면 다음과 같다.
Tree를 보면 알 수 있듯이, h1의 텍스트는 textNode로서 h1의 자식으로 들어가있는 것을 볼 수 있다. 위 처럼 DOM Tree 구조를 확인하고 싶다면, 아래 사이트를 방문하는 것을 추천한다.
그래서 결국 HTML Collection과 querySelector의 차이는?!
getElementById를 비롯한 getElementBy... 함수들은 DOM의 노드 중에서 요소 노드(Element Node)까지만 접근할 수 있다.
하지만, querySelector와 querySelectorAll 함수는 그 Element Node뿐만 아니라, 그 아래에 있는 Text Node와 Attribute Node까지 접근할 수 있다.
위의 코드로 예시를 들자면, getElementById는 H1까지 접근 가능한 것이고, querySelector는 H1의 텍스트인 Hello까지 접근 가능한 것이다.
자바스크립트에서 Element까지만 접근해서 수정을 원한다면 getElementBy...를 사용하면 되고, 더 들어가서 요소의 텍스트나 속성을 변경하거나 새로운 노드를 추가하고 싶다면 querySelector 함수를 사용하는 것이 좋을 것이다.
아무래도 querySelector가 다양한 방면으로 요소를 활용할 수 있다 보니, 앞으로 코딩할 때는 querySelector를 더 자주 쓰게 될 것 같다.
