바닐라js 클론코딩하다가 강의에서 getElementById가 있는데 불구하고 querySeletor로 사용을 해서 둘이 같은 기능을 구현하는데 차이점이 무엇일까라는 궁금점을 시작으로 찾아보았다.
getElementById( )
element = document.getElementById(id);dom방식
id를 통해 element 반환
document에 구체적인 id의 element가 없다면 null반환
querySeletor( )
element = document.querySeletor(selector);css element 선택자로 쓰임(id, class 등의 다양한 선택자 사용 가)
selector와 일치하는 document안의 첫번째 element 반환 (여러개 반환시 querySeletorAll( ))
일치하는 것이 없다면 null반환
getElementById( ) 를 querySeletor( )로 통해 요소를 가져오고 싶다면
//element = document.getElementById(id);
element = document.querySeletor("#id");위와 같이 css방식으로 가져오면 된다
querySeletor를 통한다면 더 구체적으로 가져올 수 있다
또한,
getElementsByClassName( )과 querySeletorAll( )의 return type에서 차이가 존재한다
getElementsByClassName( ) - HTMLCollection에 return (index외에 name, id 속성으로도 접근 가능)
querySeletorAll( ) - NodeList에 return (index로만 접근 가능)
getElementsByClassName( )가 처리속도가 더 빠르다(약 1.2배 정도)
결론
구체적인 element를 선택하거나 여러 선택자를 사용할 수 있는 점에서 개인적으로 querySelector( )가 더 낫다고 생각된다.
속도가 중요하다면 dom형식으로 처리하겠으나 속도만 중요한 것이 아닌 편의성면에서 생각했을 때 단 하나의 속성에 국한되지 않고 여러 선택자를 사용할 수 있는 querySelector( )를 사용할 거 같다.
id 요소로 element 객체를 찾을 경우에는 getElementById( )를 사용하고 그 외는 querySelector( )사용!
(element객체를 찾기 위해 굳이 불필요하게 id를 부여할 필요없다!)
참고 : https://velog.io/@chloeee/getElementById-그리고-querySelector-차이점