<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title> DOM Script</title>
</head>
<body>
<div id = "7-0_DOMScript">
<h3>DOM Script</h3>
<p>
HTML문서에 접근하여 내용물을 조작하거나 새 객체를 만들어 원하는 부위에 삽입할 수 있음.<br/>
Document Object Model - 문서객체모델 - HTML과 XML문서에 대한 프로그래밍 인터페이스<br/>
Document Object - DOM Object의 최상위 객체 <br/>
Element Object - 문서에 삽입되어 태그로 만들어진 모든 요소<br/>
Attribute - Element가 가진 속성<br/>
Node - 객체를 상징하며 엘리먼트, 애트리뷰트, 엘리먼드 내부의 글 모두가 노드이다.<br/>
API - 명령이나 정보와같은 리소스를 외부에서 접근할 수 있도록 해주는 통로<br/>
</p>
</div>
<div id = "7-1_DocumentObj">
<h3>7-1_DocumentObj.js</h3>
<script type = "text/javascript" src = "7-1_DocumentObj.js"></script>
<button type = button onclick = "myFunc();">새창 열기</button>
</div>
<div id = "7-2_DocumentObj2">
<h3>7-2_DocumentObj2.js</h3>
<script type = "text/javascript" src = "7-2_DocumentObj2.js"></script>
<button type = button onclick="Controller.show();">열기</button>
<div id = "container" style = "background: red; display: none;">
<button type = button onclick="Controller.hide();">닫기</button>
</div>
</div>
<div id = "7-3_Tag">
<h3>7-3. 자바스크립트에서 태그 직접 사용하기</h3>
<script type ="text/javascript" src = "7-3_Tag.js"></script>
</div>
<div id = "7-4_DOMAPI">
<h3>7-4. DOM API이용해보기</h3>
<p>생성된 내용은 "appendChild"에 의해 가장 아래 생성된다. </p>
<script type = "text/javascript" src = "7-4_DOMAPI.js"></script>
<button onclick="createTag1();">객체생성 A</button>
<button onclick="createTag2();">객체생성 B</button>
</div>
<div id = "7-5_getElement">
<h3>7-35. getElementBy...</h3>
<script type ="text/javascript" src="7-5_getElement.js"></script>
<button onclick="selectById()">getElementById("eleA")</button><br/>
<button onclick="selectByTagName()">getElementsByTagName("span")</button><br/>
<button onclick="selectByName()">getElementsByName("eleA")</button><br/>
<button onclick="reset()">Reset</button><br/>
<div>
<span id = "eleA" name = "eleA">ID: eleA, Name: eleA</span><br/>
<span id = "eleB" name = "eleB">ID: eleB, Name: eleB</span><br/>
<span id = "eleC" name = "eleC">ID: eleC, Name: eleC</span><br/>
<span id = "eleD" name = "eleD">ID: eleD, Name: eleD</span><br/>
<span id = "eleE" name = "eleA">ID: eleE, Name: eleA</span>
</div>
</div>
<div id="7-6_referencedObj">
<h3>7-6_관련된 객체 찾기</h3>
<script type = "text/javascript" src = "7-6_referencedObj.js"></script>
<div style ="border: 1px solid black; height: 100px;">
<p><button onclick="findParent(this);">부모 엘리먼트 찾기</button></p>
</div>
<button onclick="countChildren();">자식 노드의 갯수 구하기</button>
<div id = 'container' style ="border: 1px solid black; height: 100px;">
<span>SPAN Element</span>
<p>P Element</p>
</div>
</div>
<div id="7-7_attrObj">
<h3>7-7_AttributeObject</h3>
<script type="text/javascript" src="7-7_attrObj.js"></script>
<button onclick="viewAttr();">Show attribute information</button>
<div id = "testDiv" name = "testDiv_name" title = "Helper" style="background-color: #888; width: 100px; height: 100px;"></div>
</div>
<div id="7-8_modifyContent">
<h3>7-8_컨텐츠 내용물 바꾸기</h3>
<script type ="text/javascript" src="7-8_modifyContent.js"></script>
<button onclick="actionClick()">Change content</button>
<div id = 'content' style = "border: 1px solid black; heigt: 100px;">
<p>It is content.</p>
</div>
<button onclick="actionRemove(this)">Click this button to remove </button><br/>
<button onclick="actionReplace(this)">Click this button to replace </button>
</div>
</body>
</html>
7-0_DOMScript.html
7-6_referencedObj.js