Fundamentals/Browser Mechanics

JavaScript와 HTML의 상호작용 그리고 DOM

sod0l 2024. 9. 9. 23:07
  1. 웹 페이지를 여는 과정:
    • 웹 브라우저: 웹 브라우저는 HTML 문서를 받아서 화면에 표시한다. 브라우저는 HTML 문서를 해석하여 화면에 보여주기 위해 내부적으로 문서를 처리한다.
  2. 문서 파싱:
    • 파싱(Parsing): 파싱은 브라우저가 HTML 문서의 텍스트를 읽어들이고 이해할 수 있는 구조로 변환하는 과정이다. 즉, HTML 문서의 텍스트를 읽어들여 브라우저가 이해할 수 있는 형식으로 변환한다.
    • 파싱이 끝나면 브라우저는 이 구조를 DOM(Document Object Model)이라고 부르는 형태로 변환한다.

DOM(Document Object Model)

  • DOM: DOM은 웹 페이지의 구조를 JavaScript가 이해하고 조작할 수 있는 형태로 표현한 것이다. DOM은 HTML 문서의 각 요소를 객체로 변환하며, 이 객체들을 통해 JavaScript가 페이지의 내용을 제어할 수 있다.

JavaScript의 역할

  1. JavaScript와 DOM의 상호작용:
    • 요소 찾기: JavaScript는 `document.querySelector`와 같은 메서드를 사용하여 DOM에서 특정 HTML 요소를 찾아낸다. 예를 들어, document.querySelector("#searchInput")는 id가 "searchInput"인 요소를 찾는다.
    • 이벤트 처리: JavaScript는 요소에 대한 이벤트(예: 클릭, 입력 등)를 처리할 수 있다. 예를 들어, 버튼을 클릭했을 때 특정 작업을 수행하도록 설정할 수 있다.
    • 내용 수정: JavaScript를 사용하여 HTML 요소의 내용이나 속성을 동적으로 변경할 수 있다. 예를 들어, 입력 필드의 값을 읽어서 페이지에 표시할 수 있다.

단계별 예시

  1. HTML 문서:
    • 이 HTML 문서에는 입력 필드와 버튼이 있다.
  2. html 코드 복사 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> </head> <body> <input type="text" id="searchInput" placeholder="Type something..."> <button id="searchBtn">Submit</button> <script src="script.js"></script> </body> </html>
  3. 브라우저가 문서를 파싱:
    • 브라우저는 이 HTML 문서를 읽어서 DOM으로 변환한다.
    • DOM은 입력 필드와 버튼을 각각 객체로 표현하여 JavaScript가 조작할 수 있게 한다.
  4. JavaScript 코드 (script.js):
    • document.addEventListener('DOMContentLoaded', ...): 이 코드는 HTML 문서의 로딩이 완료된 후에 실행된다. 즉, DOM이 완성된 후에 JavaScript가 작동하게 된다.
    • document.querySelector("#searchInput"): 이 코드는 DOM에서 id가 "searchInput"인 요소를 찾아 searchInput 변수에 저장한다.
    • searchBtn.addEventListener('click', ...): 이 코드는 버튼이 클릭되었을 때 입력 필드의 값을 가져와서 알림으로 표시한다.
  5. jsx 코드 복사 document.addEventListener('DOMContentLoaded', () => { const searchInput = document.querySelector("#searchInput"); const searchBtn = document.querySelector("#searchBtn"); searchBtn.addEventListener('click', () => { alert(searchInput.value); // 입력 필드의 값을 알림으로 표시 }); });

요약

  • 파싱: HTML 문서를 텍스트에서 DOM 구조로 변환하는 과정이다.
  • DOM: HTML 문서의 구조를 JavaScript가 조작할 수 있는 객체 형태로 표현한 것이다.
  • JavaScript: DOM을 통해 HTML 요소를 찾아내고, 이벤트를 처리하고, 내용을 수정하는 등의 작업을 수행한다.

이렇게 HTML과 JavaScript가 함께 작동하여 웹 페이지의 동작을 제어하게 된다.