JavaScript에서 DOM 요소의 복잡한 선택자
좀 더 복잡한 작업을 해봅시다. 예를 들어, 다음과 같은 HTML 코드가 있다고 가정해 보겠습니다:
<div id="parent">
<input>
</div>
#parent 블록 내부에 있는
input에 대한 참조를 가져옵시다:
let elem = document.querySelector('#parent input');
console.log(elem);
보시다시피, 선택자 #parent input로
우리의 input을 얻었습니다. 실제로 이 CSS 선택자는
#parent 내부에 있는 모든 input과 일치합니다.
예를 들어, 두 개의 input이 있다고 가정해 봅시다:
<div id="parent">
<input value="1">
<input value="2">
</div>
그러면 CSS 코드에서 선택자 #parent
input를 작성하면 두 input 모두에
영향을 미칩니다:
#parent input {
color: red;
}
그러나 querySelector 메서드는
다르게 작동합니다. 항상 지정된 선택자와 일치하는
첫 번째 요소 하나만 가져옵니다.
예제를 통해 살펴보겠습니다. 클래스가
elem인 input이 있다고 가정해 보겠습니다:
<input class="elem">
<input class="elem">
이 input들 중 첫 번째 것을 가져옵시다:
let elem = document.querySelector('.elem');
console.log(elem); // 여기에는 첫 번째 input이 있을 것입니다
다음 HTML이 주어졌습니다:
<div id="block">
<p>1</p>
<p>2</p>
</div>
id가 block인 div에서
첫 번째 단락에 대한 참조를 가져오세요.
다음 HTML이 주어졌습니다:
<div class="block">
<p>1</p>
<p>2</p>
</div>
클래스가 block인 div에서
첫 번째 단락에 대한 참조를 가져오세요.
다음 HTML이 주어졌습니다:
<p class="www">text</p>
<p class="www">text</p>
클래스가 www인 첫 번째 단락에 대한
참조를 가져오세요.
