웹 개발을 하다 보면 DOM(Document Object Model)과 관련된 변수의 값을 확인해야 할 때가 많습니다. 이럴 때 console.log()와 document.getElementById() 메서드를 함께 사용하면 간단하게 해결할 수 있습니다.
콘솔에 변수를 표시하려면 document.getElementById("")를 사용하여 해당 요소를 가져온 뒤 출력하면 됩니다.
예제 코드
다음은 전체 코드 예시입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<input type="text" id="printTheData" value="My Name is David">
</body>
<script>
const data = document.getElementById("printTheData");
console.log(data);
</script>
</html>코드 설명
위 코드에서 핵심 부분은 다음 두 줄입니다.
document.getElementById("printTheData"): id가 "printTheData"인 HTML 요소(input 태그)를 선택합니다.console.log(data): 선택한 DOM 요소를 브라우저 개발자 도구 콘솔에 출력합니다.
만약 요소 자체가 아니라 input 태그에 입력된 값(value)을 출력하고 싶다면 다음과 같이 .value 속성을 추가하면 됩니다.
console.log(data.value); // 결과: My Name is David
실행 방법
위 프로그램을 실행하려면 파일 이름을 anyName.html(또는 index.html)로 저장한 후, VS Code 편집기에서 파일을 마우스 오른쪽 버튼으로 클릭하고 "Open with Live Server" 옵션을 선택하면 됩니다. Live Server 확장 프로그램이 설치되어 있지 않다면 VS Code 확장 마켓플레이스에서 간단히 설치할 수 있습니다.
출력 결과
프로그램을 실행하면 화면에 입력 필드가 표시됩니다.
브라우저에서 F12 키를 눌러 개발자 도구를 연 후 콘솔(Console) 탭을 확인하면 다음과 같이 해당 DOM 요소가 출력된 것을 볼 수 있습니다.
