모던 웹을 위한 Javascript jQuery 책을 보면서 정리하는 내용이다.

관련글보기

[문돌이의 IT/JavaScript] - 자바스크립트 브라우저 객체 모델(javaScript BOM)


 문서객체모델 (DOM, Document Object Model)은 넓은 의미로는 웹 브라우저가 HTML 페이지를 인식하는 방식이고, 좁게는 document 객체와 관련된 객체의 집합이다.


 HTML 페이지는 트리모양으로 나타낼 수 있는데 head, body와 같은 요소들을 노드라고 부른다. 


 문서객체만들기

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document Object Model</title>
<script>
 
/*
createElement(tagName) : 요소 노드를 생성
createTextNode(text) : 텍스트 노드를 생성
appendChild(node) : 객체에 노드를 연결
*/
 
window.onload = function () {
    var header = document.createElement('h1');
    var textNode = document.createTextNode('hello DOM');
    
    // node connection
    header.appendChild(textNode);
    document.body.appendChild(header);
};
 
</script>
</head>
<body>
    
</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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document Object Model</title>
<script>
 
/*
createElement(tagName) : 요소 노드를 생성
createTextNode(text) : 텍스트 노드를 생성
appendChild(node) : 객체에 노드를 연결
setAttribute(name, value) : 객체의 속성지정
getAttribute(name) : 객체의 속성 가져옴
*/
 
window.onload = function () {
    var img = document.createElement('img');
    img.setAttribute('src', 'abc.jpg');
    img.setAttribute('width', 500);
    img.setAttribute('height', 300);
    
    img.setAttribute('data-property', 300);
    
    document.body.appendChild(img);
};
 
</script>
</head>
<body>
    
</body>
</html>
cs



문서객체만들기(innerHTML 속성)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document Object Model</title>
<script>
 
/*
innerHTML 속성추가
*/
 
window.onload = function () {
    var output = '';
    
    document.body.innerHTML = output;
};
 
</script>
</head>
<body>
    
</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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document Object Model</title>
<script>
 
/*
innerHTML 속성추가
*/
 
window.onload = function () {
    var output = '';
    
    output += '<ul>';
    output += '        <li>hello javaScipt</li>';
    output += '        <li>hi javaScipt</li>';
    output += '</ul>';
    
    document.body.innerHTML = output;
};
 
</script>
</head>
<body>
    
</body>
</html>
cs


퇴사 관련 이야기들을 모아 책으로 출판했습니다. 

아래 링크에서 전체 목차를 읽어보세요!

대기업 퇴사 이야기 전체보기 : http://www.bookk.co.kr/book/view/21659



아래 링크로 간단한 후기 링크를 남기면 배송비도 환급된다고 하니 참고해주세요.

http://www.bookk.co.kr/community/postscript

저작자표시 비영리 변경금지

'문돌이의 IT > JavaScript' 카테고리의 다른 글

자바스크립트의 역사 - ECMAScript란?  (0) 2018.08.25
자바스크립트 예외처리  (0) 2017.10.19
자바스크립트 브라우저 객체 모델(javaScript BOM)  (0) 2017.10.17
ECMAScript5 Json 객체  (0) 2017.10.17
ECMAScript5 Array 객체  (0) 2017.10.16

+ Recent posts

티스토리툴바