BOM
BOM(Browser Object Model)은 웹 브라우저의 창이나 프레임을 다루는 객체 모델을 의미합니다. BOM은 웹 페이지와 상호작용하기 위해 제공되는 다양한 객체와 메서드를 포함하고 있습니다. 예를 들어, BOM을 사용하여 현재 창의 크기를 조정하거나, 새로운 창을 열거나 닫을 수 있습니다. 또한, 웹 브라우저의 히스토리를 조작하거나, 현재 URL을 가져오는 등의 기능도 BOM을 통해 사용할 수 있습니다.
// 현재 창의 너비와 높이 가져오기
var windowWidth = window.innerWidth || document.documentElement.clientWidth;
var windowHeight = window.innerHeight || document.documentElement.clientHeight;
// 창의 크기 출력
console.log("창의 너비: " + windowWidth + "px");
console.log("창의 높이: " + windowHeight + "px");
// 새로운 창 열기
function openNewWindow() {
window.open("http://www.example.com", "_blank");
}
// 현재 창 닫기
function closeWindow() {
window.close();
}DOM
DOM(Document Object Model)은 웹 페이지의 구조화된 표현을 제공하는 객체 모델입니다. DOM은 HTML, XML 또는 XHTML 문서를 트리 구조로 표현하여 문서의 각 요소에 대한 접근과 조작을 가능하게 합니다. 웹 페이지의 모든 요소(예: HTML 태그, 텍스트, 이미지)는 DOM의 노드(node)로 표현되며, 각 노드는 계층적인 관계를 가지고 있습니다. 이를 통해 JavaScript를 사용하여 DOM에 접근하고 수정할 수 있으며, 웹 페이지의 동적인 변경이 가능해집니다. 예를 들어, DOM을 사용하여 특정 요소의 내용을 변경하거나, 요소를 추가하거나 제거할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<h2 id="myHeading">안녕하세요!</h2>
<button onclick="changeText()">텍스트 변경</button>
<script>
function changeText() {
var heading = document.getElementById("myHeading");
heading.innerHTML = "반갑습니다!";
}
</script>
</body>
</html>