<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
<script type="text/javascript" src="log.js"></script>
<script type="text/javascript" src="showDom.js"></script>
</head>
<body>
<h1>최신영화</h1>
<span id="2012">2012</span>
<p>굿모닝프레지던트<span id="comedy">코미디</span></p>
<div>
<p>솔로이스트</p>
<span id="nonfiction">실화</span>
</div>
<div id="debugConsole" style="border:1px solid #000"></div>
</body>
</html>
----------------------------------log.js
function log(msg){
var console = document.getElementById("debugConsole");
if(console != null){
console.innerHTML += msg+"<br/>";
}
}
-------------------------showDom.js------------
window.onload = function(){
var rootNode = document.documentElement;
log("root 태그 : "+rootNode.tagName);
var bodyNode = document.getElementsByTagName("body").item(0);
log("body 태그 : "+bodyNode.tagName);
var spanList = document.getElementsByTagName("span");
log("span 태그의 개수 : "+spanList.length);
for(var i=0; i < spanList.length ; i++){
var span = spanList.item(i);
log((i+1)+"번째 span id : "+span.getAttribute("id"));
log((i+1)+"번째 span 노드 값 : "+span.firstChild.nodeValue);
}
var bodyLastChild = bodyNode.lastChild;
if(navigator.appName == "Microsoft Internet Explorer"){
log("body의 마지막 자식 노드 IE: "+bodyLastChild.nodeName);
}else{
log("body의 마지막 자식 노드 FE: "+bodyLastChild.previousSibling.nodeName);
}
var pList = document.getElementsByTagName("p");
var pNode = pList.item(0);
log("p노드의 첫번째 자식 노드 : "+pNode.nodeName+","+pNode.firstChild.nodeValue);
var pNode2 = pList.item(1);
log("p노드의 두번째 자식 노드 : "+pNode2.nodeName+","+pNode2.firstChild.nodeValue);
var divList = document.getElementsByTagName("div");
var div1Attr = divList.item(1).getAttribute("id");
log("div 노드의 id 속성 노드 : "+div1Attr);
}
