웹개발 기초 10주차

자바스크립트 코드는 브라우저로 3가지 유형 객체를 제공받아 활용 가능

1. BOM 객체

2. 코어 객체

3. HTML DOM 객체

- 간단하게 DOM이다.

- 웹 페이지 작성된 HTML 태그 당 객체(DOM 객체) 생성

-> HTML 태그가 출력된 모양, 컨텐츠 제어(CSS3 스타일 시트 접근, 변경, HTML 태그에 출력된 텍스트, 이미지 변경)

- DOM 트리

-> HTML 태그는 포함 관계 따라 DOM 객체 트리 생성 (부모 자식 관계)

- DOM 객체

-> DOM 트리의 한 노드, HTML 태그 당 하나의 DOM 객체 생성

 

DOM 트리 특징

- DOM 트리 루트는 document 객체

- DOM 객체 종류는 HTML 태그 종류 만큼

- HTML 태그당 DOM 객체 하나씩 생성

- HTML 태그의 포함관계에 따라 DOM 트리 부모 자식 관계

 

HTML 태그

- 엘리멘트(element)로도 불림

- 5가지 요소로 구성

-> 1.태그 이름, 2.속성, 3.CSS3 스타일, 4.이벤트 리스너, 5.콘텐츠(innerHTML) 

 

DOM 객체는 5가지 요소로 구성

1. 프로퍼티 : HTML 속성 반영

2. 메소드 : DOM 객체 멤버함수로 HTML 태그 제어 가능

3. 컬렉션 : 자식 DOM 객체의 주소를 갖는 등 배열과 비슷한 집합적 정보

4. 이벤트 리스너 : HTML태그에 작성된 이벤트 리스너 반영 (약 70개 이벤트 리스너 가질 수 있다)

5. CSS3 스타일  : HTML 태그에 설정된 CSS3 스타일 시트 정보 반영

-> DOM 객체 style 프로퍼티로 HTML 태그 모양 제어 가능

 

DOM 객체 찾기 

1. getElementById(); // id로 찾기 (단수)

2. getElementsByTagName(); // TagName으로 찾기 (복수)

ex) document.getElementsByTagName("div"); 

3. getElementsByClassName(); // ClassName으로 찾기 (복수)

ex) document.getElementsByTagName("class"); 

4. getElementsByName(); // Name으로 찾기 (복수)

 

var p = document.getElementById("ID"); // id를 찾아 p 변수에 대입

p.id; = id의 이름

p.tagName = id를 가진 태그 이름

p.innerHTML = 적용된 HTML 내용

p.style.color = 글자 색

p.onclick = onclick을 할 때의 정보

p.childElementCount = 자식의 개수

p.offsetWidth = p의 너비

p.offsetHeight = p의 높이

 

this키워드 : 객체 자신을 가리킨다.

 

document : HTML 문서 전체를 대변 // DOM객체가 아님

-> 연결된 스타일 시트가 없어 document에서는 CSS3스타일시트 연결X

 

style 시트에서의 direction : rtl(right-to-left direction) | ltr(left-to-right direction) // 오른쪽 정렬, 왼쪽 정렬

 

onload = "내용"; // 페이지가 모두 로드 되고 실행

 

document.write();

document.writeln(); // HTML 텍스트에 \n을 덧붙여 출력 => 한 칸 띄는 효과 ==  

-> 한 줄을 띄려면 document.write("<br>");

document.open(); // 현재 브라우저에 출력된 HTML 지우고 새 HTML 페이지 시작

document.close(); // 현재 브라우저에 출력된 HTML 페이지 완성 (더 이상 document.write() 사용 불가)

 

window.open(URL,NAME,OPTION); 

1. URL : 새 창에 URL 주소 열기

2. NAME : 이름 또는 target 속성(_blank, _parent, _self, _top, name)

3. OPTION : width, height, toolbar, menubar, ...

 

문서 동적 구성

DOM 객체 동적 생성 : document.createElement("태그 이름");

DOM 트리에 삽입 :

1. 부모.appendChild(DOM 객체);

new.appendChild(newDIV); - 마지막 자식으로 추가

2. 부모.insertBefore(DOM 객체, [기준자식]);

new.insertBefore(newDIV, new.childNodes[n]);- 태그의 n+1 번째 자식 앞에 추가

DOM 객체 삭제

var removeObj = 부모.removeChild(삭제 할 객체);