[JavaScript] JSP와 Document 객체의 관계 정리

📘 JSP와 Document 객체의 관계 정리

---

🧩 Document란?

서버(JSP)가 HTML + JavaScript 코드를 만들어 브라우저로 보내면,
브라우저는 HTML 문서를 DOM(Document Object Model) 구조로 메모리에 올립니다.

이때,
자바스크립트는 document 객체를 통해 이 DOM 구조에 접근할 수 있습니다.

💡 정리:
document는 자바스크립트가 HTML 구조에 접근하기 위해 필요한 객체입니다.

---

💻 JSP와 Document의 관계

구분설명

JSP	서버 측에서 실행되는 코드로, HTML을 생성하여 클라이언트(브라우저)에 전달
Document	클라이언트(브라우저)에서 실행되는 JavaScript 객체로, HTML 문서(DOM)에 접근할 때 사용

즉, JSP는 화면을 만드는 쪽(서버),
Document는 그 화면을 조작하는 쪽(클라이언트) 이라고 볼 수 있습니다.

---

📄 Document 예시

 

<form name="loginForm" id="loginForm"> <input type="text" name="userId" id="userId" value="limhyun"> <input type="password" name="password" id="password" value="1234"> <button type="button" onclick="document_test()">확인</button> </form>

---

🧠 사용 예시

 

function document_test() { // 방법 ① name 기반 접근 let id1 = document.loginForm.userId.value; // 방법 ② forms[] 배열 접근 let id2 = document.forms["loginForm"].elements["userId"].value; // 방법 ③ getElementById 접근 (요즘 방식) let id3 = document.getElementById("userId").value; console.log(id1, id2, id3); }

---

🔍 각 접근 방법 설명

✅ 방법 ① document.formName.inputName.value

• 형식: document.formName.inputName.value
• 의미: name="formName" 인 <form> 안에 있는
  name="inputName" 인 <input> 요소의 값을 가져온다.
• 예시:
•  
  document.loginForm.userId.value; // "limhyun"

✅ 방법 ② document.forms[] 배열 접근

• 형식: document.forms["폼이름"].elements["입력요소이름"].value
• 예시:
•  
  document.forms["loginForm"].elements["userId"].value;
• 명시적이고 안전한 방법.
  폼 이름이 중복되거나 DOM 구조가 복잡해도 정확하게 접근 가능.

✅ 방법 ③ document.getElementById("id")

• 형식: document.getElementById("요소id").value
• 예시:
•  
  document.getElementById("userId").value;
• 가장 일반적이고 표준적인 방식.
  현재는 이 방식이 권장됩니다.

---

🧾 정리 표

구분접근 방식특징

방법 ①	document.formName.inputName.value	고전 방식, 빠르지만 name 중복 시 문제 가능
방법 ②	document.forms["formName"].elements["inputName"].value	명시적이고 안정적
방법 ③	document.getElementById("id").value	현대적 표준 방식, 유지보수 용이

---

💬 결론

• document 객체는 HTML 문서(DOM)에 접근하기 위한 자바스크립트의 시작점
• JSP는 HTML을 만들어 브라우저로 보내는 서버 역할,
  Document는 그 HTML을 제어하는 클라이언트 역할
• 최신 개발에서는 document.getElementById() 나 querySelector() 같은
  표준 DOM 접근 방식을 사용하는 것이 가장 바람직합니다.

---

📌 한 줄 요약

document는 브라우저가 HTML 문서를 메모리에 올려둔 “DOM”에 접근하기 위한 자바스크립트 객체이며,
JSP가 생성한 HTML을 제어·조작할 때 반드시 필요한 연결 다리입니다.

---