[JS-서기] JS 13강 - DOM (돔: Document Object Model 문서객체모델)

DOM 의미

tree (추리 = 트리 = 나무) 구조를 기반으로 특정 요소의 위치를 상대적으로 정의할 수 있는 형태 의미.

https://homzzang.com/b/js-59 참고

 

예제1 - 문서 해상도

 

바람직 X

 

<script>

document.write(outerWidth + ' x ' + outerHeight);

</script>

결과 보기

 
바람직 O

 

<script>

document.write(window.outerWidth + ' x ' + window.outerHeight);

</script>

결과 보기

※ 주의: 대소문자 구분해서 써야 함. (즉, 중간의 핑크색 부분은 반드시 대문자로 써야 함)

※ 두 예제 모두 결과는 같지만, 아래 예처럼 window 객체를 표시해서 써주는 게 바람직.

※ outterHeight 값은 브라우저 최상단에서 작업표시줄 바로 앞까지의 세로길이 의미함.

예제2 - 창크기 지정해 팝업창 띄우기

 

<div onclick="window.open('https://homzzang.com','hz','width=400px, height=300px')">

     홈짱닷컴 Homzzang.com

</div>

결과 보기

 

<div onclick="window.open('URL주소','창이름','창크기 등 옵션')">

     텍스트 또는 이미지

</div>


※ 창크기 옵션 지정 시 주의사항

1. px 단위는 생략해도 무방.
2. %단위는 사용 불가
3. 전체 크기는 fullscreen=yes 사용

window.open 사용법 더 자세히 보기

https://homzzang.com/b/js-1762 

※ 따옴표 사용에 주의 !! (전체 감싼 따옴표와 안에 사용한 따옴표는 달라야 함.)

현재 페이지 주소 얻기

<script>

window.alert(location.href); // 현재 페이지 URL 주소 얻기

</script>
 

결과 보기

window 객체의 메서드, 속성 더보기

https://homzzang.com/b/js?sca=Window