[javascript] DOM Selector --- 자바스크립트, DOM 셀렉터
document.querySelector()
vanilla javscript에서 DOM element를 찾는 방법이 몇가지 있는데, 가장 흔한게
document.querySelector()이다. 이 메서드는 css 셀렉터를 사용하고 그 셀렉터랑 일치하는 첫번째 엘리먼트를 return한다. 으뜨케 쓰는지 한번 보자.
1
2
3
|
var mySelector = document.querySelector('.my-selector');
var paragraph = document.querySelector('p');
var hidivenInput = document.querySelector('input[type="hidiven"]');</code>
| cs |
document.querySelectorAll()
만약에 첫번째 엘리먼트가 아니라 css셀렉터랑 일치하는 페이지의 모든 엘리먼트를 지정하고싶다면,
배열 형태이기 때문에 저 상태로는 바로 셀렉터로 사용할 수 없다.
보통 for문이나 for of문을 사용한다.
최신 브라우저에서는
document.querySelectorAll()을 사용하면된다. 이 메서드는 노드리스트 형태로 return한다. 으뜨케 쓰는지 한번 보자.
1
2
3
|
var headings = document.querySelectorAll('h1');
var listLinks = document.querySelectorAll('li a');
var items = document.querySelectorAll('.my-selector > p strong');
| cs |
1
2
3
4
5
6
7
8
|
var headings = document.querySelectorAll('h1');
for (var i = 0; i < headings.length; i++) {
var heading = headings[i];
// do something with heading here
}
for (var heading of headings) {
// do something with heading here
}
| cs |
forEach() 메서드도 쓸 수 있다.
1
2
3
4
|
var headings = document.querySelectorAll('h1');
headings.forEach(function(heading) {
// do something with heading here
})
| cs |
그밖에
id값과 일치하는 첫번째 요소를 받는
document.getElementById(), 클래스값과 일치하는 요소들을 HTML Collection으로 받는 document.getElementsByClassName(), 태그 이름과 일치하는 요소들을 실시간으로 HTML Collection으로 받는 document.getElementsByTagName()가 있다.getElementsByTagName()과 querySelectorAll()의 차이는 getElementsByTagName()은 dom에 변화가 생겼을 때 실시간으로 값을 받는다.
댓글
댓글 쓰기