|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>removeChild, parentNode, replaceChild</title>
<script type="text/javascript">
onload=function(){
//부모 노드에서 자식 노드 삭제
document.getElementById("div").removeChild(p2);
//자식 노드에서 부모노드에 접근
document.getElementById("str").parentNode.parentNode.removeChild(p4);
var div = document.getElementById("str").parentNode.parentNode;
//삭제된 정보를 del변수가 가지고 있다
var del = div.removeChild(p1);
//다른 곳에 붙이기
document.getElementById("p5").appendChild(del);
//p태그 생성
var p = document.createElement("p");
var s = document.createTextNode("안녕");
p.appendChild(s);
var pp = document.createElement("p");
var ss = document.createTextNode("hello");
pp.appendChild(ss);
document.getElementById("div2").appendChild(p);
document.getElementById("div2").replaceChild(pp,p);
}
</script>
</head>
<body>
<div id="div">
<p id="p1"><span>안녕</span>하세요1</p>
<p id="p2"><span>안녕</span>하세요2</p>
<p id="p3"><span id="str">안녕</span>하세요3</p>
<p id="p4"><span>안녕</span>하세요4</p>
<hr/>
<p id="p5"></p>
</div>
<div id="div2">
</div>
</body>
</html> |
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>형제노드 : Sibling, next, previous</title>
<script type="text/javascript">
onload = function() {
var a = document.getElementById("a");
while(a){
if(a.nodeName=="DIV"){
a.innerHTML = "L2";
}else if(a.nodeName="SPAN"){
a.innerHTML = "S2";
}
a = a.previousSibling;
}
var b = document.getElementById("b");
while(b){
if(b.nodeName=="DIV"){
b.innerHTML = "L1";
}else if(b.nodeName="SPAN"){
b.innerHTML = "S1";
}
b = b.nextSibling;
}
}
</script>
</head>
<body>
<span>------------</span>
<div>X</div>
<div>X</div>
<div>X</div>
<div id="a">A</div>
<div id="b">B</div>
<div>Y</div>
<div>Y</div>
<div>Y</div>
<span>------------</span>
</body>
</html> |
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>유효성 검증</title>
<script type="text/javascript">
function send_go() {
/* if(document.f.name.value==""){} */
// 공백 검증
if(document.f.name.value.length==0){
alert("이름이 비어있네요");
document.f.name.focus();
return ;
}
// 데이터 길이검증
var s = document.f.username.value;
if(s.length >=6 && s.length<=8){
return true;
}else{
alert("문자길이를 맞춰주세요");
document.f.username.value="";
document.f.username.focus();
return ;
}
var phone = document.getElementById("phone");
}
</script>
</head>
<body>
<h3>회원가입</h3>
<form name="f">
이름 : <input type="text" id="name" /><br />
주소 : <input type="text" id="addr" /><br />
생일 : <input type="text" id="birthday" /><br />
아이디(6-8 문자) : <input type="text" id="username" /><br />
이메일 : <input type="text" id="email" /><br />
휴대폰 : <input type="text" id="phone" /><br />
<input type="button" value="회원가입" onclick="send_go()" />
</form>
</body>
</html> |
cs |
'HTML│CSS│Java Script' 카테고리의 다른 글
| html 1207 (0) | 2017.12.07 |
|---|---|
| html / css (0) | 2017.12.06 |
| html (0) | 2017.12.06 |
| html (0) | 2017.12.06 |
| html 예제 (0) | 2017.12.06 |
댓글