2012-5-24 DOM다루기[실습]

프로그래밍/JavaScript

2012-5-24 DOM다루기[실습]

조은성 2012. 5. 24. 16:08

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function insertP(){
var newP = document.createElement("p");//p태그 생성
newP.setAttribute("style", "background:blue");
var txt = document.createTextNode("새로운 라인");
newP.appendChild(txt);
var rootDiv = document.getElementById("root");
rootDiv.appendChild(newP);//마지막 자식노드에 추가해라
// rootDiv.insertBefore(newP, rootDiv.firstChild)//맨 첫 노드로 삽입
// rootDiv.insertBefore(newP, rootDiv.firstChild.nextSibling.nextSibling);//주석도 노드로 읽혀서 한번더 넣어줘야한다.

}
function deleteP(){
var rootDiv = document.getElementById("root");
rootDiv.removeChild(rootDiv.lastChild);//끝에 있는 노드 삭제
}
function deleteAllP(){
//div내에 있는 모든 자식노드 삭제
var rootDiv = document.getElementById("root");
while(rootDiv.hasChildNodes()){//노드가 있는 동안
rootDiv.removeChild(rootDiv.firstChild);// 처음 노드 지우기
}

}
function deleteAllP2(){
//div내에 있는 모든 자식노드 삭제
var rootDiv = document.getElementById("root");
rootDiv.parentNode.removeChild(rootDiv);

}
function modifyP(){
var rootDiv = document.getElementById("root");

}
function innerHTML_test(){
//innerHTML은 태그면 태그 텍스트면 텍스트까지 전부 보내줌
//하지만 innerText는 텍스트만 전부 보내줌
var rootDiv = document.getElementById("root");
var html = rootDiv.innerHTML;
alert(html);
document.getElementById("layer").innerHTML = html;
//document.getElementById("layer").innerHTML = "<font color=red>안녕</font>";
}
function innerText_test(){
// innerText는 텍스트만 전부 보내줌
var rootDiv = document.getElementById("root");
var html = rootDiv.innerText;
alert(html);

}
</script>
</head>
<body>
<div id="layer"></div>
--------------------------------------------------

<div id="root">
<p style="background: gray;">1번라인</p>
<p style="background: skyblue;">2번라인</p>
<p style="background: green;">3번라인</p>
<p style="background: red;">4번라인</p>
</div>
--------------------------------------------------<br>
<button onclick="insertP()">p태그추가</button>
<button onclick="deleteP()">p태그라스트삭제</button>
<button onclick="deleteAllP()">p태그자식모두삭제</button>
<button onclick="deleteAllP2()">p태그div삭제</button>
<button onclick="modifyP()">p태그수정</button>
<button onclick="innerHTML_test()">innerHTML</button>
<button onclick="innerText_test()">innerText</button>
</body>
</html>

* 결과보기