Notice
Recent Posts
Recent Comments
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- Internet Explorer 8
- php
- 오좀니아
- HP 신제품
- ddos
- 한메일
- USB 레지스트리
- PDA
- 옴니아2
- XP 설치
- IE8
- VMwareTools
- 파워블로그
- 이클립스 설정
- 한메일 smtp
- 파블애드
- 이클립스
- 한메일 pop
- HP
- 윈도우 7
- 삼성 메모리
- Windows 7
- Live Mesh
- VMware
- 이클립스 플러그인
- IE 8
- jQuery
- DDos 전용 백신
- 오즈 옴니아
- Ajax
Archives
- Today
- Total
엉망진창
문서 객체 모델(DOM) 본문
초기의 브라우저에서 자바스크립트가 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); Setter1. 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 |