글
자바 스크립트
문서 객체 모델 ( DOM, Document Object Model )
1. 문서 객체 모델 (DOM)
- 웹브라우저가 HTML페이지를 인식하는 방식
- document 객체와 관련된 객체의 집합
2. DOM 용어 정리
1) 태그 : HTML 페이지 내에 존재하는 element (ex>html, head, body...)
2) 문서 객체 : 태그를 자바스크립트에서 이용할 수 있는 객체로 만든 것.
3) 노드 : DOM 트리에서 각각의 요소들 / 요소노드(Element Node)와 텍스트노드(Text Node)로 구분
ex> <h1> 안녕하세요. 저는 텍스트 노드입니다.</h1>
=> h1 : 요소 노드 // 안녕하세요. 저는 텍스트 노드입니다. : 텍스트 노드
<!DOCTYPE html>
<html> -> 요소 노드
<head> -> 요소 노드
<title>INDEX</title> -> title :요소 노드 , 'INDEX' :텍스트 노드
</head>
<body> -> 요소 노드
<h1>Text Node</h1> ->h1 : 요소 노드, 'Text Node' : 텍스트 노드
<img src="image.jpg"/> -> 요소 노드
</body>
</html>
* '동적으로 문서 객체를 생성한다' 의미는 ?
=> 자바 스크립트를 사용해 원래 HTML페이지에는 없던 문서 객체를 생성하는 것.
3. 문서 객체 만들기
1) 요소 노드와 텍스트 노드를 생성
2) 생성한 요소 노드와 텍스트 노드를 연결(텍스트 노드를 요소 노드에 붙여줌)
3) 생성한 문서 객체를 body 문서 객체에 연결(화면에 문서 객체를 출력하기 위해서)
* document 객체의 노드 생성 메서드 -> 1)과정
createElement(tagName) |
요소 노드를 생성 |
createTextNode(text) |
텍스트 노드를 생성 |
* 문서 객체의 연결 메서드 ->2) , 3) 과정
appendChild(code) |
객체에 노드를 연결 |
* 예제 코드
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function () {
// 변수를 선언합니다.
var header = document.createElement('h1'); ->요소 노드 생성
var textNode = document.createTextNode('Hello DOM'); -> 텍스트 노드 생성
// 노드를 연결합니다.
header.appendChild(textNode); -> 요소 노드와 텍스트 노드 연결
//appendDChild를 해줘야 h1안으로 텍스트가 들어간다.
// 화면에 출력은 아직 안됨.
document.body.appendChild(header); -> 생성한 문서 객체를 body
//document 는 브라우저에 제공해주는 객체 문서 객체에 연결
//DOM tree에 추가되어야 출력될 수 있음
};
</script>
</head>
<body>
</body>
</html>
4. 문서 객체 만들기 (2) - 변수의 속성 지정
-> 텍스트 노드를 갖지 않는 노드를 생성하는 방법
=> 대표적으로 img 태그.(이미지 태그를 넣기 위해서는 src 속성을 지정해야 함.)
-> 문서 객체의 속성 지정 방법 (2가지)
1) 변수를 선언한 후,
변수.속성 = '값'으로 넣기
=> 웹표준이 정의하거나 웹브라우저가 지원하는 태그의 속성에서만 사용가능
* img.속성명 = 값;
- 속성은 반드시 해당 엘리먼트에 존재하는 속성이어야 한다.
- 만약, 존재하는 속성이 아닌 경우에는 추가할 수 없다.
- img['data-property']=350; //기존에 있는 속성이 아니라서 추가 안됨
2) 문서 객체의 속성 메서드 이용
=> 웹 브라우저가 지원하지 않은 속성도 넣을 수 있음.
setAttribute(name,value) |
객체의 속성을 지정 |
getAttribute(name) |
객체의 속성을 가져옴 |
1)의 예제
<script>
window.onload = function () {
// 변수를 선언합니다.
var img = document.createElement('img');
//이미지 태그의 속성 설정
img.src = 'Penguins.jpg';
img.width = 500;
img.height = 350;
// 노드를 연결합니다.
document.body.appendChild(img);
};
</script>
2)의 예제
<script>
window.onload = function () {
// 변수를 선언
var img = document.createElement('img');
//setAttribute로도 속성값을 설정
img.setAttribute('src', 'Penguins.jpg');
img.setAttribute('width', 500);
img.setAttribute('height', 350);
// setAttibute() 메서드를 사용하지 않으면 불가능
img.setAttribute('data-property', 350);
// 노드를 연결합니다.
document.body.appendChild(img);
};
</script>
5. 문서 객체 만들기 (3) -> innerHTML 속성을 사용하는 것.
- 3,4 번 문서 객체 생성 방법 -> 노드를 만들고 연결하는 방법
- 5번 방법 -> 문서 객체의 innerHTML 속성을 사용하는 것. (더 쉬운...)
- 문서 객체의 innerHTML - 태그의 내부를 의미하는 속성
- 문자열을 선언하고 body 문서 객체의 innerHTML 속성에 넣기만 하면 문서 객체 생성 !
<h1> |
hello~!! |
</h1> |
태그 |
innerHTML속성 |
태그 |
예제>
<script>
window.onload = function () {
// 변수를 선언
var output = '';
output += '<ul>';
output += ' <li>JavaScript</li>';
output += ' <li>jQuery</li>';
output += ' <li>Ajax</li>';
output += '</ul>';
// innerHTML 속성에 문자열을 할당합니다.
document.body.innerHTML = output;
};
</script>
6. 문서 객체 가져오기(1)
-> 웹 페이지에 존재하는 HTML 태그를 자바스크립트로 가져오는 방법
* document 객체의 노드 추출 메서드
getElementById(id) |
태그의 id 속성이 일치하는 id와 일치하는 문서 객체를 가져옴. |
- script 부분 -> vaar header = document.getElementById('header1') =>header1의 객체 h1의 문서 객체 가
져옴
- body부분 -> <h1 id="header1">hello</h1>
* innerHTML을 이용하여 속성 변경
예제>
<head>
<script>
window.onload = function () {
// 문서 객체를 가져옵니다.
var header1 = document.getElementById('header_1');
// 문서 객체의 속성을 변경합니다.
header1.innerHTML = 'with getElementById()';
};
</script>
</head>
<body>
<h1 id="header_1">Header</h1>
</body>
7. 문서 객체 가져오기(2) -> 한번에 여러개의 문서 객체를 가져오기.(복수형 : Elements)
* document 객체의 노드 추출 메서드
getElementsByName(name) |
태그의 name속성이 name과 일치하는 문서 객체를 배열로 가져옴 |
getElementsTagName(tagName) |
tagName과 일치하는 문서 객체를 배열로 가져옴 |
- 배열로 순서대로 들어감 -> 반복문 사용시,' for in' 반복문 사용 불가 (브라우저에 따라 속성과 메서드 종류에 차이가 있음)
-> '단순 반복 for문' 사용
- 예제) getElementsByTagqName()메서드를 사용하여 복수형 문서 객체를 가져와 속성을 변경
<head>
<title>Index</title>
<script>
window.onload = function () {
// 문서 객체를 가져옴
var headers = document.getElementsByTagName('h1');
for (var i = 0; i < headers.length; i++) {
// 문서 객체의 속성을 변경
headers[i].innerHTML = 'hey~';
}
};
</script>
</head>
<body>
<h1>Header</h1>
<h1>Header</h1>
</body>
8. 문서 객체의 스타일 조작
- 문서 객체의 style 속성을 사용하여 문서 객체의 스타일 변경
1) getElementById()메서드를 사용해 문서 객체를 가져옴
2) 문서객체의 style 속성을 지정 <문서객체.style.속성 = '값'>
예제>
<head>
<script>
// 아이디를 찾아서 스타일을 설정
window.onload = function () {
// 문서 객체를 가져옴
var header = document.getElementById('header');
// 문서 객체의 스타일을 바꿔줌
//style의 이름은 css와 비슷
// ex> border -> border
// font-family->fontFamily ,background-color =>backgroundColor (자바스크립트에서 식별자에 '-'사용 불가)
// header객체에 스타일 적용
header.style.border = '2px Solid Black';
header.style.color = 'Orange';
header.style.fontFamily = 'Helvetica';
};
</script>
</head>
<body>
<h1 id="header">Header</h1>
</body>
9. 문서 객체 제거
* 문서 객체 제거 메서드
removeChild(child) |
문서 객체의 자식 노드를 제거 |
예제)
<head>
<script>
window.onload = function () {
// 문서 객체를 가져옴
var willRemove = document.getElementById('will_remove');
// 문서 객체를 제거.
document.body.removeChild(willRemove);
//body-> 반드시 부모를 찾아서 지워야 한다.
};
</script>
</head>
<body>
<h1 id="will_remove">Header</h1>
</body>
-> 부모 노드.removeChild(제거하고자 하는 자식 노드);
// 부모노드로 이동하여 자식 노드를 제거
- C.S.Y -
RECENT COMMENT