이전글
CSS 선택자를 이용한 DOM 탐색하기
HTML5 이전의 자바스크립트 DOM API는 DOM 객체를 탐색하는데 매우 불편함이 존재했습니다. 기껏해야 태그명, id, name 속성을 조건으로 검색하고 자식 또는 부모를 순회하는 방법을 사용해야 했습니다.
그래서인지 jQuery같은 DOM 탐색에 특화된 라이브러리는 거의 선택사항이 아니었던 것 같습니다. 그러나 HTML5에 와서는 자바스크립트에도 CSS 선택자를 통한 강력한 DOM 탐색 메서드들이 추가되었습니다.
|
document.querySelector(css 셀렉터)
document.querySelectorAll(css 셀렉터) |
cs |
메서드 이름에서 알 수 있듯이 모든 css 셀렉터 형식을 통해서 DOM을 검색할 수 있습니다. querySelector 메서드는 하나의 노드만을 리턴하며, querySelectorAll 메서드는 여러개의 노드를 배열로 리턴합니다.
ID로 검색하기
body태그의 DOM 구조가 다음과 같을때 id값이 'h1Tag'인 요소를 검색합니다.
|
<body>
<h1 id="h1Tag">Dom</h1>
<h1 id="h1Tag">Dom2</h1>
</body> |
cs |
id값을 통해 검색하는 경우에는 셀렉터로 id값 앞에 #을 붙여서 사용합니다.
|
<script>
window.onload = function () {
var h1_tag = document.querySelector('#h1Tag');
h1_tag.style.color = 'red';
}
</script> |
cs |
그런데 스크립트를 실행해보면 첫번째 h1 태그만 셀렉터로 잡혔다는 것을 알 수 있는데 querySelector() 메서드의 경우 하나의 노드만을 리턴하기 때문입니다.
만약 여러개의 노드를 배열 형태로 리턴받고 싶은 경우 querySelectorAll() 메서드를 사용합니다.
|
<script>
window.onload = function () {
var h1_tag = document.querySelectorAll('#h1Tag'); //배열 리턴
h1_tag[0].style.color = 'red';
h1_tag[1].style.color = 'green';
}
</script> |
cs |
그런데 재밌게도 id값을 기준으로 검색하여도 두 개의 노드를 가진 nodeList가 리턴됨을 알 수 있습니다.
class로 검색하기
HTML 태그의 속성으로 class가 존재합니다. class는 보통 CSS를 공통으로 적용하고 싶은 경우에 같은 class값을 적용하여 사용합니다. 저의 경우에는 자바스크립트를 통해 여러개의 DOM 객체를 class를 기준으로 검색하여 동시에 조작할 때 많이 사용합니다.
|
<body>
<h1 class="h1Tag">Dom</h1>
<h1 class="h1Tag">Dom2</h1>
</body> |
cs |
class를 기준으로 셀렉터를 사용하는 경우에는 클래스명 앞에 '.' 을 붙여줍니다.
|
<script>
window.onload = function () {
var h1_tag = document.querySelectorAll('.h1Tag');
h1_tag[0].style.color = 'red';
h1_tag[1].style.color = 'green';
}
</script> |
cs |
만약 다음과 같이 여러개의 클래스를 가진 요소가 있을 수 있습니다.
|
<body>
<h1 class="h1Tag myclass">Dom</h1>
</body> |
cs |
이때 두 개의 클래스 값을 모두 가지는 요소를 검색하는 경우 아래와 같이 두 개의 클래스를 붙여 셀렉터로 사용합니다.
|
document.querySelector('.h1Tag.myclass'); |
cs |
태그명으로 검색하기
태그명으로 DOM 객체를 검색할 때에는 셀렉터로 태그명을 그대로 사용하면 됩니다. 그대신 태그에서 '<', '>' 를 빼고 사용합니다.
|
document.querySelector('h1'); |
cs |
여러 종류의 셀렉터 같이 사용하기
셀렉터를 혼합하여 사용할 수 있습니다.
h1 태그이면서 id가 'h1Tag' 인 노드
|
document.querySelector('h1#h1Tag'); |
cs |
h1 태그이면서 class가 'h1Tag' 인 노드
|
document.querySelector('h1.h1Tag'); |
cs |
이밖에도 다양한 CSS 셀렉터를 통해 DOM을 탐색할 수 있으며, 더욱 세밀한 CSS 셀렉터 활용 방법이 궁금한 경우 다음글을 참조합니다.
'JavaScript' 카테고리의 다른 글
| [jQuery] jQuery $ 식별자 중복으로 충돌 방지하기 (0) | 2018.06.11 |
|---|---|
| [자바스크립트] 데이터 속성(data-xxx)에 대해 (1) | 2018.06.09 |
| [자바스크립트] CSS 선택자를 이용한 DOM 탐색하기 - 고급편 (0) | 2018.06.08 |
| [자바스크립트] 자바스크립트 DOM 요소 제거하기 (0) | 2018.06.08 |
| [자바스크립트] DOM 객체 스타일(style) 변경하기 (0) | 2018.06.08 |
도로락
IT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그