JavaScript를 사용하면 Document Object Model (DOM)을 통해 HTML 요소를 선택하고 조작할 수 있습니다. 이를 통해 웹 페이지의 동적인 기능을 구현할 수 있습니다.

getElementById를 사용하여 단일 요소 선택하기

let element = document.getElementById('elementId');

위의 코드는 ID가 ‘elementId’인 HTML 요소를 선택하여 element 변수에 할당합니다.

querySelector를 사용하여 단일 요소 선택하기

let element = document.querySelector('.className');

위의 코드는 CSS 선택자를 사용하여 클래스가 ‘className’인 첫 번째 HTML 요소를 선택하여 element 변수에 할당합니다.

querySelectorAll을 사용하여 여러 요소 선택하기

let elements = document.querySelectorAll('p');

위의 코드는 ‘p’ 태그로 구성된 모든 HTML 요소를 선택하여 elements 변수에 NodeList 형태로 할당합니다.

getElementByClassName을 사용하여 여러 요소 선택하기

let elements = document.getElementsByClassName('className');

위의 코드는 클래스가 ‘className’인 모든 HTML 요소를 선택하여 elements 변수에 HTMLCollection 형태로 할당합니다.

요약

JavaScript를 사용하여 DOM에서 요소를 선택하는 방법에 대해 알아보았습니다. 이를 통해 웹 페이지의 요소를 선택하고 조작하여 동적인 기능을 구현할 수 있습니다.

더 많은 정보를 원한다면 다음 자료를 참고하시기 바랍니다.

• MDN web docs: Document Object Model (DOM)
• JavaScript.info: Document