1. HTML DOM
- 웹 페이지에 작성된 HTML 태그 당 객체(DOM 객체) 생성
- 목적 :HTML 태그가 출력된 모양이나 콘텐츠를 제어하기 위해
DOM 객체를 통해 각 태그의 CSS3 스타일 시트 접근 및 변경
HTML 태그에 의해 출력된 텍스트나 이미지 변경
2. DOM 트리
- HTML 태그의 포함관계에 따라 DOM 객체의 트리(tree) 생성
- DOM 트리는 부모 자식 관계
3. DOM 객체
- DOM 트리의 한 노드
- HTML 태그 당 하나의 DOM 객체 생성 : DOM 노드(Node), DOM 엘리먼트(Element) 라고도 불림
4. DOM 트리의 특징
- DOM 트리의 루트는 document 객체
- DOM 객체의 종류는 HTML 태그 종류만큼
- HTML 태그 당 DOM 객체가 하나씩 생성
- HTML 태그의 포함관계에 따라 DOM 트리에 부모 자식 관계
5. 브라우저가 HTML 태그를 화면에 그리는 과정
- 브라우저가 DOM 트리의 틀(document 객체) 생성
- 브라우저가 HTML 태그를 읽고 DOM 트리에 DOM 객체 생성
- 브라우저는 DOM 객체를 화면에 출력
- HTML 문서 로딩이 완료되면 DOM 트리 완성
- DOM 객체 변경 시, 브라우저는 해당 HTML 태그의 출력 모양을 바로 갱신
6. HTML 태그
- 엘리먼트(element)로도 불림
- 5 가지 요소로 구성 : 엘리먼트 이름, 속성, CSS3 스타일, 이벤트 리스너, 콘텐츠(innerHTML)
7. DOM 객체는 5 개의 요소 구성
- 프로퍼티(property) : HTML 태그의 속성(attribute) 반영
- 메소드(method) : DOM 객체의 멤버 함수로서, HTML 태그 제어 가능
- 컬렉션(collection) : 자식 DOM 객체들의 주소를 가지는 등 배열과 비슷한 집합적 정보
- 이벤트 리스너(event listener) : HTML 태그에 작성된 이벤트 리스너 반영, 약 70여 개의 이벤트 리스너를 가질 수 있음
- CSS3 스타일 : HTML 태그에 설정된 CSS3 스타일 시트 정보를 반영, DOM 객체의 style 프로퍼티를 통해 HTML 태그의 모양 제어 가능
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="firstP" style="color:black; background: lightseagreen;"
이것은 <span style="color: lightsalmon;">문장입니다.</span>
</p>
<script>
var p = document.getElementById("firstP");
var text = "p.id = " + p.id +"\n";
text+="p.tagName = " +p.tagName+"\n";
text+="p.childElementCount = " +p.childElementCount+"\n";
text+="p.onclick = " +p.onclick+"\n";
text+="너비 = " +p.offsetWidth+"\n";
text+="높이 = " +p.offsetHeight+"\n";
alert(text);
</script>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
8. DOM 객체 다루기
- DOM 객체 구분, id 태그 속성
- DOM 객체 찾기, document.getElementById()
- DOM 객체의 CSS3 스타일 동적 변경
CSS3 스타일 프로퍼티는 다음과 같이 사용
background-color 스타일 프로퍼티 -> backgroundColor
font-size 스타일 프로퍼티 -> fontSize
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 스타일 동적변경</title>
<script>
function change(){
var span = document.getElementById("mySpan");
}
function change1(){
var span = document.getElementById("mySpan");
}
</script>
</head>
<body>
<h3>CSS 스타일 동적변경</h3><hr>
<p style="color:grey" >이것은
<span id="mySpan" style="color: lightcoral">문장입니다. </span>
</p>
<input type="button" value="스타일 변경" onclick="change()">
<input type="button" value="되돌리기" onclick="change1()"
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
9. innerHTML 프로퍼티
- 시작 태그와 종료 태그 사이에 들어 있는 HTML 콘텐츠
- innerHTML 프로퍼티 수정 -> HTML 태그의 콘텐츠 변경
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function change(){
var p = document.getElementById("firstP");
p.innerHTML = "나의 <img src='media/강아지.jpg'>강아지"
}
</script>
</head>
<body>
<p id="firstP" style="color:lightseagreen;" onclick="change()">여기를
<span style="color: lightcoral;">클릭하세요.</span>
</p>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
'화면구현' 카테고리의 다른 글
| document.write()와 document.writeln() (0) | 2020.03.12 |
|---|---|
| this, document, DOM 객체 찾기 (0) | 2020.03.12 |
| (Javascript) Date 객체, String 객체, Math객체, object 객체 (0) | 2020.03.11 |
| (Javascript) 배열 (0) | 2020.03.11 |
| (Javascript)객체 (0) | 2020.03.11 |
rss