getElementById vs querySelector 의 차이점
페이지 정보
본문
# getElementById vs querySelector 의 차이점
1. getElementById, getElementsByClassName
- 속도 빠르다. querySelector 에 비해 1.2~1.3배
- id, class, tag, name 등등을 다 따로따로 사용해야 한다.
```
document.getElementById("id").innerHTML;
document.getElementsByClassName("class").innerHTML;
document.getElementsByName("name").innerHTML;
document.getElementsByTagName("tag").innerText;
```
- 여러개를 찾을 때는 getElementsBy*** 시리즈를 사용해야 한다.
2. querySelector, querySelectorAll
- 속도 비교적 느리다.
- querySelector 하나로 찾기가 가능하다.
```
document.querySelector("#id").innerHTML;
document.querySelector(".class").innerHTML;
document.querySelector("body").innerText;
document.querySelector('ul li.class').innerText;
```
- querySelector 는 선택한 요소 중 첫번째 요소 하나만 가져온다 !!!
- 여러개를 찾을 때는 querySelectorAll 을 사용한다.
1. getElementById, getElementsByClassName
- 속도 빠르다. querySelector 에 비해 1.2~1.3배
- id, class, tag, name 등등을 다 따로따로 사용해야 한다.
```
document.getElementById("id").innerHTML;
document.getElementsByClassName("class").innerHTML;
document.getElementsByName("name").innerHTML;
document.getElementsByTagName("tag").innerText;
```
- 여러개를 찾을 때는 getElementsBy*** 시리즈를 사용해야 한다.
2. querySelector, querySelectorAll
- 속도 비교적 느리다.
- querySelector 하나로 찾기가 가능하다.
```
document.querySelector("#id").innerHTML;
document.querySelector(".class").innerHTML;
document.querySelector("body").innerText;
document.querySelector('ul li.class').innerText;
```
- querySelector 는 선택한 요소 중 첫번째 요소 하나만 가져온다 !!!
- 여러개를 찾을 때는 querySelectorAll 을 사용한다.
추천0
댓글목록
등록된 댓글이 없습니다.