Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

엉망진창

문서 객체 모델(DOM) 본문

Study_Web/JS

문서 객체 모델(DOM)

엉망진창 2008. 4. 5. 11:45

초기의 브라우저에서 자바스크립트가 forms나 images와 같은 호스트 객체를 이용하여 현재 로딩되어 있는 문서의 일부에만 제한적으로 접근할수 밖에 없는 문제를 해결하기 위해 또 브라우저 종류에 관계없이 동작하는 코드를 만들기 위해 표준화가 필요했기에 W3C에서 만들어낸 표준을 말함.


getter


- 문서의 각 구성요소에 접근하기 위한 여러가지 메소드

1. getElenmentById

- example 라는 div 에 접근
var mydiv = document.getElenmentById("example");

2. getElementByTagName

- 문서내의 모든 p 요소집합

var paragraphs = document.getElementsByTagName("p");

- paragraphs는 배열처럼 다룰수 있으며 paragraphs.length 를 이용해 문서의 p 요소 개수를 알아낼수도 있다.

for ( var i= 0; i<paragraphs.length; i++) {

}

-ID가 example인 요소안에 있는 문단 요소를 선택
document.getElementById("example").getElementsByTagName("p");

3.getAttribute

- <p id="intro" title="소개 메시지"></p> 의 속성값 가져오기
var introduction = document.getElementById("intro");
var title_text = introduction.getAttribute("title");


노드

1. parentNode

- 노드트리에서 위쪽에 존재하는 요소들로 접근.
var introduction = document.getElementById("intro");
var container = introduction.parentNode;

2. childNode
- 노드의 집합을 반환,배열의 멤버요소에 접근하는 방식과 동일하게 노드에 접근 가능.

- 자식노드의 개수를 알려주는 length 프로퍼티 사용
var introduction = document.getElementById("intro");
var container = introduction.parentNode;
var children = container.childNode;
alert(children.length);

3. firstChild
- 요소노드의 childNodes로 얻게 되는 노드중에 첫번째 노드에 대한 참조를 반환

4. lastChild
- 요소노드의 childNodes로 얻게 되는 노드중에 마지막 노드에 대한 참조를 반환

5. previousSibling
- 부모노드의 childNodes 프로퍼티에서 해당 노드의 바로 앞에 있는 노드에 대한 참조를 반환

6. nextSibling
- 부모노드의 childNodes 프로퍼티에서 해당 노드의 바로 뒤에 있는 노드에 대한 참조를 반환

7. nodeValue
- 어떤 요소 노드일지라도 nodeValue의 값은 null, 실제로 얻어야 하는 값은 요소안에 포함되어 있는 텍스트 노드의 값.

- intro라는 ID를 가진 문단 내에 있는 텍스트 값
var introduction = document.getElementById("intro");
var text = introduction.firstChild;
alert(text.nodeValue);

- h1 요소 내에 있는 텍스트 값
var headers = document.getElementById("h1");
var text = headers[0].firstChild;
alert(text.nodeValue);

-위코드를 한줄로 표현하면
alert(document.getElementById("h1")[0].firstChild.nodeValue);


Setter


1. createElement
- 새로운 요소 노드 생성
var para = document.createElement("p");
만들어진 문단 요소는 문서에 바로 표시 되지 않고 자바스크립트의 임시 저장소에 보관

2. createTextNode
- 텍스트 노드 생성
var text = document.createTextNode("노드 생성");

3. setAttribute
- 요소의 속성값 설정, 인자는 속성의 이름과 속성에 설정하려는 값

- para 변수로 참조하는 문단 요소 노드의 title 속성을 설정
para.setAttribute("title","내용");

4. appendChild
- 한 노드를 다른 노드에 삽입하는 기능

- 새롭게 만든 문단 요소에 텍스트 노드를 삽입하는 코드
var para = document.createElement("p");
var text = document.createTextNode("노드 생성");
para.appendChild(text);

- </body> 태그 앞쪽에 새로운 문단을 추가함으로써 노드 트리를 업데이트
//원래의 마크업 코드
<body>
    <h1>환영합니다.</h1>
    <p id="intro">문서.</p>
</body>

//삽입하려는 내용
var para = document.createElement("p");
var text = document.createTextNode("노드 생성");
para.appendChild(text);
para.setAttribute("title","내용");

//새로 생성된 마크업 코드
<p title="내용">노드 생성</p>

//body 요소의 자식 노드로 만들기
var introduction = document.getElementById("intro");
var container = introduction.parentNode;
contariner.appendChild(para);
//appendChild 메소드를 사용하여 노드를 어떤 요소에 추가하고 나면, 추가된 노드는 해당요소의 lastChild가 됨.

5. removeChild
- 특정 자식 노드를 요소에서 제거
var introduction = document.getElementById("intro");
var text = introduction.firstChild;
contariner.removeChild(text );
 

'Study_Web > JS' 카테고리의 다른 글

드래그로 체크박스 체크하기 2  (0) 2008.06.30
드래그로 체크박스 체크하기  (0) 2008.06.30
자바스크립트 이벤트 핸들러  (2) 2008.02.15
자바스크립트 onclick에서 return  (0) 2007.05.23
target(href) 타겟사용법  (0) 2007.01.19
'Study_Web/JS' Related Articles more