When calling a specific element of an HTML file with Javascript, two methods are often used among document properties.
Javascript로 HTML 파일의 특정 element를 호출할 때 document의 property 중 흔히 2가지 방법을 사용한다.
const elementId = document.getElementById("id");
const elementClass = document.getElementByClassName("class");
const elementTag = document.getElementById("tag");
const element = document.querySelector("selector");
const elementAll = document.querySelectorAll("selector");
If you use getElementBy, you must use a specific id and class name for each element. Therefore, it is fast, but if you find an element by tag name, it usually returns the result in an array, so it may be difficult to use a specific element.
getElementBy 를 이용하면 각각의 element 마다 특정한 id, class 이름을 사용해야 한다. 그렇기 때문에 속도는 빠르지만, tag name으로 element를 찾으면 보통 array로 결과를 리턴하기 때문에 특정 요소를 사용하기 어려울 수 있다.
Because querySelector uses CSS selector, you can specify the element exactly at the desired position. Instead, it can be slow because the selector becomes more complex.
querySelector 는 CSS selector 를 사용하기 때문에 원하는 위치의 element를 정확히 지정할 수 있다. 대신 selector가 아무래도 복잡해지기 때문에 속도가 느려질 수 있다.
Even if multiple elements are selected with querySelector at the same time, only the first element is returned. If you want to get all of them, you should use querySelectorAll.
querySelector 로 여러개의 element를 동시에 선택해도 제일 첫 번째 element만 리턴한다. 여러개를 모두 가져오고 싶으면 querySelectorAll 을 사용해야 한다.