-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathjavascript_window.html
More file actions
142 lines (104 loc) · 4.87 KB
/
javascript_window.html
File metadata and controls
142 lines (104 loc) · 4.87 KB
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript Window Object</title>
<!-- <script>
// var output = '';
// for(var key in window){
// output += '['+key+']'+ window[key] +'\n';
// }
// console.log(output);
// 새로운 브라우저를 생성
//window.open();
// window.open('http://www.naver.com', 'newwindow', 'width=300', 'height= 400');
// var child = window.open('', 'child', 'width=350', 'height=300');
// var html = '<h1 onclick="self.close();">윈도우 닫기</h1>'
// child.document.write('<h1>부모 윈도우에서 텍스트를 추가</h1>'+html);
//console.log(screen);
// console.log(location);
// setTimeout(function(){
// location.href='http://www.naver.com'
//});
// if(confirm('네이버페이지로 이동하시겠습니까?')){
// location.href='http://www.naver.com';
// }
// console.log(navigator);
window.onload = function(){
// 태그 생성, 텍스트 생성 -> 태그에 텍스트를 붙여준다.
// h1 tag 생성
var header = document.createElement('h1');
// 텍스트 Node 생성
var text = document.createTextNode('Hello DOM');
// tag에 텍스트노드를 적용
header.appendChild(text); // <h1>Hello DOM</h1>
// body 태그에 h1 태그를 적용
document.body.appendChild(header);
// img 태그 생성 -> 속성도 적용
var img = document.createElement('img');
img.src = '../images/1.jpg';
img.width = 300;
img.height = 250;
img.setAttribute('src', '../images/1.jpg');
img.setAttribute('width', 300);
// 지정된 속성이 아닌 속성을 추가
img.setAttribute('data-role', 'image');
document.body.appendChild(img);
console.log(document.body.innerHTML);
console.log(document.body.innerText);
//document.body.innerText = '<h1>test</h1>';
document.body.innerHTML = '<h1>test</h1>';
};
</script> -->
<script>
window.onload = function(){
// HTML 문서에 작성된 태그 요소들을 캐스팅 -> 문서객체로 만드는 것.
var header1 = document.getElementById('header1');
var header2 = document.getElementById('header2');
console.log(typeof header1, header1.innerHTML);
console.log(typeof header2, header2.innerHTML);
header1.innerHTML = '안녕히계세요!!!';
header2.innerHTML = '<i>다음에 만나요!!!</i>'
header1.style.backgroundColor = 'red';
header1.style.color = 'white';
header1.style.padding = '10px';
var lang = document.getElementsByName('language');
console.log(typeof lang, lang);
var inputs = document.getElementsByTagName('input');
console.log(typeof inputs, inputs);
var checkbox = document.querySelector('#header2+input');
console.log(typeof checkbox, checkbox);
console.log(checkbox);
// 요소 삭제 : 부모 태그에서 자식 태그를 삭제
// 삭제 대상
var header3 = document.getElementById('header3');
// 삭제할 요소를 포함하는 부모태그
document.body.removeChild(header3);
var img = document.getElementById('img');
img.src = '../images/2.jpg';
}
/*
1. 태그요소의 동적 생성
1-1 태그 엘리먼트 객체를 생성
1-2 텍스트 노드 생성
1-3 태그에 텍스트 연결
1-4 삽입하고자 하는 위치의 부모 태그 캐스팅하고 추가
2. 정적 파일(html 문서에서 이미 만들어져 있는 요소)에서 생성
1-1. 캐스팅하는 메소드를 이용해서 문서객체로 만들기
1-2. 수정 -> 객체가 가지는 속성들을 이용해서 수정
1-3. 삭제 -> 부모태그에서 삭제 대상 태그를 삭제
*/
</script>
</head>
<body>
<h1 id="header1"><i>안녕하세요.</i></h1>
<h2 id="header2">반갑습니다.</h2>
<h2 id="header3">제거 대상</h2>
<input type="checkbox" name="language" value="java" checked>java <br>
<input type="checkbox" name="language" value="javascript" checked>javascript <br>
<input type="checkbox" name="language" value="html5">html5 <br>
<img id="img">;
</body>
</html>