Dom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DOM 의 조작</title>
<script>
window.addEventListener("load", setup, false);
function setup(){
//window.document.addEventListener("click", myclick, false);
document.getElementsByTagName("body")[0].addEventListener("click", myclick, false);
}
function myclick(){
var newElement = document.createElement("p"); //p태그 생성
var newTextElement = document.createTextNode("이것은 자바스크립트에 의해 생성된 단락입니다."); //노드 생성
document.getElementsByTagName("body")[0].appendChild(newElement).appendChild(newTextElement); //p태그에 노드를 붙임
}
</script>
</head>
<body>
<h3>이것은 헤드라인태그입니다.</h3>
</body>
</html>
//body를 클릭하면 노드값을 계속 해서 만들어줌.
--------------------------------
Dom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> </title>
<script>
window.onload = function(){
document.getElementById('h3').addEventListener("click", myclick, false);
};
function myclick(){
var newObj = document.createElement('p');
var newTextElement = document.createTextNode('이것 역시 자바스크립트에 의해 생성된 단락입니다.');
var h3 = document.getElementsByTagName('h3')[0];
newObj.appendChild(newTextElement); //p태그에 노드를 붙임.
//document.getElementsByTagName("body")[0].insertBefore(newObj, h3);
//document.getElementsByTagName("body")[0].appendChild(newObj);
document.getElementsByTagName("body")[0].replaceChild(newObj, h3); //newObj는 p태그에 노드를 붙인 것을 말하며, 이것에서 h3를 바꿈.
};
</script>
</head>
<body>
<h3 id='h3'>이것은 헤드라인입니다.</h3>
</body>
</html>
-------------------------------
Dom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> DOM Demo </title>
<script>
function add(f){
var anchor = document.createElement('a');
//방법1.
anchor.href = f.url.value;
//방법2.
/*var href = document.createAttribute('href');
href.nodeValue = f.url.value;
anchor.setAttributeNode(href);*/
var siteName = document.createTextNode(f.irum.value);
anchor.appendChild(siteName);
var brObj = document.createElement('br');
var result = document.getElementById('result');
result.appendChild(anchor);
result.appendChild(brObj);
}
</script>
</head>
<body>
<form>
<label>사이트명 : <br />
<input type="text" name="irum" size="30"></label><br />
<label>URL : <br />
<input type="text" name="url" size="50"></label><br />
<input type="button" value="추가" onclick="add(this.form)">
</form>
<div id="result"></div>
</body>
</html>
//사이트명과 URL을 추가하면 자동으로 result 부분에 사이트명이 추가되고 그것에 URL anchor가 걸림.
-------------------------
Dom : 클릭하면 색 바뀌는. class를 바꿔가며
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> DOM Demo </title>
<style>
a{
text-decoration: none;
color:black;
font-size:1.2em;
}
div{
width:150px;
height:50px;
text-align:center;
}
div.yellow{
background-color: yellow;
border:4px dotted gray;
}
div.green{
background-color: green;
border:4px dotted gray;
}
div.pink{
background-color: pink;
border:4px dotted gray;
}
</style>
<script>
var box;
window.onload = function(){
box = document.getElementsByTagName("div");
var touch = document.getElementsByTagName("a");
touch[0].addEventListener("click", myclick, false);
};
function myclick(evt){
var styleName = box[0].getAttribute("class");
//alert(styleName);
switch(styleName){
case "yellow": box[0].setAttribute("class", "green"); break; //class="green"
case "green" : box[0].setAttribute("class", "pink"); break;
case "pink" : box[0].setAttribute("class", "yellow"); break;
}
}
</script>
</head>
<body>
<div class="yellow"><a href="#">Click Me!</a></div>
</body>
</html>
--------------------------------
Dom : 클릭하면 색 바뀌는 다른 방법으로. backgroundColor, borderStyle을 바꿔가며
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> DOM Demo </title>
<style>
a{
text-decoration: none;
color:black;
font-size:1.2em;
}
div{
width:150px;
height:50px;
text-align:center;
background-color: yellow;
border:4px dotted gray;
}
</style>
<script>
var box;
var count;
window.onload = function(){
box = document.getElementsByTagName("div");
var touch = document.getElementsByTagName("a");
count = 0;
touch[0].addEventListener("click", myclick, false);
};
function myclick(evt){
count++;
switch(count % 3){
case 0: box[0].style.backgroundColor= "yellow";
box[0].style.borderStyle="dotted"; break;
case 1 : box[0].style.backgroundColor = "pink";
box[0].style.borderStyle="solid";
break;
case 2 : box[0].style.backgroundColor = "green";
box[0].style.borderStyle="double";
break;
}
}
</script>
</head>
<body>
<div class="yellow"><a href="#">Click Me!</a></div>
</body>
</html>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
===================================
'Java & Oracle' 카테고리의 다른 글
| servlet , ubuntu 에 apache, tomcat 설치 (0) | 2014.06.10 |
|---|---|
| tomcat , apache & tomcat 연동 , servlet (0) | 2014.06.09 |
| 제품관리프로그램, dom : childNodes, nextSibling, attribute, 성적관리프로그램 (0) | 2014.06.05 |
| cookie , dom : 접근법 (0) | 2014.06.04 |
| 자바스크립트 function, select, checkbox, radiobox, 개인정보 샘플, location, history, useragent (0) | 2014.06.03 |