JavaScript에서 DOM 요소 가져오기
이제 페이지의 DOM 요소를 가져와서 나중에 어떤 작업을 수행하는 방법을 배울 것입니다.
다음과 같은 버튼이 있다고 가정해 봅시다:
<input id="button" type="submit">
이 버튼에 대한 참조를 변수에 가져와 봅시다.
이를 위해서는 특별한 객체 document의
메서드 querySelector를 사용해야 합니다.
이 메서드는 매개변수로 CSS 선택자를 받아
해당 선택자로 찾은 요소에 대한 참조를
반환합니다.
우리 버튼에는 값이 button인
속성 id가 있습니다. 따라서
선택자 #button로 이 버튼을
찾을 수 있습니다. 자, 이제 버튼을 찾아
변수에 대한 참조를 기록해 봅시다:
let button = document.querySelector('#button');
console.log(button);
다음은 3개의 단락입니다:
<p id="elem1">1</p>
<p id="elem2">2</p>
<p id="elem3">3</p>
각 단락에 대한 참조를 별도의 변수에 기록하고 각 변수의 내용을 콘솔에 출력하세요.
