Document 객체
TEXT객체
생활코딩
: p태그는 텍스트 객체Hello world
Hello world
값 API
텍스트 노드는 DOM에서 실질적인 데이터가 저장되는 객체
- html
- css
- JavaScript
조작API
<!DOCTYPE html>
<html>
<head>
<style>
#target{
font-size:77px;
font-family: georgia;
border-bottom:1px solid black;
padding-bottom:10px;
}
p{ margin:5px }
</style>
</head>
<body>
<p id="target">Cording everybody!</p>
<p> data : <input type="text" id="datasource" value="JavaScript" /></p>
<p> start :<input type="text" id="start" value="5" /></p>
<p> end : <input type="text" id="end" value="5" /></p>
<p><input type="button" value="appendData(data)" onclick="callAppendData()" />
<input type="button" value="deleteData(start,end)" onclick="callDeleteData()" />
<input type="button" value="insertData(start,data)" onclick="callInsertData()" />
<input type="button" value="replaceData(start,end,data)" onclick="callReplaceData()" />
<input type="button" value="substringData(start,end)" onclick="callSubstringData()" /></p>
</body>
</html>
문서의 기하하적 특성
문서의 엘리먼트의 크기, 위치, 스크롤 등을 제어하는 방법
<style>
body{
padding:0;
margin:0;
}
div{
border:50px solid #1065e6;
padding:50px;
margin:50px;
}
#target{
width:100px;
height:100px;
}
</style>
<div>
<div id="target">
Coding
</div>
</div>
문서 viewport
스크롤
<style>
body{
padding:0;
margin:0;
}
div{
border:50px solid #1065e6;
padding:50px;
margin:50px;
}
#target{
width:100px;
height:2000px;
}
</style>
<input type="button" id="scrollBtn" value="scroll(0, 1000)">
<script>
document.getElementById('scrollBtn').addEventListener('click', function(){
window.scrollTo(0, 1000); // x, y 좌표
})
</script>
<div>
<div id="target">
Coding
</div>
</div>
스크린 크기
스크린 크기의 정보가 중요한 이유 :
웹 페이지의 폭을 사용자의 정보를 수집해 의사결정에 도움이 됩니다.
출처 : 생활코딩 강의
'프로그래밍 > JavaScript' 카테고리의 다른 글
| 웹 브라우저 자바스크립트 이벤트(Event)와 네트워크 통신 (0) | 2017.12.01 |
|---|---|
| 웹 브라우저 자바스크립트 : 이벤트(Event) (0) | 2017.11.30 |
| 웹 브라우저 자바스크립트 : DOM(Document Object Model)2 (1) | 2017.11.28 |
| 웹 브라우저 자바스크립트 : DOM(Document Object Model) (0) | 2017.11.26 |
| 웹 브라우저 자바스크립트 : BOM(Browser Object Model) (0) | 2017.11.25 |