우리는 저녁도 주말도 없다
DOM(Document Object Model)
웹 브라우저는 HTML 문서를 해석한 뒤, 내부적으로 트리 구조의 객체 모델을 생성하게 됩니다. 이 구조를 DOM(Document Object Model)이라고 부릅니다.
JavaScript는 이 DOM 구조를 활용하여 HTML 요소를 읽기, 추가, 수정, 삭제할 수 있도록 지원합니다.
예를 들어, 아래와 같은 HTML 문서가 있다고 가정합니다.
<html>
<body>
<h1>Hello</h1>
<p>Welcome!</p>
</body>
</html>위 문서는 브라우저 내에서 다음과 같은 DOM 트리 구조로 표현됩니다.
Document
└── html
└── body
├── h1 ("Hello")
└── p ("Welcome!")JavaScript를 통해 이 구조 내의 요소를 선택하고, 변경하거나 삭제하는 작업을 수행할 수 있습니다.
DOM 제어 기법
DOM을 제어하는 데 사용되는 주요 기법은 다음과 같습니다.
🧩 요소 선택
document.getElementById("id명");
document.getElementsByClassName("클래스명");
document.getElementsByTagName("태그명");
document.querySelector("CSS 선택자");
document.querySelectorAll("CSS 선택자");✍️ 요소 내용 및 속성 제어
element.innerText = "내용";
element.innerHTML = "<strong>HTML 포함 내용</strong>";
element.value = "입력값";
element.setAttribute("속성명", "값");
element.getAttribute("속성명");DOM 제어 예제
아래는 DOM을 제어하는 대표적인 예제들입니다.
🔹 예제 1: 버튼 클릭 시 텍스트 변경
<button onclick="changeText()">클릭</button>
<p id="text">기본 텍스트</p>
<script>
function changeText() {
document.getElementById("text").innerText = "변경된 텍스트입니다.";
}
</script>🔹 예제 2: input 입력값을 읽어 출력하기
<input id="nameInput" placeholder="이름 입력">
<button onclick="printName()">출력</button>
<p id="result"></p>
<script>
function printName() {
const name = document.getElementById("nameInput").value;
document.getElementById("result").innerText = `안녕하세요, ${name}님`;
}
</script>🔹 예제 3: 리스트에 항목 추가하기
<input id="itemInput" placeholder="항목 입력">
<button onclick="addItem()">추가</button>
<ul id="itemList"></ul>
<script>
function addItem() {
const text = document.getElementById("itemInput").value;
const li = document.createElement("li");
li.innerText = text;
document.getElementById("itemList").appendChild(li);
document.getElementById("itemInput").value = '';
}
</script>추천영화: 히든 피겨스
참고 사이트
https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%EA%B0%9D%EC%B2%B4_%EB%AA%A8%EB%8D%B8
개발자 지망생. 일단 하고보자