Document Object Model (이하DOM)은 문서객체모델을 뜻하는 말로, html요소를 javascript를 이용해 제어하기 위해 사용한다. 아래는 문서객체모델의 메서드들, 특히 좌표와 관련된 것들이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="parents">
<div class="child">1</div>
<div class="child">2</div>
</div>
<script>
// window.innerWidth / window.innerHeight
// 현재 화면(Viewport)의 크기를 얻음
console.log(window.innerWidth); // 1107
console.log(window.innerHeight); // 719
// window.scrollX, window.scrollY
// 페이지의 최상단 기준, 현재화면의 수평 혹은 수직 스크롤 위치를 얻음
console.log(window.scrollX, window.scrollY);
// window.scrollTo(), E.scrollTo()
// 지정된 좌표로 대상을 스크롤
// 대상.scrollTo(X좌표, Y좌표)
// 대상.scrollTo({ top: Y, left: X, behavior: 'smooth'})
setTimeout(() => {
scrollTo({ top: 500, left: 0, behavior: 'smooth'});
}, 1000);
// E.clientWidth / E.clientHeight
// 테두리 선(border)을 제외한 요소의 크기를 얻음
const parentEl = document.querySelector('.parents');
const childEl = document.querySelector('.child');
console.log(parentEl.clientWidth, parentEl.clientHeight); // 215 43
console.log(childEl.clientWidth, childEl.clientHeight); // 215 22
// E.offsetWidth, E.offsetHeight
// 테두리 선을 포함한 요소의 크기를 얻음
console.log(parentEl.offsetWidth, parentEl.offsetHeight); // 215 43
console.log(childEl.offsetWidth, parentEl.offsetHeight); // 215 43
// E.offsetLeft, E.offsetTop
// 요소의 최상단 기준, 요소의 위치를 얻음
console.log(parentEl.offsetLeft, parentEl.offsetTop); // 8 8
console.log(childEl.offsetLeft, parentEl.offsetTop); // 8 8
</script>
</body>
</html>
자세한 건 mdn 문서를 참조하자.
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
DOM 소개 - Web API | MDN
이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한
developer.mozilla.org
'JAVASCRIPT' 카테고리의 다른 글
| [JavaScript] 동기/비동기 (콜백) (0) | 2023.04.21 |
|---|---|
| [JavaScript] JavaScript의 동작 원리 (0) | 2023.04.21 |
| [JavaScript] Document Object Model (DOM) - 3 (0) | 2023.04.21 |
| [JavaScript] Document Object Model (DOM) - 2 (0) | 2023.04.21 |
| [JavaScript] Document Object Model (DOM) - 1 (0) | 2023.04.21 |
