CheerUp_Cheers
자바스크립트 - 문서객체모델(DOM) 본문
#학습내용
- DOM의 이해와 Windows 객체
- 웹 문서 접근
- 웹 문서의 조작
#학습목표
- 객체를 생성하고 Property와 Method를 접근하여 사용 가능.
- 다양한 내장 객체의 사용법을 알고 활용.
#DOM의 의미
#최근과 예전
- 예전 : 웹 브라우저 내부에서 실행되는 경우.
- 지금 : 100% 웹브라우저에서만 실행된다고 보기 힘듬.
코어 자바스크립트 vs 클라이언트 측 자바스크립트(DOM 스크립트)
1) 코어 자바 : 자바스크립트의 기본이 되는 부분만 정의
2) DOM스크립트 : 웹브라우저에 관련된 자바스크립트
#DOM
클라이언트 측 자바스크립트의 핵심.
객체화 -> 구조화 -> 계층 으로 구성.
- 웹 브라우저와 웹 문서의 내용 객체화
- 만약 웹 브라우저 창의 위치를 알고 싶다면?
window 객체의 창의 위치를 알려주는 프로퍼티를 읽거나/수정
#DOM 레벨과 호환
- 웹 브라우저들은 비호환적인 DOM개발
- 최근 DOM은 정리되고, 표준화
- 문제점
호환성의 문제로 오래된 객체 모델은 남음 -> 자바스크립트 개발 어지럽힘
이러한 DOM버전을 DOM 레벨로 분류, 레벨 0부터 최신 레벨
- 현재 웹 브라우저 윈도우
윈도우 객체
도큐먼트 객체 : 웹문서, 웹문서상의 HTML요소 일부 접근 가능.
#윈도우의 크기와 위치 정보
- 윈도우 객체의 프로퍼티 : 인터넷 익스플로러 고유의 문서객체모델 이용 -> 다른 웹 브라우저에서 사용되는 객체 프로퍼티와 동일 방법 사용.
- 웹 브라우저 창의 크기(브라우저 창의 UI 요소 포함)
var windowWidth = window.outerWidth;
var windowHeight = window.outerHeight;
- 웹 브라우저 창의 크기(브라우저 창의 UI 요소 제외)
var webViewWidth = window.innerWidth;
var webViewHeight = window.innerHeight;
- 창의 위치 정보_ 모니터 좌측 상단부터 브라우저 창까지의 거리 반환
var windowPosX = window.screenX;
var windowPosY = window.screenY;
- 웹 브라우저 창 내부에서 스크롤 등의 조작을 통해 얼마나 이동했는지 파악
웹 문서 내부에서 특정 이미지 부분을 확대해 관찰할 수 있는 기능 구현시.
var scrollX = window.pageXoffset;
var scrollY = window.pageYoffset;
-> 위의 프로퍼티는 읽기 전용
-> 브라우저 창의 크기 또는 위치 변경은 좋지않아
#윈도우의 생성
- 팝업 윈도우 생성
부정적인 인식이 강함.(사용자가 보고있는 창을 가림, 광고)
팝업 차단하는 기능은 기본기능이 됨 -> 팝업윈도우는 기능을 상실.
- 윈도우 생성 방법
윈도우 객체의 open매소드 사용.
3가지 전달 인자.
var newWindow = window.open("login/index.html", "새로 생성된 창의이름", "속성"(width=500, height=350);
- 윈도우의 생성
var p = document.getElementsByTagName("p");
p[0].addEventListener('click', openSub, false);
function openSub(){ var w = window.open("sub.html", "sub", "width=500,height=350,menubar=yes, location=yes");
- 윈도우의 수정
function openSub(){ var w = window.open("sub.html", "sub", "속성");
function openSub2(){ var w = window.open("sub2.html", "sub", "속성");
-> 기존창의 이름과 같은것으로 설정하면 새로운 창이 열리지않고 수정되는것 처럼 됨.
- 윈도위 close 메소드
현재 창을 닫음. -> window.close();
(?) 만약 A창에서 B창을 열고, A창에서 B창을 닫고 싶다면?
w에 윈도우를 할당하여, w를 close()하면 됨.
[1] w = window.open("html", "이름", "속성");
[2] w.close();
#alert
alert - 경고상자 생성, 이 상자 없애기 전까지는 모든 스크립트 멈춤.
window.alert("Hello World!");
#웹 문서 접근
인터렉티브 한 기능을 추가하거나 움직임을 적용하기 위해서는? CSS와 같이 해당요소 접근
CSS : 선택자를 이용하여 HTML 문서 내의 요소 접근
DOM : 웹브라우저와 HTML 문서의 모든기능과 요소에 접근.
#오래된 방법_무엇에 접근할 수 있나?
버전2와 3에 걸쳐 기본적인 DOM 지원.
오래된 표준 : DOM 레벨 0.
ex) document.(forms[] | anchors[] | images[] | applets[] | links[])
#오래된 방법_이름속성으로 접근
- name 속성
서식 입력폼을 포함한, 대부분 요소는 name속성을 가질수 있었음
document.personallinfo.button.addEventListener("click", validForm, flase); // 버튼 접근.
#새로운 방법_DOM 문서 트리
- 새로운 표준 DOM
HTML 문서의 모든 요소에 접근할 수 있게 문서를 트리로 표현.
-> 요소사이의 관계로 모두 접근 가능.
중첩된 요소들은 부모 자식관계로 계층됨.
- 노드
<body>, <html>, Document가 모두 노드.
#새로운 방법_문서 내 노드 접근1(두 섹션)
- getElementsByTageName()
도큐먼트 객체의 프로퍼티로 HTML요소명(태그명)으로 노드에 접근.
프로퍼티가 반환하는 객체가 두개이상일수도 있으니 배열로 반환.
ex) document.getElementsByTageName('p')
- getElementById()
문서 끝에 무언가를 출력해야 할경우 자주 사용.
하나의 노드만 반환(아이디니까)
#새로운 방법_노드의 순환
위의 방법은 HTML문서 내의 모든 노드를 선택하기에는 어려움이 있음.
텍스트 노드는 접근조차 불가.
-> DOM은 노드를 순환할 수 있는 프로퍼티 제공!!
- 자식 노드 접근
childNodes[], firstChild, lastChild
var habit3 = document.getElementById("habit").childeNodes[5].lastChild.textContent;
-> id속성값이 habit인 노드의 5번쨰 자식 노드의 마지막 자식노드의 텍스트를 할당하라!
(!) 주의
줄바꿈도 자식으로 인식 해버림.
- 노드 객체의 부모 노드에 접근
parentNode 프로퍼티
- DOM 문서 트리 내에 같은 계층에 있는 요소들에게 접근
nextSilbling과 previousSilbling 사용.
- 문서 내 노드 접근 2
최신의 DOM 레벨이 발표되면서 기존에 비표준이었던 몇몇 유용한 DOM 프로퍼티 표준 지정됨.
- getElementsByClassNmae()
클래스 속성값을 이용하여 노드 객체를 선택하는 프로퍼티가 표준화
ex) var habit3 = documents.getEelementsByClassNmae("listTtitle")[2].nextSilbling.textContent;
-> 세 번쨰 노드의 바로 다음 이웃하는 노드의 텍스트에 접근하기 위한 코드.
- getElementsByName()
name속성으로 접근한다는것 말고는 동일.
- querySelectorAll()
CSS셀렉터를 이용하여 노드를 선택하는 방법.
모든노드를 배열로 반환.
ex) var habit3 = document.querySelectorAll(".listTitle")[2].nextSibling.textContent;
#웹문서의 조작
#웹 문서의 조작_write/writeln
- write
DOM초창기에 만들어진 메소드로 노드에 적용 불가
해당 위치에 정확하게 표현 가능.
document.write();
(!) 주의
이벤트성으로 호출 했을떄, 기존의 html을 지움
즉 로딩 완료 후, 다시불렀을 때.
- writeln
줄바꿈 표시 이외에는 비슷.
HTML에서는 줄바꿈을 무시, <PRE>요소를 포함하는 콘텐츠 출력전에는 동일.
#웹문서의 조작_노드의 생성과 삽입.
- createElement()/creatTextNode() : 요소와 텍스트 노드 생성.
ex) var newElement = document.createElement("p");
var newTextNode = document.createTextNode("이것은 단락");
- appendChilde() : 특정 노드의 자식으로 삽입하기 위해 사용.
- insertBefore() : 특정 요소 앞에 삽입하기 위해 사용.
부모노드.insertBefore(사입할 노드, 레퍼런스 노드)
- replaceChilde() : 자식 노드 중 특정노드를 새로운 노드로 치환하는 역할.
부모 노드.replaceChild(새로운 노드, 바뀔노드);
#웹문서의 조작_노드의 속성 조작.
- getAttribute() / setAtrribute()
노드.getAttribute("속성명")
노드.setAttribute("속성명", "속성값")
#웹문서 조작_노드에 CSS 속성 적용.
- CSS 변경
노드.style.css소석성 = css속성값
- 주의사항
CSS속성을 표시할 떄 하이픈(-)이후는 모두 대문자 표기.
ex) CSS 속성 중 배경색 속성 : background-color -> backgroundColor
#웹문서 조작_innerHTML
비표준 대명사 -> HTML5의 당당한 표준
특정 요소 내부에 HTML코드를 삽입하는 가장 빠른 방법.
ex) document.getElementById("console").innerHTML = outputString;
용어
DOM : 문서 객체 모델의 약자로 객체지향모델로써 구조화된 문서인 HTML문서를 조작하기 위한 API를 표현하는 방식.
DOM level 0 : DOM이 만들어지기 이전의 특정 웹브라우저에 종속된 DOM. DOM 표준화 이전에 있떤 단계
DOM 트리 : HTML문서의 계층 관계를 표현하는 트리 형태의 분석
'프론트 > HTML' 카테고리의 다른 글
| HTML5 - 레이아웃 고급 CSS 기능 (0) | 2020.03.05 |
|---|---|
| HTML5 - CSS 문서표현(하) (0) | 2020.03.04 |
| HTML5 - CSS 문서표현(상) (0) | 2020.03.02 |
| HTML5 - 문서 구조화(하) (0) | 2020.02.28 |
| HTML5 - 문서 구조화(상) (0) | 2020.02.26 |