DOM

문서 객체 만들기

from. Modern javascript & jQuery

1. document 객체의 노드 생성 메서드

DOM 메서드
메서드 설명
createElement(tagName)
createTextNode(text);

2. 문서 객체의 연결 메서드

DOM 메서드
메서드 설명
appendchild(node);

3. 문서 객체 속성 지정 메서드

DOM 메서드
메서드 설명
setAttribute(name, value);
getAttribute(name);
							window.onload = function  () {
								 // 변수 선언
								 var img = document.createElement("img");

								 // 웹 표준이 정의하거나, 웹 브라우저가 지원하는 태그의 속성에만 사용할 수 있는 방식.
								 img.src = "panda.jpg";
								 img.width = 500;
								 img.height = 350;

								 // 웹 브라우저가 지원하지 않는 속성, 임의 작성 속성을 사용할 경우의 방식.
								 img.setAttribute('src','panda.jpg');
								 img.setAttribute('width', 200);
								 img.setAttribute('height', 300);

								 // setAttribute() 메서드를 사용하지 않으면 불가능합니다.
								 img.setAttribute('data-property', 350);

								 // 노드를 연결
								 document.body.appendChild(img);
							 }
						

4. 문서 객체 만들기 - innerHTML

DOM 메서드
메서드 설명
innerHTML

innerHTML 속성에 복합 대입 연산자를 사용하여 문자열 추가.
인터넷 익스플로러를 제외한 브라우저는 모든 문서 객체의 innerHTML 속성을 바꿀 수 있지만, 인터넷 익스플로러는 col, colgroup, frameset, head, html, style, table, tbody, tfoot, thead, title, tr 태그의 innerHTML 속성을 바꿀 수 없다. innerHTML 속성을 응용하면서 문서 객체를 생성하는 것 외에도 문서 객체를 수정하거나 삭제할 수도 있음.

							 // 변수 선언
							 var output = "";
							 output += '
    '; output += '
  • JavaScript
  • '; output += '
  • jQuery
  • '; output += '
  • Ajax
  • '; output += '
'; // innerHTML 속성에 문자열을 할당. document.body.innerHTML = output;

5. 문서 객체 가져오기

DOM 메서드
메서드 설명
getElementById(id);
getElementsByTagName(name);
getElementsByName(name);

6. 문서 객체의 스타일 조작

DOM 메서드
메서드 설명
object.style.property = "value";

7. 문서 객체 제거

DOM 메서드
메서드 설명
removeChild(child);
							// 부모 노드로 이동한 후 부모 노드에서 자식 노드를 삭제.

							ex. WillRemove.parentNode.removeChild(willRemove);