JavaScript23 요소의 위치와 크기 1. getBoundingClientRect();* 엘리먼트의 크기를 반환한다. Coding - 결과 2. Viewport* 문서의 내용 중 사용자에게 보여지는 부분을 의미한다. 이에따라 문서의 좌표와 Viewport의 좌표가 있다.* Viewport 좌표는 스크롤이 생기면 스크롤의 위치에 따라 요소의 위치가 달라진다.* 스크롤의 정도를 알고 싶으면 window.pageYOffset 속성을 사용하면 알 수 있다. (※ 구버전 웹브라우저는 scrollTop 속성 이용 ) - 사용 예* getBoundingClientRect의 top 속성과 window.pageYOffset의 값이 1초마다 출력 Coding 3. 문서의 좌표* Viewport의 좌표에 스크롤의 정도를 더하면 알 수 있다. // 위 예제의 함.. 2016. 10. 16. Text 객체 : 값 API 값 API * 텍스트 노드의 값을 가져오는 API - 예제 html css JavaScript - 결과 html css JavaScript TextNode * 실제 데이터가 저장되는 객체이다. * 공백과 줄바꿈도 텍스트 노드에 포함된다. 2016. 10. 16. Document 객체 Document 객체 * 웹브라우저에서는 HTMLDocument 객체로 사용된다. * 문서 전체를 대표하는 객체이다. 노드 생성 API LINK( 변경 API에 정리 ) * creatElement() * creatTextNode() 문서 정보 API * title : 문서의 제목 * URL : 문서의 UTL * referrer : 문서가 어떤 site를 경유해서 현재에 도착했는지에 대한 정보 * lastModified : 마지막으로 수정한 날짜 2016. 10. 16. 문자열로 Node 제어 ☆ 이전보다 좀 더 편리한 방법! innerHTML* 문자열로 자식노드를 만들거나 자식노드의 값을 읽어오는 기능을 제공한다. - 예제 >실행 화면 링크실행 화면 링크실행 화면 링크실행 화면 링크 2016. 10. 16. 이전 1 2 3 4 5 6 다음 반응형
