<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div { border:1px dotted black; margin:2px 2px; }
</style>
<script>
var li; //전역 변수 선언
var div1, div2, div3;
var ul;
window.onload=function(){
init();
div1.innerHTML = li.length;
div1.innerHTML += "<br/>" +li[0].innerHTML;
div1.innerHTML += "<br/>" +li[1].innerHTML;
div1.innerHTML += "<br/>" +li[2].innerHTML;
div2.innerHTML = "<br/> li[0].nodeName : "
+li[0].nodeName;
div2.innerHTML += "<br/> li[0].nodeType : "
+li[0].nodeType; //1:
div2.innerHTML += "<br/> li[0].nodeValue : "
+li[0].nodeValue; //null
div2.innerHTML += "<br/> li[0].length : "
+li[0].length; //undefined
div2.innerHTML += "<br/> li[0].name : "
+li[0].getAttribute("value");
// ul안에 li를 하나 추가하자
//1. 추가할 li엘리먼트를 만들자
newLI=document.createElement("li"); // <li> </li>
//2. text 노드를 만들자
textNode=document.createTextNode("텍스트 노드");
//3. li에 text노드를 차일드로 추가하기
newLI.appendChild(textNode); // <li> 텍스트 노드 </li>
//4. 만든 li를 ul안에 넣어주자
ul[0].appendChild(newLI);
//텍스트 노드의 정체를 확인해보자
// <li> <#text>~~~~</#text> </li>
alert(li[0].childNodes[0].nodeName); //#text
//이미지 노드를 만들어서 화면아래에 추가해보자~
img=document.createElement("img");//<img/>
img.src="http://static.naver.net/www/u/2010/0611/nmms_215646753.gif";//<img src =""/>
img.width="1000";//attribute셋팅할 때는 단위x
img.height="300";//<img src="~" height="300"/>
img.style.width="500px"; //style로 셋팅할 때는 단위넣기
document.body.appendChild(img);
//버튼을 만들어서 첫번째 div에 넣어보기
button=document.createElement("button");
buttonText=document.createTextNode("내가만든버튼");
button.appendChild(buttonText);
div1.appendChild(button);
button.onclick=function(){
alert(button.nodeName);
}
}
function init(){
li=document.getElementsByTagName("li");// 배열로 초기화
ul=document.getElementsByTagName("ul");// 배열로 초기화
div1=document.getElementById("div1");
div2=document.getElementById("div2");
div3=document.getElementById("div3");
}
</script>
</head>
<body>
<ul>
<li value="li의 첫번째 벨류"> 1 첫번째 </li>
<li name="li 두번째것의 네임"> 2 두번째</li>
<li> 3 세번째 </li>
</ul>
<div id="div1"> </div>
<div id="div2"> </div>
<div id="div3"> </div>
</body>
</html>