자바스크립트에서 문서 객체 모델(DOM)을 사용하여 웹 페이지의 요소를 선택하고 조작할 수 있다. 이 글에서는 DOM을 사용하여 선택된 요소를 가져오는 방법에 대해 알아보겠다.

getElementById 메서드

getElementById 메서드는 페이지 내에서 특정 아이디를 가진 요소를 선택하는데 사용된다.

예제:

const element = document.getElementById('myElementId');

getElementsByClassName 메서드

getElementsByClassName 메서드는 특정 클래스를 가진 모든 요소들을 선택하는데 사용된다.

예제:

const elements = document.getElementsByClassName('myClassName');

getElementsByTagName 메서드

getElementsByTagName 메서드는 특정 태그명을 가진 모든 요소들을 선택하는데 사용된다.

예제:

const elements = document.getElementsByTagName('div');

querySelector 메서드

querySelector 메서드는 CSS 선택자를 사용하여 요소를 선택하는데 사용된다. 이 메서드는 가장 유연하고 강력한 선택자 메서드이다.

예제:

const element = document.querySelector('#myElementId');

querySelectorAll 메서드

querySelectorAll 메서드는 CSS 선택자를 사용하여 여러 요소를 선택하는데 사용된다.

예제:

const elements = document.querySelectorAll('.myClassName');

위의 메서드들을 사용하여 웹 페이지에서 원하는 요소를 선택하여 다양한 작업을 수행할 수 있다. DOM을 통해 웹 페이지의 동적인 변경과 상호작용을 구현할 수 있는데, 선택된 요소를 가져오는 것은 그 중요한 시작점이다.

참고 문헌:

• MDN Web Docs
• JavaScript.info