반응형
JavaScript DOM API
SelectorsAPI라는 새로운 사양이 구현되면서, CSS 선택자를 이용하여 DOM을 조작할 수 있게 되었다.
SelectorAPI는 getElementByTageName 과 getElementById와 같은 DOM의 객체를 취득하는 메소드이다.
SelectorAPI
querySelector와 querySelectAll에 CSS셀렉터를 넘겨준다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div>Selector API</div> <p class="test-class">test class</p> <p id="test-id">test Id</p> <script> var div1 = document.getElementsByTagName('div'); var div2 = document.querySelectorAll('div'); console.log(div1); console.log(div2); var el1 = document.getElementById("test-id"); var el2 = document.querySelector("#test-id"); console.log(el1); console.log(el2); </script> </body> </html> | cs |
위의 코드를 보면 알 수 있듯이, getElementByTagName과 querySelectAll의 반환유형이 다른 것을 볼 수 있다.
- getElementById과 querySelector는 단일 Element객체를 반환
- getElementByClassName과 getElementByTagName은 배열처럼 동작하는 HTMLCollection 객체를 반환
- querySelectorAll은 NodeList를 반환
querySelector와 querySelectorAll의 차이
반환하는 요소가 한개이냐 여러개이냐의 차이이다.
querySelector의 경우, 선택자가 선택하는 요소의 첫번째 요소를 반환하고, querySelectorAll의 경우 모든 요소(NodeList)를 반환한다.
CSS선택자를 사용하면 기존의 DOM API보다 편리하기 DOM객체에 접근할 수 있다.
하지만 속도 면에서는 기존의 DOM API가 훨씬 빠르기 때문에, 사용할때 한번 더 고민해볼 필요가 있다.
(getElementById가 querySelector보다 성능이 더 뛰어남)
반응형
'프로그래밍 노트 > JAVASCRIPT' 카테고리의 다른 글
| [Javascript] 함수의 호출_3 (생성자로 호출, 생성자의 기능) (0) | 2018.11.27 |
|---|---|
| [Javascript] 함수의 호출_2 (메서드로 호출) (0) | 2018.11.27 |
| [Javascript] 함수의 호출_1 (함수로 호출) (0) | 2018.11.27 |
| [Javascript] 자바스크립트 함수에서 argument와 this (0) | 2018.11.27 |
| [Javascript] 함수 (0) | 2018.11.26 |
