<!DOCTYPE html>
<html>
<head></head>
<body>
<h3>DOM 객체 P의 프로퍼티, 스타일, 이벤트 리스터</h3>
<hr>
<p id="firstP" style="color: blue; background: yellow" onclick="this.style.color='teal'">
이것은 <span style="color: red">문장입니다.</span>
</p>
<script>
var p = document.getElementById("firstP");
var text = "p.id" = p.id + "\n";
text += "p.tagName = " + p.tagName + "\n";
text += "p.innerHTML = " + p.innerHTML + "\m"
text += "p.style.color = " + p.style.color + "\m"
text += "p.onclick = " + p.onclick + "\m"
text += "너비 = " + p.offsetWidth + "\m"
text += "높이 = " + p.offsetHeight + "\m"
alert(text);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
function change() {
var span = document.getElementById("mySpan");
span.style.color = "green"; // 글자색 green
span.style.fontSize = "30px"; // 글자 크기 30px
span.style.display = "block"; // 블록 박스로 변경
span.style.width = "6em"; // 박스의 폭, 6글자 크기
span.style.border = "3px dotted magenta" // 3픽셀 점선 magenta 테두리
span.style.margin = "20px";
}
</script>
</head>
<body>
<h3>CSS 스타일 동적 변경</h3>
<hr>
<p style="color: blue"> 이것은
<span id="mySpan" style="color: red">문장입니다.</span>
</p>
<input type="button" value="스타일변경" onclick="change()">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div if="contents">
<img src="../images/apple.png">
<ul>
<li>
<label for="oPrice">원래 가격</label>
<input type="text" id="oPrice">원
</li>
<li>
<label for="rate">할인율</label>
<input type="text" id="rate">%
</li>
<li>
<button onclick="showPrice()">할인 가격 계산하기</button>
</li>
</ul>
<div id="showResult"></div>
</div>
<script>
function showPrice() {
var originPrice = document.querySelector('#oPrice').value; // 원래 가격
var rate = document.querySelector('#rate').value;
var savedPrice = originPrice * (rate / 100);
var resultPrice = originPrice - savedPrice;
document.querySelector('#showResult').innerHTML
= "상품의 원래 가격은 " + originPrice + "원이고, 할인율은 " + rate + "% 입니다.<br>" + savedPrice + "원을 절약한 " + resultPrice + "원에 살 수 있습니다.";
}
</script>
</body>
</html>
현재 브라우저에 출력된 HTML 콘텐츠를 지우고 새로운 HTML 페이지 시작. 즉 document 객체에 담긴 DOM 트리를 지우고 새로 시작
현재 브라우저에 출력된 HTML 페이지 완성
더이상 document.write() 할 수 없음
<!DOCTYPE html>
<html>
<head>
<script>
var win = null;
function showHTML() {
if (win == null || win.closed)
win = window.open("", " outWin", "width = 300, height = 200");
var textArea = document.getElementById("srcText");
win.document.open();
win.document.write(textArea.value);
win.document.close();
}
</script>
</head>
<body>
<h3>HTML 문서 작성기 만들기</h3>
<hr>
<p>아래에 HTML 문서를 작성하고 버튼을 클릭해 보세요.
새 윈도우에 HTML 문서가 출력됩니다.</p>
<textarea id="srcText" rows="10" cols="50"></textarea>
<br>
<br>
<button onclick="showHTML()">HTML 문서 출력하기</button>
</body>
</html>