이전글
자바스크립트 CSS 선택자를 이용한 DOM 탐색
HTML5 이전의 자바스크립트 DOM API는 DOM 객체를 탐색하는데 매우 불편함이 존재했습니다. 기껏해야 태그명, id, name 속성을 이용하는 정도였습니다. 그러나 HTML5부터는 jQuery같은 라이브러리를 사용하지 않고도 CSS 선택자와 필터를 이용한 강력한 DOM 탐색이 가능하게 되었습니다. 이번 글에서는 자바스크립트 자체 메서드로 CSS 셀렉터를 이용한 DOM 탐색 방법을 알아보겠습니다.
간단하게 id, class, 태그명 등을 이용한 탐색 방법은 이전글을 참조해주시기 바랍니다.
자바스크립트에서 제공하는 DOM SELECT API
이전글에서 설명했지만 간단하게 DOM 요소를 탐색하는 방법을 알아봅니다.
|
1
2
3
4 |
<body>
<h1>aaaa</h1>
<h1>bbbb</h1>
</body> |
cs |
위와 같은 DOM 구조를 가질 때 h1 요소들을 얻는 방법은 다음과 같습니다.
|
1
2
3
4
5
6 |
<script>
window.onload = function(){
var hTags = document.querySelectorAll('h1');
console.log(hTags);
}
</script> |
cs |
document 객체의 querySelectorAll() 메서드를 통해 요소를 얻으면 아래와 같이 요소들이 담긴 배열이 반환됩니다.
따라서 얻어온 각 DOM 객체를 다룰 때에는 hTags[0] 와 같이 사용합니다.
|
1
2
3
4
5
6 |
<script>
window.onload = function(){
var hTags = document.querySelectorAll('h1');
hTags[0].style.color = 'red';
}
</script> |
cs |
모든 요소 한꺼번에 탐색하기
모든 요소를 한꺼번에 탐색하기 위해서는 *(Asterisk) 를 사용합니다.
|
1 |
document.querySelectorAll('*') //현재 문서에 있는 모든 요소 |
cs |
특정 요소 아래에 있는 모든 요소를 선택할때도 역시 '*' 를 사용합니다. 예를 들어 body 하위의 모든 요소를 선택하는 경우는 다음과 같습니다.
|
1 |
document.querySelectorAll('body *') //body 하위의 모든 요소(자식, 손자 모두 포함) |
cs |
주의할점으로는 다음과 같이 '>' 를 사용하는 경우인데 위와 차이점은 바로 하위의 모든 자식(child) 요소만을 선택하느냐 아니면 자식보다 하위에 있는 요소들까지 선택하느냐의 차이가 있습니다.
|
1 |
document.querySelectorAll('body > *'); //body 하위의 모든 자식(child) |
cs |
선택자 여러개 동시에 사용하기
여러개의 선택자를 동시에 사용하고 싶은 경우 ',' 로 구분하여 사용합니다.
주의할 점 으로는 , 다음에는 다시 선택자 형식을 처음부터 지정해 주어야 한다는 점 입니다.
다음과 같이 p 태그 하위의 b 태그와, p 태그 하위의 userName이라는 아이디값을 가지는 요소를 동시에 탐색하고 싶은 경우 각각 p > 로 시작해 주어야 합니다.
|
1 |
document.querySelectorAll('p > b, p > #userName'); |
cs |
부모 자식 관계를 이용하여 DOM 탐색하기
모든 요소 탐색하기에서도 잠깐 설명하긴 했지만 DOM 구조의 부모 자식 관계를 통해 요소를 탐색할 수 있습니다. 예를 들어 "<p> 하위에 존재하는 <b> 태그들" 을 탐색할 수 있습니다.
|
1
2
3
4
5
6 |
<body>
<p>
가나다라마바사<br>
<b>아자차카타파하</b>
</p>
</body> |
cs |
다음과 같이 띄어쓰기 공백을 통해 'a b' 와 같이 사용하면 a 하위의 모든 b 요소를 얻을 수 있습니다.
|
1
2
3
4
5
6 |
<script>
window.onload = function(){
var bTag = document.querySelectorAll('p b');
console.log(bTag);
}
</script> |
cs |
'a > b' 와 같이 사용할 수도 있는데 '>' 를 사용하게 되면 바로 하위(자식)까지만 탐색하는 차이점이 있습니다.
|
1 |
var bTag = document.querySelectorAll('p > b'); |
cs |
결과입니다.
특정 속성을 가진 요소 탐색하기
조금 더 세밀하게 DOM을 탐색하자면 속성을 이용할 수 있습니다.
|
1
2
3
4 |
<span value="1">1</span>
<span>2</span>
<span value="3">3</span>
<span>4</span> |
cs |
만약 value 라는 속성을 가진 span 요소만 구하고 싶은 경우 다음과 같이 사용합니다.
형식은 [대상 속성명] 와 같이 사용합니다.
|
1 |
var bTag = document.querySelectorAll('span[value]'); |
cs |
이 밖에도 몇가지 형식이 더 있는데, 사용해보니 아직 적용되지 않는 셀렉터 문법들도 있는 것 같습니다. 아직까지는 jQuery같은 라이브러리들이 더욱 풍부하고 강력한 API를 제공하는 것이 현실이지만 자바스크립트 표준 API에도 이런 기능이 있다는 점을 알아두는 것도 나쁘지 않을 것 같습니다.
'JavaScript' 카테고리의 다른 글
| [자바스크립트] 데이터 속성(data-xxx)에 대해 (1) | 2018.06.09 |
|---|---|
| [자바스크립트] CSS 선택자를 이용한 DOM 탐색하기 - 기본편 (0) | 2018.06.08 |
| [자바스크립트] 자바스크립트 DOM 요소 제거하기 (0) | 2018.06.08 |
| [자바스크립트] DOM 객체 스타일(style) 변경하기 (0) | 2018.06.08 |
| [자바스크립트] DOM 객체 innerHTML 속성 (0) | 2018.06.08 |
도로락
IT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그