반응형
<최종 화면> DOM 트리 요소 속성 변경, 노드 동적 생성
임의 이미지 파일 두개를 추가하여, 이미지에 대한 속성을 변경 해보자.
우선 버튼을 눌렀을 때, 이미지가 바뀌게 해보자.
요소 스타일 속성 변경에 대해서 알아보자.
p태그로 글을 쓰고, 버튼을 누르면 속성을 바꾸도록 하자.
요소에 일일이 스타일을 바꾸려니 코드가 너무 길어진다. 만약 바꾸려는 요소가 여려개면 color를 그만큼 써야한다...
클래스 속성을 이용해서 편하게 적용시키자.
처음부터 클래스 속성 변경을 하면, 바뀌지만 첫 번째 버튼을 누르고 클래스 속성으로 변경하는 두 번째 버튼을 누를시 적용이 안된다. (우선순위 때문에)
위와 같이 코드를 추가하면 두 버튼 동작이 잘된다.
이제 DOM트리의 노드를 동적 생성 및 추가해보자. 버튼 3개를 추가하고 하나씩 알아보겠다.
첫 번째 버튼은 노드를 생성하는 것이다.
그러나 TextNode로 추가하기 때문에, 태그를 요소로 해석 안된다.
아까는 링크가 안됐다. 이번에는 요소에 속성도 주고, 텍스트도 써서 링크를 걸어보자.
이제 remove 버튼 내용을 적어보자. (자식 삭제하기)
버튼을 누르면 글씨를 바꾸는 예인데, DOM 요소를 제어하는 메소드를 알아보자.
만약 요소가 여러개라면?
여러개중에 특정 요소에 찾아보자.
<복붙용 코드>
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 요소의 속성변경 -->
<!-- img요소 src속성 변경 -->
<button onclick="change()">button</button>
<script>
function change(){
}
</script>
<!-- 요소의 스타일 속성 변경 : Dom 트리 구조를 이용한 요소 접근법 -->
<p id="p1">this is paragraph.</p>
<input type="button" value="스타일변경" onclick="aaa(this)">
<script>
function aaa(e){
//button 위에 있는 p요소를 id 없이 찾기
var p=e.previousElementSibling;
p.style.fontWeight="bold";
p.style.fontFamily="cursive";
}
</script>
<!-- 스타일을 일일이 바꾸려니 코드가 너무 길어짐 -->
<!-- 그래서 클래스 속성을 이용해서 스타일을 한방에 변경시키는 방법을 선호함 -->
<style>
.kk{
color: blue;
font-weight: bold;
font-family: "cursive";
}
</style>
<button onclick="bbb()">클래스속성 변경으로 스타일 변경</button>
<script>
function bbb(){
// css의 우선 순위 문제 때문에 위 버튼에서 style 속성을 직접 넣은 스타일링 작업을 하면
// inline 스타일이 적용된 것이므로.. 별도의 css 스크립트를 사용한 것보다 우선순위가 높음!!
document.getElementById('p1').style=""; // 우선순위를 변경하고 싶다면.
document.getElementById('p1').className="kk"; //요소에 클래스 속성 값이 전달
}
</script>
<hr>
<!-- DOM트리의 노드를 동적 생성 및 추가 -->
<button onclick="addText()">add Text node</button>
<button onclick="addElement()">add Element node</button>
<button onclick="removeNode()">remove child</button>
<p class="pp"></p>
<script>
function addText(){
var node= document.createTextNode("This is text");
var node= document.createTextNode('<a href="">This is text</a>'); //태그를 요소로 해석안함!!
var target= document.getElementsByClassName('pp')[0];
//target.appendChild(node);
// 위 텍스트 노드 생성 및 append 작업을 편하게 하기 위해.
target.textContent='<a href="">This is text</a>';
}
function addElement(){
var node= document.createElement('a');
// 요소에 속성 노드 추가
var attr= document.createAttribute('href');
node.setAttributeNode(attr);
// 텍스트 노드 추가
var text= document.createTextNode('Google');
node.appendChild(text);
// 타겟에게 요소 추가
var target= document.getElementsByClassName('pp')[0];
//target.appendChild(node);
// node.insertBefore(node, target.firstChild);
// 요소를 쉽게 붙이는 다른 방법
target.innerHTML='<a href="">Google</a>';
}
function removeNode(){
var target= document.getElementsByClassName('pp')[0];
target.removeChild(target.firstChild);
}
</script>
<hr>
<!-- HTML5에서 새로 생긴 dom요소 제어 메소드: css의 선택자 표기법을 이용하여 요소 찾아오기 -->
<h3 id="ee">aaa</h3>
<button onclick="hhh()">button</button>
<script>
function hhh(){
// css의 선택자 표기법을 이용하는 메소드
var e=document.querySelector('#ee');
e.innerHTML="Hello world";
}
</script>
<!-- 찾아온 요소가 여러개일때.. -->
<hr>
<h4>aaa</h4>
<h4>bbb</h4>
<h4>ccc</h4>
<script>
// document.querySelector('h4'); //이렇게 사용하면 h4중에서 1개만 찾아짐 [첫 번째]
var es= document.querySelectorAll('h4');
es[0].onclick= function(){
alert('aa');
}
es[1].onclick= function(){
alert(this); // this : 클릭 이벤트를 발생하는 h4요소
}
es[2].onclick= function(e){
alert(e); // 기본 파라미터 e는 Mouse Event객체
}
</script>
</body>
</html>
|
반응형
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+Java script' 카테고리의 다른 글
| HTML+Java script (기초) 이벤트 처리, 정규표현식 (0) | 2019.12.17 |
|---|---|
| HTML+Java script (기초) BOM (0) | 2019.12.16 |
| HTML+Java script (기초) DOM (트리 구성 요소 제어 요소,속성,텍스트 ) (0) | 2019.12.16 |
| HTML+Java script (기초) Exception, throw (예외처리) (0) | 2019.12.13 |
| HTML+Java script (기초) Array (배열-정렬,추가,삭제,반복,객체<->json 변환) (0) | 2019.12.13 |
댓글